diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/styles/_alerts.scss | 59 | ||||
-rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 | ||||
-rw-r--r-- | src/components/Global/Alert.vue | 33 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 8 | ||||
-rw-r--r-- | src/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/locales/es.json | 3 | ||||
-rw-r--r-- | src/views/Login/Login.vue | 27 |
7 files changed, 105 insertions, 29 deletions
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss new file mode 100644 index 00000000..3f103b19 --- /dev/null +++ b/src/assets/styles/_alerts.scss @@ -0,0 +1,59 @@ +.alert { + display: flex; + padding: $spacer; + border-width: 0 0 0 3px; + color: $gray-800; + margin-bottom: $spacer; + + .close { + font-weight: 300; + opacity: 1; + } + + .alert-icon { + display: inline-flex; + align-items: center; + margin-right: $spacer; + margin-bottom: $spacer; + + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + + .alert-content { + flex: 1 1 auto; + } + + .alert-title { + margin-bottom: $spacer / 2; + } + + .alert-msg { + p + p { + margin-bottom: $spacer; + } + + p:last-of-type { + margin-bottom: 0; + } + } + + &.alert-info { + border-left-color: $info; + background-color: $info-light; + fill: $info; + } + + &.alert-danger { + border-left-color: $danger; + background-color: $danger-light; + fill: $danger; + } + + &.alert-warning { + border-left-color: $warning; + background-color: $warning-light; + fill: $warning; + } + }
\ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 66cebda2..2a8d896a 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -39,6 +39,7 @@ @import "~bootstrap-vue/src/index.scss"; +@import "./alerts"; @import "./buttons"; @import "./form-components"; @import "./modal"; diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue new file mode 100644 index 00000000..bc65b6e9 --- /dev/null +++ b/src/components/Global/Alert.vue @@ -0,0 +1,33 @@ +<template> + <b-alert :show="show" :variant="variant"> + <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <status-icon :status="variant" /> + </div> + <div class="alert-content"> + <div class="alert-msg"><slot /></div> + </div> + </b-alert> +</template> + +<script> +import StatusIcon from '../Global/StatusIcon'; +import { BAlert } from 'bootstrap-vue'; + +export default { + name: 'Alert', + components: { + BAlert: BAlert, + StatusIcon: StatusIcon + }, + props: { + show: { + type: Boolean, + default: true + }, + variant: { + type: String, + default: '' + } + } +}; +</script> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 96074ee6..11143212 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -33,20 +33,20 @@ export default { .status-icon { vertical-align: text-bottom; &.success { - fill: $success; + fill: theme-color('success'); } &.danger { - fill: $danger; + fill: theme-color('danger'); } &.secondary { - fill: $gray-600; + fill: gray('600'); svg { transform: rotate(-45deg); } } &.warning { - fill: $warning; + fill: theme-color('warning'); } } </style> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 1e676ee6..63247da6 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -134,8 +134,7 @@ "password": "Password", "username": "Username", "alert": { - "title": "Invalid username or password", - "action": "Try again after verifying your username and password are correct." + "message": "Invalid username or password" } }, "pageOverview": { diff --git a/src/locales/es.json b/src/locales/es.json index 48ed7748..a3e3ee09 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -16,8 +16,7 @@ "password": "Contraseña", "username": "Nombre de usuario", "alert": { - "title": "Usuario o contraseña invalido.", - "action": "Inténtalo de nuevo." + "message": "Usuario o contraseña invalido" }, "form": { "english": "Inglés", diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index da96844a..c15e5f53 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> <b-form-group label-for="language" :label="$t('pageLogin.language')" @@ -87,9 +86,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 { @@ -177,24 +178,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 { |