From dbc91bac5fefeee3bc8789d04877844a31e63aeb Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Mon, 10 Jul 2023 16:48:07 +0300
Subject: [PATCH 1/2] feature: chenge login tab[WTEL-2187]

---
 src/components/auth/wt-stepper.vue | 109 +++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/components/auth/wt-stepper.vue

diff --git a/src/components/auth/wt-stepper.vue b/src/components/auth/wt-stepper.vue
new file mode 100644
index 00000000..72afb13c
--- /dev/null
+++ b/src/components/auth/wt-stepper.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+
+    <ul class="wt-stepper--header">
+      <li class="wt-stepper--header__item" v-for="(step, idx) of props.formData.steps">
+        <wt-chip class="wt-stepper--header__title">{{ step.name }}</wt-chip>
+      </li>
+    </ul>
+
+    <slot name="desc"></slot>
+
+    <slot name="main"></slot>
+
+    <div class="wt-stepper--action">
+      <slot name="primary-action">
+        <wt-button
+          @click="emit('prevStepAction')"
+        >{{$t( props.formData.prevBtnText || 'webitelUI.errorPages.goBack') }}</wt-button>
+      </slot>
+
+      <wt-button
+        @click="emit('nextStepAction')"
+      >{{ $t( props.formData.nextBtnText || 'webitelUI.pagination.next') }}</wt-button>
+    </div>
+
+    <slot name="footer"></slot>
+
+  </div>
+
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+////:color="idx > props.idxActiveStep && 'secondary'"
+const props = defineProps({
+  formData: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits([
+  'prevStepAction',
+  'nextStepAction',
+]);
+
+console.log(props.formData.nextBtnText)
+
+// const primaryBtnText = computed(() => {
+//
+//   // if(props.formData.activeStep.value === props.formData.steps.length && props.formData.prevBtnText) {
+//   //   return props.formData.prevBtnText;
+//   // }
+//   if(props.formData.activeStep === 1) {
+//     return props.formData.prevBtnText;
+//   }
+//   return 'webitelUI.errorPages.goBack';
+// })
+
+// const secondaryBtnText = computed(() => {
+//   if(props.formData.activeStep === 1) {
+//     return props.formData.nextBtnText;
+//   }
+//   return 'webitelUI.pagination.next';
+// })
+
+
+
+
+</script>
+
+<style>
+.wt-stepper--header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.wt-stepper--header__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wt-stepper--header__title {
+  ///width: max-content;
+  z-index: 1000;
+}
+
+.wt-stepper--header__item:not(:last-child):after {
+  content: "";
+  position: relative;
+  top: 50%;
+  left: 0;
+  height: 2px;
+  background-color: #e0e0e0;
+  order: -1;
+  z-index: 1;
+}
+
+.wt-stepper--action {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

From ce286be157be888941f90ccfa7f7517b182d4082 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Mon, 10 Jul 2023 16:48:40 +0300
Subject: [PATCH 2/2] feature: chenge login tab[WTEL-2187]

---
 package-lock.json                  |  89 ++++++++++++--
 package.json                       |   2 +-
 src/components/auth/the-auth.vue   |  17 +--
 src/components/auth/the-login.vue  | 180 ++++++++++++++++++++++-------
 src/components/auth/wt-stepper.vue |  26 -----
 src/locale/en/en.js                |   6 +
 src/store/modules/auth/auth.js     |   8 +-
 7 files changed, 235 insertions(+), 93 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb86ec51..5f7b867d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@egjs/vue3-flicking": "^4.10.6",
         "@vuelidate/core": "^2.0.0",
         "@vuelidate/validators": "^2.0.0",
-        "@webitel/ui-sdk": "^3.1.100",
+        "@webitel/ui-sdk": "^3.2.10",
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "deep-copy": "^1.4.2",
@@ -4452,9 +4452,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "3.1.100",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-3.1.100.tgz",
-      "integrity": "sha512-+rqcofmRkRtlHEkT2TH+2v6n0vEdp/vJ5CR1FI1loGcgxOZGVxnc7FQBKeKPQcPGauxB2V3uIUEOS6iKjO/u6Q==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-3.2.10.tgz",
+      "integrity": "sha512-iUUXC35sa6/5feh4WQ3WvT3FEkYdAhRrwPi8I6eSgBEAkk9tm0E7shnCAwGy/0BeBNzmVRg19WCEUFHacFw4MQ==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@vue/compat": "^3.2.47",
@@ -4471,6 +4471,7 @@
         "jszip-utils": "^0.1.0",
         "node-polyfill-webpack-plugin": "^1.1.4",
         "plyr": "3.6.2",
+        "query-string": "^8.1.0",
         "sortablejs": "^1.15.0",
         "tiny-emitter": "^2.1.0",
         "vue": "^3.2.47",
@@ -4481,6 +4482,52 @@
         "webitel-sdk": "^0.1.184"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/query-string": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz",
+      "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -23816,9 +23863,9 @@
       }
     },
     "@webitel/ui-sdk": {
-      "version": "3.1.100",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-3.1.100.tgz",
-      "integrity": "sha512-+rqcofmRkRtlHEkT2TH+2v6n0vEdp/vJ5CR1FI1loGcgxOZGVxnc7FQBKeKPQcPGauxB2V3uIUEOS6iKjO/u6Q==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-3.2.10.tgz",
+      "integrity": "sha512-iUUXC35sa6/5feh4WQ3WvT3FEkYdAhRrwPi8I6eSgBEAkk9tm0E7shnCAwGy/0BeBNzmVRg19WCEUFHacFw4MQ==",
       "requires": {
         "@floating-ui/vue": "^1.0.1",
         "@vue/compat": "^3.2.47",
@@ -23835,6 +23882,7 @@
         "jszip-utils": "^0.1.0",
         "node-polyfill-webpack-plugin": "^1.1.4",
         "plyr": "3.6.2",
+        "query-string": "^8.1.0",
         "sortablejs": "^1.15.0",
         "tiny-emitter": "^2.1.0",
         "vue": "^3.2.47",
@@ -23843,6 +23891,33 @@
         "vue-observe-visibility": "^1.0.0",
         "vue-router": "^4.1.6",
         "webitel-sdk": "^0.1.184"
+      },
+      "dependencies": {
+        "decode-uri-component": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+          "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="
+        },
+        "filter-obj": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+          "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng=="
+        },
+        "query-string": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz",
+          "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
+          "requires": {
+            "decode-uri-component": "^0.4.1",
+            "filter-obj": "^5.1.0",
+            "split-on-first": "^3.0.0"
+          }
+        },
+        "split-on-first": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+          "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA=="
+        }
       }
     },
     "@xtuc/ieee754": {
diff --git a/package.json b/package.json
index 04ef38f2..0799e7a2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@egjs/vue3-flicking": "^4.10.6",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
-    "@webitel/ui-sdk": "^3.1.100",
+    "@webitel/ui-sdk": "^3.2.10",
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "deep-copy": "^1.4.2",
diff --git a/src/components/auth/the-auth.vue b/src/components/auth/the-auth.vue
index 1e740baa..4abf71b1 100644
--- a/src/components/auth/the-auth.vue
+++ b/src/components/auth/the-auth.vue
@@ -7,18 +7,10 @@
     <section class="auth-form-wrapper">
       <div class="auth-form-wrapper__content">
         <img alt="logo" class="logo" src="../../assets/img/logo-dark.svg">
-        <header class="auth-form-header">
-          <h2 class="auth-form-header__title">{{ computeTitle }}</h2>
-          <p class="auth-form-header__subtitle">{{ $t('auth.detailsSubtitle') }}</p>
-        </header>
         <div class="auth-tabs-wrap">
-          <wt-tabs
-            :current="currentTab"
-            :tabs="tabs"
-            @change="currentTab = $event"
-          ></wt-tabs>
           <component
             :is="currentTab.value"
+            @change="currentTab = $event"
           />
         </div>
       </div>
@@ -99,10 +91,6 @@ export default {
   },
 
   computed: {
-    computeTitle() {
-      return this.currentTab.value === 'login' ?
-        this.$t('auth.login') : this.$t('auth.register');
-    },
   },
   methods: {
     setInnitialTab() {
@@ -147,8 +135,7 @@ $slide-width-md: 640px;
   }
 
   .logo {
-    display: none;
-    width: 60px;
+    width: 88px;
   }
 
   .auth-form-header__title {
diff --git a/src/components/auth/the-login.vue b/src/components/auth/the-login.vue
index 715d06f6..2f864ae3 100644
--- a/src/components/auth/the-login.vue
+++ b/src/components/auth/the-login.vue
@@ -1,47 +1,83 @@
 <template>
-  <form
-    class="auth-form"
-    @submit.prevent="submit"
-  >
-    <wt-input
-      v-model.trim="username"
-      :label="$t('auth.user')"
-      :v="v$.username"
-    >
-      <template v-slot:after-input>
-        <wt-icon-btn
-          icon="generate"
-          :tooltip="$t('auth.oauthProviders.checkProvidersTooltip')"
-          tooltip-position="left"
-          :disabled="v$.username.$error"
-          @click="loadAvailableProviders"
-        ></wt-icon-btn>
-      </template>
-    </wt-input>
-    <wt-input
-      v-model.trim="password"
-      :label="$t('auth.password')"
-      :v="v$.password"
-      type="password"
-      has-show-password
-    ></wt-input>
-    <footer class="auth-form__actions">
-      <wt-button
-        class="auth-form__action--service-provider"
-        v-for="({ ticket, icon }, key) of serviceProviders"
-        :key="key"
-        color="secondary"
-        @click="redirectToServiceProvider({ ticket })"
+  <wt-stepper
+    :form-data="formData"
+    @prev-step-action="primaryAction"
+    @next-step-action="secondaryAction">
+    <template v-slot:header>
+      <h1 class="auth-header">{{$t('auth.loginSubmit')}}</h1>
+    </template>
+
+    <template v-slot:desc>
+      <p>{{description}}</p>
+    </template>
+
+    <template v-slot:main>
+      <form
+        class="auth-form"
+        @submit.prevent="submit"
       >
-        <wt-icon :icon="icon"></wt-icon>
-      </wt-button>
-      <wt-button
-        :disabled="computeDisabled"
-        type="submit"
-      >{{ $t('auth.loginSubmit') }}
-      </wt-button>
-    </footer>
-  </form>
+        <wt-input
+          v-model.trim="domain"
+          :disabled="formData.activeStep !== 1"
+          :label="$t('auth.domain')"
+          :v="v$.domain"
+        ></wt-input>
+        <div v-if="formData.activeStep !== 1">
+          <wt-input
+            v-model.trim="username"
+            :label="$t('auth.user')"
+            :v="v$.username"
+          >
+<!--            <template v-slot:after-input>-->
+<!--              <wt-icon-btn-->
+<!--                icon="generate"-->
+<!--                :tooltip="$t('auth.oauthProviders.checkProvidersTooltip')"-->
+<!--                tooltip-position="left"-->
+<!--                :disabled="v$.username.$error"-->
+<!--                @click="loadAvailableProviders"-->
+<!--              ></wt-icon-btn>-->
+<!--            </template>-->
+          </wt-input>
+          <wt-input
+            v-model.trim="password"
+            :label="$t('auth.password')"
+            :v="v$.password"
+            type="password"
+            has-show-password
+          ></wt-input>
+        </div>
+
+
+      </form>
+    </template>
+
+    <template v-slot:primary-action>
+      <p v-if="formData.activeStep === 1"
+         @click="primaryAction"
+      >{{$t('auth.createAccount')}}</p>
+
+    </template>
+
+    <template v-slot:footer v-if="formData.activeStep === 2">
+      <footer class="auth-form__actions">
+      <p>{{$t('auth.continue')}}</p>
+<!--            <wt-button-->
+<!--              class="auth-form__action&#45;&#45;service-provider"-->
+<!--              v-for="({ ticket, icon }, key) of serviceProviders"-->
+<!--              :key="key"-->
+<!--              color="secondary"-->
+<!--              @click="redirectToServiceProvider({ ticket })"-->
+<!--            >-->
+<!--              <wt-icon :icon="icon"></wt-icon>-->
+<!--            </wt-button>-->
+          </footer>
+
+
+
+    </template>
+
+  </wt-stepper>
+
 </template>
 
 <script>
@@ -50,12 +86,27 @@ import qs from 'querystring';
 import { useVuelidate } from '@vuelidate/core';
 import { email, required } from '@vuelidate/validators';
 import ServiceProvider from '../../enums/ServiceProvider.enum';
+import WtStepper from './wt-stepper.vue';
 
 export default {
   name: 'the-login',
   data: () => ({
     ServiceProvider,
+    formData: {
+      activeStep: 1,
+      steps: [
+        {
+          name: 'Step 1',
+        },
+        {
+          name: 'Step 2',
+        }
+      ],
+    },
   }),
+  components: {
+    WtStepper
+  },
   setup: () => ({
     v$: useVuelidate(),
   }),
@@ -68,6 +119,9 @@ export default {
     password: {
       required,
     },
+    domain: {
+      required,
+    },
   },
 
   mounted() {
@@ -106,9 +160,22 @@ export default {
         this.setProp({ prop: 'password', value });
       },
     },
+    domain: {
+      get() {
+        return this.$store.state.auth.domain;
+      },
+      set(value) {
+        this.setProp({ prop: 'domain', value });
+      },
+    },
     computeDisabled() {
       return this.checkValidations();
     },
+    description() {
+      if(this.formData.activeStep === 1) {
+        return this.$t('auth.enterDomain');
+      } else return this.$t('auth.enterUserName');
+    },
   },
 
   methods: {
@@ -121,7 +188,16 @@ export default {
     submit() {
       const invalid = this.checkValidations();
       if (!invalid) this.login();
+    },
 
+    primaryAction() {
+      if(this.formData.activeStep > 1) return this.formData.activeStep = this.formData.activeStep - 1;
+      if(this.formData.activeStep === 1) this.$emit('change', {value: 'register'});
+    },
+
+    secondaryAction() {
+      this.formData.activeStep = this.formData.activeStep + 1;
+      if(this.formData.activeStep === 2) this.loadAvailableProviders();
     },
 
     redirectToServiceProvider({ ticket }) {
@@ -140,6 +216,16 @@ export default {
       resetState: 'RESET_STATE',
     }),
   },
+  watch: {
+    formData: {
+      handler() {
+        if(this.formData.activeStep === this.formData.steps.length) {
+          this.formData.nextBtnText = 'auth.login';
+        } else this.formData.nextBtnText = '';
+      },
+      deep: true,
+    }
+  },
 };
 </script>
 
@@ -152,4 +238,14 @@ export default {
   line-height: 0;
   border: none;
 }
+
+.auth-header {
+  @extend %typo-heading-3;
+  text-align: center;
+  margin-bottom: var(--spacing-xs);
+}
+
+p {
+  text-align: center;
+}
 </style>
diff --git a/src/components/auth/wt-stepper.vue b/src/components/auth/wt-stepper.vue
index 72afb13c..414b2779 100644
--- a/src/components/auth/wt-stepper.vue
+++ b/src/components/auth/wt-stepper.vue
@@ -31,9 +31,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
 
-////:color="idx > props.idxActiveStep && 'secondary'"
 const props = defineProps({
   formData: {
     type: Object,
@@ -44,30 +42,6 @@ const emit = defineEmits([
   'prevStepAction',
   'nextStepAction',
 ]);
-
-console.log(props.formData.nextBtnText)
-
-// const primaryBtnText = computed(() => {
-//
-//   // if(props.formData.activeStep.value === props.formData.steps.length && props.formData.prevBtnText) {
-//   //   return props.formData.prevBtnText;
-//   // }
-//   if(props.formData.activeStep === 1) {
-//     return props.formData.prevBtnText;
-//   }
-//   return 'webitelUI.errorPages.goBack';
-// })
-
-// const secondaryBtnText = computed(() => {
-//   if(props.formData.activeStep === 1) {
-//     return props.formData.nextBtnText;
-//   }
-//   return 'webitelUI.pagination.next';
-// })
-
-
-
-
 </script>
 
 <style>
diff --git a/src/locale/en/en.js b/src/locale/en/en.js
index f1964ebe..31070a90 100644
--- a/src/locale/en/en.js
+++ b/src/locale/en/en.js
@@ -1,5 +1,6 @@
 export default {
     auth: {
+        system: 'Webitel',
         register: 'Register',
         login: 'Login',
         registerReset: 'Reset password',
@@ -12,6 +13,11 @@ export default {
         registerSubmit: 'Register',
         resetSubmit: 'Reset',
         loginSubmit: 'Log in',
+        enterDomain: 'Enter your Domain name',
+        enterUserName: 'Enter your User name and password',
+        domain: 'Domain',
+        createAccount: 'Create account',
+        continue: 'Or Continue with',
         oauthProviders: {
             checkProvidersTooltip: 'Check service providers for alternative authentication',
         },
diff --git a/src/store/modules/auth/auth.js b/src/store/modules/auth/auth.js
index a510daae..feab3a54 100644
--- a/src/store/modules/auth/auth.js
+++ b/src/store/modules/auth/auth.js
@@ -4,6 +4,7 @@ import ServiceProvider from "../../../enums/ServiceProvider.enum";
 const defaultState = () => ({
     username: '',
     password: '',
+    domain: '',
     certificate: '',
 });
 
@@ -23,6 +24,7 @@ const actions = {
         return AuthAPI.login({
             username: state.username,
             password: state.password,
+            domain: state.domain,
         });
     },
 
@@ -30,12 +32,14 @@ const actions = {
         return AuthAPI.register({
             username: state.username,
             password: state.password,
-            certificate: state.certificate
+            domain: state.domain,
+            certificate: state.certificate,
         });
     },
 
     LOAD_SERVICE_PROVIDERS: async (context) => {
-        const domain = context.state.username.split('@').pop();
+        ///const domain = context.state.username.split('@').pop();
+        const domain = context.state.domain;
         const response = await AuthAPI.loadServiceProviders({ domain });
         const { federation = {} } = response;
         context.commit('SET_SERVICE_PROVIDERS', federation);