diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/LoginLayout.vue | 51 | ||||
-rw-r--r-- | src/router/index.js | 17 | ||||
-rw-r--r-- | src/views/Login/Login.vue | 188 |
3 files changed, 127 insertions, 129 deletions
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue new file mode 100644 index 00000000..bb89f25e --- /dev/null +++ b/src/layouts/LoginLayout.vue @@ -0,0 +1,51 @@ +<template> + <main> + <b-container class="login-container" fluid> + <b-row class="login-row" align-v="center"> + <b-col class="login-branding mt-5 mb-5 text-center" md="6"> + <div class="login-branding__container"> + <img + class="logo" + width="200px" + src="@/assets/images/openbmc-logo.svg" + alt="" + /> + <h1>OpenBMC</h1> + </div> + </b-col> + <b-col md="6"> + <router-view /> + </b-col> + </b-row> + </b-container> + </main> +</template> + +<script> +export default { + name: 'LoginLayout' +}; +</script> + +<style lang="scss" scoped> +@import 'src/assets/styles/helpers'; + +.login-container { + @include media-breakpoint-up(md) { + background: linear-gradient(to right, $light 50%, $container-bgd 50%); + } +} + +.login-row { + @include media-breakpoint-up(md) { + min-height: 100vh; + } +} + +.login-branding__container { + @include media-breakpoint-up(md) { + float: right; + margin-right: 4rem; + } +} +</style> diff --git a/src/router/index.js b/src/router/index.js index 22662d71..73f31861 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import store from '../store/index'; import AppLayout from '../layouts/AppLayout.vue'; +import LoginLayout from '@/layouts/LoginLayout'; Vue.use(VueRouter); @@ -131,11 +132,17 @@ const routes = [ }, { path: '/login', - name: 'login', - component: () => import('@/views/Login'), - meta: { - title: 'appPageTitle.login' - } + component: LoginLayout, + children: [ + { + path: '', + name: 'login', + component: () => import('@/views/Login'), + meta: { + title: 'appPageTitle.login' + } + } + ] } ]; diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 730c7a91..369c56dd 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -1,89 +1,68 @@ <template> - <main> - <b-container class="login-container" fluid> - <b-row class="login-row" align-v="center"> - <b-col class="login-branding mt-5 mb-5" md="6"> - <div class="login-branding__container"> - <img - class="logo" - width="200px" - src="@/assets/images/openbmc-logo.svg" - alt="" - /> - <h1>OpenBMC</h1> - </div> - </b-col> - <b-col md="6"> - <b-form class="login-form" novalidate @submit.prevent="login"> - <alert class="login-error" :show="authError" variant="danger"> - <p id="login-error-alert"> - {{ $t('pageLogin.alert.message') }} - </p> - </alert> - <b-form-group - label-for="language" - :label="$t('pageLogin.language')" - > - <b-form-select - id="language" - v-model="$i18n.locale" - :options="languages" - data-test-id="login-select-language" - ></b-form-select> - </b-form-group> - <b-form-group - label-for="username" - :label="$t('pageLogin.username')" - > - <b-form-input - id="username" - v-model="userInfo.username" - aria-describedby="login-error-alert username-required" - :state="getValidationState($v.userInfo.username)" - type="text" - autofocus="autofocus" - data-test-id="login-input-username" - @input="$v.userInfo.username.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="username-required" role="alert"> - <template v-if="!$v.userInfo.username.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - <div class="login-form__section"> - <label for="password">{{ $t('pageLogin.password') }}</label> - <b-form-input - id="password" - v-model="userInfo.password" - aria-describedby="login-error-alert password-required" - :state="getValidationState($v.userInfo.password)" - type="password" - data-test-id="login-input-password" - @input="$v.userInfo.password.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="password-required" role="alert"> - <template v-if="!$v.userInfo.password.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </div> - <b-button - block - class="mt-5" - type="submit" - variant="primary" - data-test-id="login-button-submit" - :disabled="disableSubmitButton" - >{{ $t('pageLogin.logIn') }}</b-button - > - </b-form> - </b-col> - </b-row> - </b-container> - </main> + <b-form + class="login-form mx-auto ml-md-5 mb-3" + novalidate + @submit.prevent="login" + > + <alert class="login-error mb-4" :show="authError" variant="danger"> + <p id="login-error-alert"> + {{ $t('pageLogin.alert.message') }} + </p> + </alert> + <b-form-group label-for="language" :label="$t('pageLogin.language')"> + <b-form-select + id="language" + v-model="$i18n.locale" + :options="languages" + data-test-id="login-select-language" + ></b-form-select> + </b-form-group> + <b-form-group label-for="username" :label="$t('pageLogin.username')"> + <b-form-input + id="username" + v-model="userInfo.username" + aria-describedby="login-error-alert username-required" + :state="getValidationState($v.userInfo.username)" + type="text" + autofocus="autofocus" + data-test-id="login-input-username" + @input="$v.userInfo.username.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="username-required" role="alert"> + <template v-if="!$v.userInfo.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + <div class="login-form__section mb-3"> + <label for="password">{{ $t('pageLogin.password') }}</label> + <b-form-input + id="password" + v-model="userInfo.password" + aria-describedby="login-error-alert password-required" + :state="getValidationState($v.userInfo.password)" + type="password" + data-test-id="login-input-password" + @input="$v.userInfo.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="password-required" role="alert"> + <template v-if="!$v.userInfo.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </div> + <b-button + block + class="mt-5" + type="submit" + variant="primary" + data-test-id="login-button-submit" + :disabled="disableSubmitButton" + >{{ $t('pageLogin.logIn') }}</b-button + > + </b-form> </template> <script> @@ -154,46 +133,7 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - -.login-container { - @include media-breakpoint-up(md) { - background: linear-gradient(to right, $light 50%, $container-bgd 50%); - } -} - -.login-row { - @include media-breakpoint-up(md) { - min-height: 100vh; - } -} - -.login-branding__container { - @include media-breakpoint-up(md) { - float: right; - margin-right: 4rem; - } -} - .login-form { max-width: 360px; - margin-right: auto; - margin-left: auto; - - @include media-breakpoint-up(md) { - margin-left: 4rem; - } -} - -.login-form__section { - margin-bottom: $spacer; -} - -.alert.login-error { - margin-bottom: $spacer * 2; -} - -.login-branding { - text-align: center; } </style> |