Revert "Add alert message component and documentation"
This reverts commit 71650fff20c0ad29eb05d770736386863324b64e.
Reason for revert: Found an issue with Sass loader when compiling docs that needs to be addressed.
Change-Id: Icdd1243665f60849bfb341594452687fcdaeebe2
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
deleted file mode 100644
index 816ad33..0000000
--- a/src/assets/styles/_alerts.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.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 {
- flex: 0 0 20px;
- 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 2a8d896..66cebda 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -39,7 +39,6 @@
@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
deleted file mode 100644
index bc65b6e..0000000
--- a/src/components/Global/Alert.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<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/locales/en-US.json b/src/locales/en-US.json
index 019d546..0bf4051 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -133,7 +133,8 @@
"password": "Password",
"username": "Username",
"alert": {
- "message": "Invalid username or password"
+ "title": "Invalid username or password",
+ "action": "Try again after verifying your username and password are correct."
}
},
"pageOverview": {
diff --git a/src/locales/es.json b/src/locales/es.json
index a3e3ee0..48ed774 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -16,7 +16,8 @@
"password": "Contraseña",
"username": "Nombre de usuario",
"alert": {
- "message": "Usuario o contraseña invalido"
+ "title": "Usuario o contraseña invalido.",
+ "action": "Inténtalo de nuevo."
},
"form": {
"english": "Inglés",
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index bdf2a6a..2018720 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,11 +15,12 @@
</b-col>
<b-col md="6">
<b-form class="login-form" novalidate @submit.prevent="login">
- <alert class="login-error" :show="authError" variant="danger">
+ <b-alert class="login-error" :show="authError" variant="danger">
<p id="login-error-alert">
- {{ $t('pageLogin.alert.message') }}
+ <strong>{{ $t('pageLogin.alert.title') }}</strong>
+ <span>{{ $t('pageLogin.alert.action') }}</span>
</p>
- </alert>
+ </b-alert>
<div class="login-form__section">
<label for="language">{{ $t('pageLogin.language') }}</label>
<b-form-select
@@ -82,11 +83,9 @@
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 {
@@ -174,8 +173,24 @@
margin-bottom: $spacer;
}
-.alert.login-error {
+.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 {