From 3f9ce4eaf391733e8769caec8da84302c012b21e Mon Sep 17 00:00:00 2001
From: Maksim Zakharov
Date: Wed, 27 Apr 2022 14:59:55 +0300
Subject: restyled login page
---
.../images/login/autrorization-left-image.svg | 11 ++
src/assets/images/login/hidden-password-icon.svg | 3 +
src/assets/images/login/vector1.svg | 3 +
src/assets/images/login/vector2.svg | 3 +
src/assets/images/logo-header-sila.svg | 4 +
src/assets/styles/bmc/custom/_base.scss | 47 ++++++--
src/assets/styles/bmc/custom/_buttons.scss | 49 +++++---
src/assets/styles/bmc/custom/_forms.scss | 28 +++--
src/assets/styles/bmc/helpers/_colors.scss | 24 +++-
src/components/AppHeader/AppHeader.vue | 28 ++++-
src/components/Global/InputPasswordToggle.vue | 26 ++++-
src/i18n.js | 6 +-
src/layouts/LoginLayout.vue | 123 ++++++++-------------
src/locales/ru-RU.json | 8 +-
.../modules/Authentication/AuthenticanStore.js | 27 +++++
src/store/modules/GlobalStore.js | 2 +-
src/views/Login/Login.vue | 78 ++++++++++---
src/views/Login/index.js | 3 +-
18 files changed, 330 insertions(+), 143 deletions(-)
create mode 100644 src/assets/images/login/autrorization-left-image.svg
create mode 100644 src/assets/images/login/hidden-password-icon.svg
create mode 100644 src/assets/images/login/vector1.svg
create mode 100644 src/assets/images/login/vector2.svg
create mode 100644 src/assets/images/logo-header-sila.svg
(limited to 'src')
diff --git a/src/assets/images/login/autrorization-left-image.svg b/src/assets/images/login/autrorization-left-image.svg
new file mode 100644
index 00000000..364afa5e
--- /dev/null
+++ b/src/assets/images/login/autrorization-left-image.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/images/login/hidden-password-icon.svg b/src/assets/images/login/hidden-password-icon.svg
new file mode 100644
index 00000000..08347d6b
--- /dev/null
+++ b/src/assets/images/login/hidden-password-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/login/vector1.svg b/src/assets/images/login/vector1.svg
new file mode 100644
index 00000000..b91b4724
--- /dev/null
+++ b/src/assets/images/login/vector1.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/login/vector2.svg b/src/assets/images/login/vector2.svg
new file mode 100644
index 00000000..b59c9791
--- /dev/null
+++ b/src/assets/images/login/vector2.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/logo-header-sila.svg b/src/assets/images/logo-header-sila.svg
new file mode 100644
index 00000000..dee454ae
--- /dev/null
+++ b/src/assets/images/logo-header-sila.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index c11e046c..4e33e8ce 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,11 +1,13 @@
-dt,
-legend,
-label {
- color: gray("800");
- font-size: 14px;
- font-weight: 400;
- line-height: 1.4285;
-}
+// dt,
+// legend,
+// label {
+// color: gray("800");
+// font-size: 14px;
+// font-weight: 400;
+// line-height: 1.4285;
+// }
+
+
h1,
.h1 {
@@ -48,3 +50,32 @@ h6,
font-weight: 500;
line-height: 1.2857;
}
+
+.text__h1 {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 24px;
+ line-height: 28px;
+ color: $text-h1-color;
+ margin: 0;
+}
+
+.text-login {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 16px;
+ color: $login-page-description-color;
+ margin: 0 0 0 15px;
+}
+
+.auth-description {
+ font-family: Inter;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 12px;
+ line-height: 16px;
+ color: $login-page-description-color;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b8169..210aef90 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,13 +1,13 @@
.btn {
- padding-top: $spacer / 2;
- padding-right: $spacer;
- padding-bottom: $spacer / 2;
- padding-left: $spacer;
+ // padding-top: $spacer / 2;
+ // padding-right: $spacer;
+ // padding-bottom: $spacer / 2;
+ // padding-left: $spacer;
display: inline-flex;
align-items: center;
justify-content: space-around;
svg {
- margin-right: $spacer / 4;
+ // margin-right: $spacer / 4;
}
&:disabled {
color: gray("600");
@@ -21,11 +21,32 @@
}
.btn-primary {
- fill: currentColor;
- &:focus,
- &:not(:disabled):not(.disabled):active:focus {
- border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+ background-color: $button-colour;
+ border-radius: 8px;
+ border: none;
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ &:hover {
+ background-color: $button-colour-hover;
+ }
+ &:not(:disabled):not(.disabled):active:focus,
+ &:focus-visible {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour-click;
+ }
+ &:focus {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour;
+ }
+ &:active {
+ border: none;
+ box-shadow: none;
+ background-color: $button-colour;
}
}
@@ -34,7 +55,7 @@
&:focus,
&:not(:disabled):not(.disabled):active:focus {
border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+ box-shadow: inset 0 0 0 2px theme-color('secondary');
}
}
@@ -51,9 +72,9 @@
background-color: gray("300");
}
&:focus {
- box-shadow: inset 0 0 0 2px theme-color("primary");
- color: theme-color("primary");
- outline: none;
+ // box-shadow: inset 0 0 0 2px theme-color("primary");
+ // color: theme-color("primary");
+ // outline: none;
}
&:disabled {
box-shadow: $btn-focus-box-shadow;
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 428a40c2..8524f2ff 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -21,7 +21,7 @@
.custom-select,
.form-control,
.input-group-text {
- border-color: gray("500") !important;
+ // border-color: gray("500") !important;
background-color: gray("100");
}
@@ -31,17 +31,14 @@
border: 1px solid $primary!important;
}
&:focus {
- color: theme-color("dark");
- background-color: gray("100");
- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
+ // color: theme-color("dark");
+ // background-color: gray("100");
+ // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
}
&:disabled {
background-color: gray("400");
color: gray("600");
}
- &::placeholder {
- color: gray("600");
- }
&.is-invalid,
&:invalid {
border: 1px solid theme-color("danger") !important;
@@ -57,17 +54,26 @@
// Inverted form colors
.form-background {
- background-color: gray("100");
+ background-color: none;
.custom-select,
.form-control {
- background-color: $white;
+ border-radius: 8px;
+ border: none;
+ background-color: $input-background;
+ &:hover {
+ // opacity: 0.1;
+ background-color: $input-background-hover;
+ }
&:focus {
- background-color: $white;
+ border: 1px solid gray("400");
}
&:disabled {
background-color: gray("400");
color: gray("600");
}
+ &.is-valid {
+ border: 1px solid gray("400");
+ }
}
}
@@ -95,7 +101,7 @@
}
.custom-control-input:focus ~ .custom-control-label::before{
- box-shadow: 0 0 0 2px theme-color("primary");
+ // box-shadow: 0 0 0 2px theme-color("primary");
}
.custom-control-label::after {
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index cffe39dc..4e9dd738 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -1,11 +1,12 @@
// Sass Color Variables
$black: #000;
-$white: #fff;
+$white: #FFFFFF;
$blue-500: #2d60e5;
$green-500: #0a7d06;
$red-500: #da1416;
$yellow-500: #efc100;
+$dark-blue: #1A3E5B;
$gray-100: #f4f4f4;
$gray-200: #e6e6e6;
@@ -17,6 +18,7 @@ $gray-700: #666666;
$gray-800: #3f3f3f;
$gray-900: #161616;
+
// Sass Base Color Variables
$blue: $blue-500;
$green: $green-500;
@@ -26,13 +28,25 @@ $yellow: $yellow-500;
// Sass Theme Color Variables
// Can be used as variants
$danger: $red;
-$dark: $gray-900;
+$dark: $dark-blue;
$info: $blue;
-$light: $gray-100;
-$primary: $blue;
+$light: $white;
+$primary: $dark-blue;
$secondary: $gray-800;
$success: $green;
$warning: $yellow;
$loading-color: $primary;
-$navbar-color: $dark;
+$navbar-color: $primary;
+
+$login-page-description-color: rgba(12, 28, 41, 0.6);
+$text-h1-color: #0C1C29;
+
+$input-background: rgba(26, 62, 91, 0.05);
+$input-background-hover: rgba(20, 39, 53, 0.103);
+
+$button-colour: #E11717;
+$button-colour-hover: #cc1414;
+$button-colour-active: #df2323;
+$button-colour-click: rgb(114, 1, 1);
+
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 84e4588f..fec889fd 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -37,7 +37,7 @@
>
@@ -101,6 +101,30 @@
+
@@ -295,7 +319,7 @@ export default {
.nav-link:focus,
.btn:focus {
- @include focus-box-shadow($gray-800);
+ @include focus-box-shadow($dark);
}
}
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a6..be4fdc6c 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -16,8 +16,8 @@
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 00b540ad..ede1a164 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -596,10 +596,12 @@
}
},
"pageLogin": {
- "language": "Язык",
- "logIn": "Войти",
- "password": "Пароль",
+ "auth": "Авторизация",
+ "authDescription": "Введите данные для входа в систему",
"username": "Имя пользователя",
+ "password": "Пароль",
+ "logIn": "Войти",
+ "language": "Язык",
"alert": {
"message": "Неверное имя пользователя или пароль"
}
diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 07d5ee8b..3588207a 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -6,8 +6,14 @@ const AuthenticationStore = {
namespaced: true,
state: {
authError: false,
+ // для работы локально //
+ // xsrfCookie: true,
+ // isAuthenticatedCookie: true,
+ //
+ // для сборки образа //
xsrfCookie: Cookies.get('XSRF-TOKEN'),
isAuthenticatedCookie: Cookies.get('IsAuthenticated'),
+ ////
},
getters: {
authError: (state) => state.authError,
@@ -19,11 +25,15 @@ const AuthenticationStore = {
token: (state) => state.xsrfCookie,
},
mutations: {
+ //Расскомментить этот
+ // authSuccess() {
+ //Закомментить этот код
authSuccess(state) {
state.authError = false;
state.xsrfCookie = Cookies.get('XSRF-TOKEN');
},
authError(state, authError = true) {
+ // authError() {
state.authError = authError;
},
logout(state) {
@@ -35,6 +45,12 @@ const AuthenticationStore = {
},
},
actions: {
+ // для работы локально //
+ // login({ commit }) {
+ // commit('authError', false);
+ // commit('authSuccess');
+ // },
+ // для сборки образа //
login({ commit }, { username, password }) {
commit('authError', false);
return api
@@ -45,6 +61,7 @@ const AuthenticationStore = {
throw new Error(error);
});
},
+ /////
logout({ commit }) {
api
.post('/logout', { data: [] })
@@ -52,17 +69,27 @@ const AuthenticationStore = {
.then(() => router.go('/login'))
.catch((error) => console.log(error));
},
+ // для работы локально //
+ // checkPasswordChangeRequired() {
+ // return false;
+ // },
+ // для сборки образа //
checkPasswordChangeRequired(_, username) {
api
.get(`/redfish/v1/AccountService/Accounts/${username}`)
.then(({ data: { PasswordChangeRequired } }) => PasswordChangeRequired)
.catch((error) => console.log(error));
},
+ ///////
+ // для работы локально //
+ // resetStoreState() {},
+ // для сборки образа //
resetStoreState({ state }) {
state.authError = false;
state.xsrfCookie = Cookies.get('XSRF-TOKEN');
state.isAuthenticatedCookie = Cookies.get('IsAuthenticated');
},
+ //////
},
};
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 95d7a083..17355613 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -34,7 +34,7 @@ const GlobalStore = {
modelType: null,
serialNumber: null,
serverStatus: 'unreachable',
- languagePreference: localStorage.getItem('storedLanguage') || 'en-US',
+ languagePreference: localStorage.getItem('storedLanguage') || 'ru-RU',
isUtcDisplay: localStorage.getItem('storedUtcDisplay')
? JSON.parse(localStorage.getItem('storedUtcDisplay'))
: true,
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 8d96573a..872950ea 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -5,15 +5,30 @@
{{ $t('pageLogin.alert.message') }}
-
+
+
+
+
+
+
+
@@ -31,9 +47,12 @@
-
-
+
+
+
+
+
+ {{ $t('global.form.fieldRequired') }}
+
+
-
-
- {{ $t('global.form.fieldRequired') }}
-
-
-
+
+
{
+ console.log(passwordChangeRequired);
if (passwordChangeRequired) {
this.$router.push('/change-password');
} else {
@@ -144,3 +165,26 @@ export default {
},
};
+
diff --git a/src/views/Login/index.js b/src/views/Login/index.js
index 8fe0250d..3eac6cc0 100644
--- a/src/views/Login/index.js
+++ b/src/views/Login/index.js
@@ -1,2 +1 @@
-import Login from './Login.vue';
-export default Login;
+export { default } from './Login.vue';
--
cgit v1.2.3