mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-02 20:02:29 +01:00
Refactor login layout and styles (#29)
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
M. Weber
Rohit Yadav
parent
142bdedd03
commit
053b5415ee
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<div id="userLayout" :class="['user-layout-wrapper', device]">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<div class="header">
|
||||
<img src="~@/assets/banner.svg" class="logo" alt="logo">
|
||||
</div>
|
||||
<div id="userLayout" :class="['user-layout', device]">
|
||||
<div class="user-layout-container">
|
||||
<div class="user-layout-header">
|
||||
<img src="~@/assets/banner.svg" class="user-layout-logo" alt="logo">
|
||||
</div>
|
||||
<route-view></route-view>
|
||||
</div>
|
||||
@ -32,100 +30,34 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#userLayout.user-layout-wrapper {
|
||||
height: 100%;
|
||||
.user-layout {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
&.mobile {
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
&-container {
|
||||
padding: 3rem 0;
|
||||
width: 100%;
|
||||
|
||||
.main {
|
||||
max-width: 368px;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: rgb(255,255,255);
|
||||
padding-top: 75px;
|
||||
@media (min-height:600px) {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
|
||||
.header {
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-left: -12px;
|
||||
margin-top: -10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 33px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 12px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 260px;
|
||||
width: 368px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 0 16px;
|
||||
margin: 48px 0 24px;
|
||||
text-align: center;
|
||||
|
||||
.links {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
transition: all 0.3s;
|
||||
&:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
width: 95%;
|
||||
max-width: 450px;
|
||||
border-style: none;
|
||||
margin: 0 auto 2rem;
|
||||
display: block;
|
||||
|
||||
.mobile & {
|
||||
max-width: 300px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,85 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-form
|
||||
id="formLogin"
|
||||
class="user-layout-login"
|
||||
ref="formLogin"
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
<a-form
|
||||
id="formLogin"
|
||||
class="user-layout-login"
|
||||
ref="formLogin"
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<a-tabs
|
||||
:activeKey="customActiveKey"
|
||||
size="large"
|
||||
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
||||
@change="handleTabClick"
|
||||
>
|
||||
<a-tabs
|
||||
:activeKey="customActiveKey"
|
||||
<a-tab-pane key="tab1">
|
||||
<span slot="tab">
|
||||
<a-icon type="safety" />
|
||||
<b>CloudStack Login</b>
|
||||
</span>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
v-decorator="[
|
||||
'username',
|
||||
{rules: [{ required: true, message: 'Enter your username' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="Password"
|
||||
v-decorator="[
|
||||
'password',
|
||||
{rules: [{ required: true, message: 'Enter your password' }], validateTrigger: 'blur'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="Domain"
|
||||
v-decorator="[
|
||||
'domain',
|
||||
{rules: [{ required: false, message: 'Enter your domain, leave empty for ROOT domain' }], validateTrigger: 'change'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="tab2" disabled>
|
||||
<span slot="tab">
|
||||
<a-icon type="audit" />
|
||||
<b>SAML</b>
|
||||
</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
||||
@change="handleTabClick"
|
||||
>
|
||||
<a-tab-pane key="tab1">
|
||||
<span slot="tab">
|
||||
<a-icon type="safety" />
|
||||
<b>CloudStack Login</b>
|
||||
</span>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
v-decorator="[
|
||||
'username',
|
||||
{rules: [{ required: true, message: 'Enter your username' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="Password"
|
||||
v-decorator="[
|
||||
'password',
|
||||
{rules: [{ required: true, message: 'Enter your password' }], validateTrigger: 'blur'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="Domain"
|
||||
v-decorator="[
|
||||
'domain',
|
||||
{rules: [{ required: false, message: 'Enter your domain, leave empty for ROOT domain' }], validateTrigger: 'change'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="block" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="tab2" disabled>
|
||||
<span slot="tab">
|
||||
<a-icon type="audit" />
|
||||
<b>SAML</b>
|
||||
</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
class="login-button"
|
||||
:loading="state.loginBtn"
|
||||
:disabled="state.loginBtn"
|
||||
>Log In</a-button>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
</div>
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
class="login-button"
|
||||
:loading="state.loginBtn"
|
||||
:disabled="state.loginBtn"
|
||||
>Log In</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -177,6 +173,15 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-layout-login {
|
||||
min-width: 260px;
|
||||
width: 368px;
|
||||
margin: 0 auto;
|
||||
|
||||
.mobile & {
|
||||
max-width: 368px;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user