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 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 @@ - + + { + 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