diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-03 15:11:48 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-12 20:59:42 +0300 |
commit | 71650fff20c0ad29eb05d770736386863324b64e (patch) | |
tree | 2c3a71a9c71ab7c70f2d1ed0e5e7a437144e339f /src/views/Login/Login.vue | |
parent | 36016e45acae516045cbb74be40e74881a5fc95f (diff) | |
download | webui-vue-71650fff20c0ad29eb05d770736386863324b64e.tar.xz |
Add alert message component and documentation
- Add custom alert component to simplify the use of custom alerts
- Add documentation for using the custom alert
- Update the login error alert to use the alert component instead of
the Bootstrap-vue component.
- Add the enhanceApp and bmcAppPlugin to extend vuepress to use both
the BMC custom and Boostrap-Vue components along with the custom styles
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5c0b696ca47ddba0df18041d6c5ee7509bf23572
Diffstat (limited to 'src/views/Login/Login.vue')
-rw-r--r-- | src/views/Login/Login.vue | 27 |
1 files changed, 6 insertions, 21 deletions
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 2018720c..bdf2a6ac 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -15,12 +15,11 @@ </b-col> <b-col md="6"> <b-form class="login-form" novalidate @submit.prevent="login"> - <b-alert class="login-error" :show="authError" variant="danger"> + <alert class="login-error" :show="authError" variant="danger"> <p id="login-error-alert"> - <strong>{{ $t('pageLogin.alert.title') }}</strong> - <span>{{ $t('pageLogin.alert.action') }}</span> + {{ $t('pageLogin.alert.message') }} </p> - </b-alert> + </alert> <div class="login-form__section"> <label for="language">{{ $t('pageLogin.language') }}</label> <b-form-select @@ -83,9 +82,11 @@ import { required } from 'vuelidate/lib/validators'; import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js'; import i18n from '../../i18n'; +import Alert from '../../components/Global/Alert'; export default { name: 'Login', + components: { Alert }, mixins: [VuelidateMixin], data() { return { @@ -173,24 +174,8 @@ export default { margin-bottom: $spacer; } -.login-error { +.alert.login-error { margin-bottom: $spacer * 2; - - p { - margin-bottom: 0; - } - - strong { - display: block; - font-size: 1rem; - font-weight: 600; - margin-bottom: 0; - } - - strong + span { - margin-top: $spacer / 2; - margin-bottom: 0; - } } .login-branding { |