From 3f9ce4eaf391733e8769caec8da84302c012b21e Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Wed, 27 Apr 2022 14:59:55 +0300
Subject: restyled login page

---
 src/views/Login/Login.vue | 78 ++++++++++++++++++++++++++++++++++++-----------
 src/views/Login/index.js  |  3 +-
 2 files changed, 62 insertions(+), 19 deletions(-)

(limited to 'src/views/Login')

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') }}
       </p>
     </alert>
-    <b-form-group label-for="language" :label="$t('pageLogin.language')">
+    <!-- <b-form-group label-for="language" :label="$t('pageLogin.language')">
       <b-form-select
         id="language"
         v-model="$i18n.locale"
         :options="languages"
         data-test-id="login-select-language"
       ></b-form-select>
-    </b-form-group>
-    <b-form-group label-for="username" :label="$t('pageLogin.username')">
+    </b-form-group> -->
+    <b-form-group
+      class="text__h1"
+      label-for="auth"
+      :label="$t('pageLogin.auth')"
+    ></b-form-group>
+
+    <b-form-group
+      label-for="auth"
+      class="auth-description"
+      :label="$t('pageLogin.authDescription')"
+    ></b-form-group>
+
+    <b-form-group>
+      <label class="text-login" for="username">{{
+        $t('pageLogin.username')
+      }}</label>
       <b-form-input
         id="username"
         v-model="userInfo.username"
@@ -22,6 +37,7 @@
         type="text"
         autofocus="autofocus"
         data-test-id="login-input-username"
+        class="form-control-with-button username-input"
         @input="$v.userInfo.username.$touch()"
       >
       </b-form-input>
@@ -31,9 +47,12 @@
         </template>
       </b-form-invalid-feedback>
     </b-form-group>
-    <div class="login-form__section mb-3">
-      <label for="password">{{ $t('pageLogin.password') }}</label>
+
+    <b-form-group>
       <input-password-toggle>
+        <label class="text-login" for="password">{{
+          $t('pageLogin.password')
+        }}</label>
         <b-form-input
           id="password"
           v-model="userInfo.password"
@@ -41,19 +60,20 @@
           :state="getValidationState($v.userInfo.password)"
           type="password"
           data-test-id="login-input-password"
-          class="form-control-with-button"
+          class="form-control-with-button password-input"
           @input="$v.userInfo.password.$touch()"
         >
         </b-form-input>
+        <b-form-invalid-feedback id="password-required" role="alert">
+          <template v-if="!$v.userInfo.password.required">
+            {{ $t('global.form.fieldRequired') }}
+          </template>
+        </b-form-invalid-feedback>
       </input-password-toggle>
-      <b-form-invalid-feedback id="password-required" role="alert">
-        <template v-if="!$v.userInfo.password.required">
-          {{ $t('global.form.fieldRequired') }}
-        </template>
-      </b-form-invalid-feedback>
-    </div>
+    </b-form-group>
+
     <b-button
-      class="mt-3"
+      class="login-button"
       type="submit"
       variant="primary"
       data-test-id="login-button-submit"
@@ -82,6 +102,10 @@ export default {
       },
       disableSubmitButton: false,
       languages: [
+        {
+          value: 'ru-RU',
+          text: 'Русский',
+        },
         {
           value: 'en-US',
           text: 'English',
@@ -90,10 +114,6 @@ export default {
           value: 'es',
           text: 'Español',
         },
-        {
-          value: 'ru-RU',
-          text: 'Русский',
-        },
       ],
     };
   },
@@ -132,6 +152,7 @@ export default {
           );
         })
         .then((passwordChangeRequired) => {
+          console.log(passwordChangeRequired);
           if (passwordChangeRequired) {
             this.$router.push('/change-password');
           } else {
@@ -144,3 +165,26 @@ export default {
   },
 };
 </script>
+<style scoped>
+.username-input,
+.password-input {
+  height: 56px;
+  margin: -30px 0 0 0;
+  padding-top: 30px;
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+}
+
+.text-input {
+  margin: 0 0 0 50px;
+  padding: 0 0 0 5px;
+}
+
+.login-button {
+  height: 36px;
+  width: 380px;
+}
+</style>
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