From 0beea4ca5ec8324aaf0e531bee883d7f4fb6b663 Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Fri, 11 Apr 2025 13:42:01 +0530
Subject: [PATCH 1/2] Implemented Login page

- Implemented Login page in Vue 3
- JIRA: https://jsw.ibm.com/browse/PFEBMC-2359

Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com>
---
 src/layouts/LoginLayout.vue                   |  21 +-
 src/store/api.js                              |   4 +-
 .../Authentication/AuthenticationStore.js     |  69 ++--
 src/views/Login/Login.vue                     | 349 +++++++++---------
 4 files changed, 208 insertions(+), 235 deletions(-)

diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index 8c3c69bb54..a4c7eeb784 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -5,11 +5,7 @@
       <div class="login-main">
         <div>
           <div class="login-brand mb-5">
-            <img
-              :alt="altLogo"
-              src="@/assets/images/login-company-logo.svg"
-              width="90"
-            />
+            <img width="90px" src="@/assets/images/login-company-logo.svg" :alt="altLogo" />
           </div>
           <h1 v-if="customizableGuiName" class="h3 mb-5">
             {{ customizableGuiName }}
@@ -21,14 +17,6 @@
         <div class="login-aside__logo-brand">
           <!-- Add Secondary brand logo if needed -->
         </div>
-        <br />
-        <div class="login-aside__logo-bmc">
-          <img
-            alt="Built on OpenBMC"
-            src="@/assets/images/built-on-openbmc-logo.svg"
-            width="60"
-          />
-        </div>
       </div>
     </div>
   </main>
@@ -36,8 +24,11 @@
 
 <script setup>
 import { ref } from 'vue';
-const altLogo = ref('intel');
-const customizableGuiName = ref('BMC System Management');
+// Need to uncomment the below when env based configuration is implemented
+// const  altLogo = ref(process.env.VUE_APP_COMPANY_NAME || 'OpenBMC');
+// const customizableGuiName = ref(process.env.VUE_APP_GUI_NAME || '');
+const  altLogo = ref('OpenBMC');
+const customizableGuiName = ref('Advanced System Management Interface (ASMI)');
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/store/api.js b/src/store/api.js
index b1850ef73e..07c0036747 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -4,6 +4,7 @@ import Axios from 'axios';
 //Exact match alias set to support
 //dotenv customizations.
 import { GlobalStore, AuthenticationStore } from '@/store';
+import { useRouter } from 'vue-router';
 
 Axios.defaults.headers.common['Accept'] = [
   'application/octet-stream',
@@ -11,6 +12,7 @@ Axios.defaults.headers.common['Accept'] = [
 ];
 Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
+const router = useRouter();
 const api = Axios.create({
   withCredentials: true,
 });
@@ -22,7 +24,7 @@ api.interceptors.response.use(undefined, (error) => {
   // TODO: Provide user with a notification and way to keep system active
   if (response.status == 401) {
     if (response.config.url != 'api/login') {
-      window.location = '/login';
+      router.replace('/login');
       // Commit logout to remove XSRF-TOKEN cookie
       authenticationStore.logoutRemove();
     }
diff --git a/src/store/modules/Authentication/AuthenticationStore.js b/src/store/modules/Authentication/AuthenticationStore.js
index 2b87a7153c..f060835f45 100644
--- a/src/store/modules/Authentication/AuthenticationStore.js
+++ b/src/store/modules/Authentication/AuthenticationStore.js
@@ -1,42 +1,40 @@
-//TODO: Work Requird -->
 import { defineStore } from 'pinia';
 import api from '@/store/api';
 import { useCookies } from 'vue3-cookies';
-// import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import Cookies from 'js-cookie';
 const { cookies } = useCookies();
-// const router = useRouter();
+const router = useRouter();
 
 export const AuthenticationStore = defineStore('authentication', {
   state: () => ({
     loginPageDetails: {},
-    consoleWindow: null,
-    authError: null,
+    authError: false,
+    unauthError: false,
     xsrfCookie: cookies.get('XSRF-TOKEN'),
     isAuthenticatedCookie: cookies.get('IsAuthenticated'),
-    bmcTime: '',
   }),
   getters: {
     loginPageDetailsGetter: (state) => state.loginPageDetails,
-    getConsoleWindow: (state) => state.consoleWindow,
-    getAuthError: (state) => state.authError,
+    authErrorGetter: (state) => state.authError,
+    unauthErrorGetter: (state) => state.unauthError,
     isLoggedIn: (state) => {
       //Change null to undefined once the cookies value able to get
-      return state.xsrfCookie !== null || state.isAuthenticatedCookie == 'true';
+      return (
+        state.xsrfCookie !== null || state.isAuthenticatedCookie == 'true'
+      );
     },
     token: (state) => state.xsrfCookie,
   },
   actions: {
     authSuccess() {
       this.authError = false;
+      this.unauthError = false;
       this.xsrfCookie = Cookies.get('XSRF-TOKEN');
     },
     setLoginPageDetails(loginPageDetails) {
       this.loginPageDetails = loginPageDetails;
     },
-    setauthError(authError = true) {
-      this.authError = authError;
-    },
     logoutRemove() {
       cookies.remove('XSRF-TOKEN');
       cookies.remove('IsAuthenticated');
@@ -45,24 +43,26 @@ export const AuthenticationStore = defineStore('authentication', {
       this.xsrfCookie = null;
       this.isAuthenticatedCookie = undefined;
     },
-    setConsoleWindow(window) {
-      this.consoleWindow = window;
-    },
-    login(username, password) {
-      this.$state.authError = false;
+    login({ username, password }) {
+      this.authError = false;
+      this.unauthError = false;
       return api
-        .post('/login', {
-          data: [username, password],
-        })
-        .then((response) => {
-          this.authSuccess();
-          this.$state.authError = false;
-        })
+        .post('/login', { data: [username, password] })
+        .then(() => this.authSuccess())
         .catch((error) => {
-          this.$state.authError = true;
+          this.authError = true;
           throw new Error(error);
         });
     },
+    getUserInfo(username) {
+      return api
+        .get(`/redfish/v1/AccountService/Accounts/${username}`)
+        .then(({ data }) => data)
+        .catch((error) => console.log(error));
+    },
+    unauthlogin() {
+      this.unauthError = true;
+    },
     logout() {
       const headers = {
         'X-Xsrf-Token': cookies.get('X-XSRF-TOKEN'),
@@ -81,27 +81,21 @@ export const AuthenticationStore = defineStore('authentication', {
         .then(() => {
           this.setConsoleWindow(false);
           this.logoutRemove();
-          // router.push('/login');
         })
         .catch((error) => {
           console.log(error);
           this.logoutRemove();
         });
     },
-    getUserInfo(username) {
+    async checkPasswordChangeRequired(username) {
       return api
         .get(`/redfish/v1/AccountService/Accounts/${username}`)
-        .then(({ data }) => data)
-        .catch((error) => console.log(error));
-    },
-    async getBmcTime() {
-      return await api
-        .get('/redfish/v1/Managers/bmc')
-        .then((response) => {
-          this.$state.bmcTime = response.data.DateTime;
-          const cookie = Cookies.get('XSRF-TOKEN');
+        .then(({ data: { PasswordChangeRequired } }) => {
+          return PasswordChangeRequired;
         })
-        .catch((error) => console.log(error));
+        .catch((error) => {
+          console.log(error);
+        });
     },
     async dateAndTime() {
       return api
@@ -120,6 +114,7 @@ export const AuthenticationStore = defineStore('authentication', {
     },
     resetStoreState() {
       this.authError = false;
+      this.unauthError = false;
       this.xsrfCookie = cookies.get('XSRF-TOKEN');
       this.isAuthenticatedCookie = cookies.get('IsAuthenticated');
     },
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 11a3014d32..1e02325b74 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,106 +1,128 @@
-<!-- TODO: Work Requird -->
 <template>
-  <BForm class="login-form" novalidate @submit.prevent="login">
-    <BFormGroup label-for="language" :label="t('pageLogin.language')">
-      <BFormSelect
-        id="language"
-        v-model="$i18n.locale"
-        :options="languages"
-        data-test-id="login-select-language"
-      ></BFormSelect>
-    </BFormGroup>
-    <BFormGroup label-for="username" :label="t('pageLogin.username')">
-      <BFormInput
-        id="username"
-        v-model="userInfo.username"
-        aria-describedby="login-error-alert username-required"
-        type="text"
-        autofocus="autofocus"
-        data-test-id="login-input-username"
-        :state="getValidationState(v$.username)"
-      >
-      </BFormInput>
-      <BFormInvalidFeedback id="username-required" role="alert">
-        <template v-if="v$.username.required">
-          {{ t('global.form.fieldRequired') }}
-        </template>
-      </BFormInvalidFeedback>
-    </BFormGroup>
-    <BFormGroup label-for="password" :label="t('pageLogin.password')">
-      <BFormInput
-        id="password"
-        v-model="userInfo.password"
-        aria-describedby="login-error-alert password-required"
-        type="password"
-        data-test-id="login-input-password"
-        class="form-control-with-button"
-        :state="getValidationState(v$.password)"
+  <div class="login-form">
+    <BForm
+      class="mb-4 pb-5 section-divider"
+      novalidate
+      @submit.prevent="login()"
+    >
+      <alert class="login-error mb-4" :show="authError" variant="danger">
+        <p id="login-error-alert">
+          {{ t('pageLogin.alert.message') }}
+        </p>
+      </alert>
+      <alert class="login-error mb-4" :show="unauthError" variant="danger">
+        <p id="unauth-login-error-alert">
+          {{ t('pageLogin.alert.unauthorizedMessage') }}
+        </p>
+      </alert>
+      <BFormGroup label-for="language" :label="t('pageLogin.language')">
+        <BFormSelect
+          id="language"
+          v-model="$i18n.locale"
+          :options="languages"
+          data-test-id="login-select-language"
+        ></BFormSelect>
+      </BFormGroup>
+      <BFormGroup label-for="username" :label="t('pageLogin.username')">
+        <BFormInput
+          id="username"
+          v-model="userInfo.username"
+          aria-describedby="login-error-alert username-required"
+          :state="getValidationState(v$.username)"
+          type="text"
+          autofocus="autofocus"
+          data-test-id="login-input-username"
+          @input="v$.username.$touch()"
+        >
+        </BFormInput>
+        <BFormInvalidFeedback id="username-required" role="alert">
+          <template v-if="v$.username.required">
+            {{ t('global.form.fieldRequired') }}
+          </template>
+        </BFormInvalidFeedback>
+      </BFormGroup>
+      <div class="login-form__section mb-3">
+        <label for="password">{{ t('pageLogin.password') }}</label>
+        <input-password-toggle>
+          <BFormInput
+            id="password"
+            v-model="userInfo.password"
+            autocomplete="off"
+            aria-describedby="login-error-alert password-required"
+            :state="getValidationState(v$.password)"
+            type="password"
+            data-test-id="login-input-password"
+            class="form-control-with-button"
+            @input="v$.password.$touch()"
+          >
+          </BFormInput>
+        <BFormInvalidFeedback id="password-required" role="alert">
+          <template v-if="v$.password.required">
+            {{ t('global.form.fieldRequired') }}
+          </template>
+        </BFormInvalidFeedback>
+        </input-password-toggle>
+      </div>
+      <BButton
+        class="mt-4 w-100"
+        type="submit"
+        variant="primary"
+        data-test-id="login-button-submit"
+        :disabled="disableSubmitButton"
+        >{{ t('pageLogin.logIn') }}</BButton
       >
-      </BFormInput>
-      <BFormInvalidFeedback id="password-required" role="alert">
-        <template v-if="v$.password.required">
-          {{ t('global.form.fieldRequired') }}
-        </template>
-      </BFormInvalidFeedback>
-    </BFormGroup>
+    </BForm>
+    <!-- Service login -->
+    <BRow class="mt-3">
+      <BCol>
+        <dl>
+          <dt>{{ t('pageLogin.dateAndTime') }}</dt>
+          <dd v-if="loginPageDetails.dateTime">
+          {{ $filters.formatDate(loginPageDetails.dateTime) }}
+          {{ $filters.formatTime(loginPageDetails.dateTime)}}
+          </dd>
+          <dd v-else>--</dd>
+        </dl>
+        <dl>
+          <dt>{{ t('pageLogin.serialNumber') }}</dt>
+          <dd>{{ dataFormatter(loginPageDetails.serial) }}</dd>
+        </dl>
+        <dl>
+          <dt>{{ t('pageLogin.model') }}</dt>
+          <dd>{{ dataFormatter(loginPageDetails.model) }}</dd>
+        </dl>
+      </BCol>
+    </BRow>
+    <!-- Uncomment the below line once env based cofiguration is done -->
+    <!-- v-if="acfUploadButton && loginPageDetails.acfWindowActive" -->
     <BButton
-      class="mt-3 btn-primary"
-      type="submit"
-      variant="primary"
-      data-test-id="login-button-submit"
-      :disabled="disableSubmitButton"
+      v-if="loginPageDetails.acfWindowActive"
+      class="mt-3 p-0 block"
+      variant="link"
+      @click="initModalUploadCertificate"
     >
-      {{ $t('pageLogin.logIn') }}
+      <icon-upload />
+      {{ t('pageLogin.uploadServiceLoginCertificate') }}
     </BButton>
-  </BForm>
-  <!-- Service login -->
-  <b-row class="mt-3">
-    <b-col>
-      <dl>
-        <dt>{{ $t('pageLogin.dateAndTime') }}</dt>
-        <dd v-if="loginPageDetails.dateTime">
-          {{ $filters.formatDate(loginPageDetails.dateTime) }}
-          {{ $filters.formatTime(loginPageDetails.dateTime)}}
-        </dd>
-        <dd v-else>--</dd>
-      </dl>
-      <dl>
-        <dt>{{ $t('pageLogin.serialNumber') }}</dt>
-        <dd>{{ dataFormatter(loginPageDetails.serial) }}</dd>
-      </dl>
-      <dl>
-        <dt>{{ $t('pageLogin.model') }}</dt>
-        <dd>{{ dataFormatter(loginPageDetails.model) }}</dd>
-      </dl>
-    </b-col>
-  </b-row>
-  <b-button
-    v-if="loginPageDetails.acfWindowActive"
-    class="mt-3 p-0 block"
-    variant="link"
-    @click="initModalUploadCertificate"
-  >
-    <icon-upload />
-    {{ $t('pageLogin.uploadServiceLoginCertificate') }}
-  </b-button>
 
-  <!-- Modals -->
-  <modal-upload-certificate @ok="onModalOk" />
+    <!-- Modals -->
+    <modal-upload-certificate @ok="onModalOk" />
+  </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { AuthenticationStore, CertificatesStore } from '@/store';
+import { AuthenticationStore, CertificatesStore, GlobalStore } from '@/store';
 import i18n from '@/i18n';
 import { useRouter } from 'vue-router';
 import eventBus from '@/eventBus';
 import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import Alert from '@/components/Global/Alert.vue';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
 import IconUpload from '@carbon/icons-vue/es/upload/20';
-// import GlobalStore from '../../store/modules/GlobalStore';
-import { GlobalStore } from '@/store';
 import useDataFormatterGlobal from '../../components/Composables/useDataFormatterGlobal';
 import useToast from '@/components/Composables/useToastComposable';
 import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
@@ -109,7 +131,7 @@ import ModalUploadCertificate from './ModalUploadCertificate.vue';
 const router = useRouter();
 const globalStore = GlobalStore();
 const { getValidationState } = useVuelidateComposable();
-const Authentication = AuthenticationStore();
+const authenticationStore = AuthenticationStore();
 const certificatesStore = CertificatesStore();
 const { dataFormatter } = useDataFormatterGlobal();
 const { successToast, errorToast } = useToast();
@@ -122,77 +144,76 @@ const acfUploadButton = ref(
 const v$ = useVuelidate(rules, userInfo);
 const isBusy = ref(true);
 const { startLoader, endLoader } = useLoadingBar();
+const disableSubmitButton = ref(false);
 const languages = ref([
-  {
-    value: 'en-US',
-    text: 'English',
-  },
-  {
-    value: 'es',
-    text: 'Español',
-  },
-  {
-    value: 'ru-RU',
-    text: 'Русский',
-  },
-]);
+        {
+          value: 'en-US',
+          text: 'English',
+        },
+      ]);
 
-const loginPageDetails = computed(() => {
-  return Authentication.loginPageDetailsGetter;
-});
+    const authError = computed(() => {
+      return authenticationStore.authErrorGetter;
+    });
+    const unauthError = computed(() => {
+      return authenticationStore.unauthErrorGetter;
+    });
+    const loginPageDetails = computed(() => {
+      return authenticationStore.loginPageDetailsGetter;
+    });
 
-onBeforeMount(() => {
-  startLoader();
-  Authentication.dateAndTime().finally(() => {
-    endLoader();
-    isBusy.value = false;
+  onBeforeMount(() => {
+    startLoader();
+    authenticationStore.dateAndTime().finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
   });
-});
 
-const login = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-  Authentication.login(userInfo.username, userInfo.password)
-    .then(() => {
-      localStorage.setItem('storedLanguage', i18n.locale);
-      localStorage.setItem('storedUsername', userInfo.username);
-      globalStore.username = userInfo.username;
-      globalStore.languagePreference = i18n.locale;
-      // router.push('/');
-      return Authentication.getUserInfo(userInfo.username);
-    })
-    .then(({ PasswordChangeRequired, RoleId }) => {
-      if (PasswordChangeRequired) {
-        router.push('/change-password');
-      } else {
-        Promise.all([
-          globalStore.getCurrentUser(userInfo.username),
-          globalStore.getSystemInfo(),
-        ])
-          .then(() => {
-            router.push('/');
-          })
-          .catch(() => {
+    const login = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+      disableSubmitButton.value = true;
+      const username = userInfo.username;
+      const password = userInfo.password;
+      authenticationStore.login({username, password})
+        .then(() => {
+          localStorage.setItem('storedLanguage', i18n.locale);
+          localStorage.setItem('storedUsername', username);
+          globalStore.username = username;
+          globalStore.languagePreference = i18n.locale;
+          return authenticationStore.checkPasswordChangeRequired(username);
+        })
+        .then((passwordChangeRequired) => {
+          if (passwordChangeRequired) {
+            router.push('/change-password');
+          } else {
             Promise.all([
-              Authentication.unauthlogin(),
-              Authentication.logout(),
-            ]);
-          });
-      }
-      if (RoleId) {
-        globalStore.userPrivilege = RoleId;
-      }
-    })
-    .catch((error) => console.log(error));
-};
-function initModalUploadCertificate() {
+              globalStore.getCurrentUser(userInfo.username),
+              globalStore.getSystemInfo(),
+            ])
+              .then(() => {
+                router.push('/');
+              })
+              .catch(() => {
+                Promise.all([
+                  authenticationStore.unauthlogin(),
+                  authenticationStore.logout(),
+                ]);
+              });
+          }
+        })
+        .catch((error) => console.log(error))
+        .finally(() => (disableSubmitButton.value = false));
+    }
+const initModalUploadCertificate = () => {
   eventBus.emit('upload-login-certificate');
 }
-function onModalOk({ file }) {
+const onModalOk = ({ file }) => {
   addNewCertificate(file);
 }
 
-function addNewCertificate(file) {
+const addNewCertificate = (file) => {
   const type = 'ServiceLogin Certificate';
   certificatesStore
     .addNewACFCertificateOnLoginPage({
@@ -203,39 +224,3 @@ function addNewCertificate(file) {
     .catch(({ message }) => errorToast(message));
 }
 </script>
-<style lang="scss" scoped>
-.login-form {
-  @include media-breakpoint-up('md') {
-    max-width: 360px;
-  }
-}
-
-.form-label {
-  margin-top: 2rem;
-}
-.btn-primary {
-  color: #ffffff;
-  background-color: #0068b5;
-  border-color: #0068b5;
-  border-radius: 0;
-  padding-top: 10px;
-  padding-right: $spacer;
-  padding-bottom: 10px;
-  padding-left: $spacer;
-  &:hover {
-    color: #ffffff;
-    background-color: #005ca1;
-    border-color: #005ca1;
-  }
-  &:active {
-    color: #ffffff;
-    background-color: #005ca1;
-    border-color: #005ca1;
-  }
-  &:focus {
-    color: #ffffff;
-    background-color: #005ca1;
-    border-color: #005ca1;
-  }
-}
-</style>

From 974d9cb2aae776797f484ca076192ac758d7fe31 Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Fri, 11 Apr 2025 16:12:23 +0530
Subject: [PATCH 2/2] Implemented password hide and show feature

- Implemented password hide and show feature in vue3.
- Removed unwanted code
---
 src/store/modules/Authentication/AuthenticationStore.js | 1 -
 src/views/Login/Login.vue                               | 9 ++++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/Authentication/AuthenticationStore.js b/src/store/modules/Authentication/AuthenticationStore.js
index f060835f45..71a5980dee 100644
--- a/src/store/modules/Authentication/AuthenticationStore.js
+++ b/src/store/modules/Authentication/AuthenticationStore.js
@@ -79,7 +79,6 @@ export const AuthenticationStore = defineStore('authentication', {
       return api
         .post('/logout', { data: [] }, { headers: headers })
         .then(() => {
-          this.setConsoleWindow(false);
           this.logoutRemove();
         })
         .catch((error) => {
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 1e02325b74..5cacd7b4cd 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -43,14 +43,14 @@
       </BFormGroup>
       <div class="login-form__section mb-3">
         <label for="password">{{ t('pageLogin.password') }}</label>
-        <input-password-toggle>
+        <input-password-toggle @updatePassView="updatePasswordType">
           <BFormInput
             id="password"
             v-model="userInfo.password"
             autocomplete="off"
             aria-describedby="login-error-alert password-required"
             :state="getValidationState(v$.password)"
-            type="password"
+            :type="passwordType"
             data-test-id="login-input-password"
             class="form-control-with-button"
             @input="v$.password.$touch()"
@@ -128,6 +128,7 @@ import useToast from '@/components/Composables/useToastComposable';
 import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
 import ModalUploadCertificate from './ModalUploadCertificate.vue';
 
+const passwordType = ref('password');
 const router = useRouter();
 const globalStore = GlobalStore();
 const { getValidationState } = useVuelidateComposable();
@@ -212,7 +213,9 @@ const initModalUploadCertificate = () => {
 const onModalOk = ({ file }) => {
   addNewCertificate(file);
 }
-
+const updatePasswordType = (type) => {
+  passwordType.value = type;
+}
 const addNewCertificate = (file) => {
   const type = 'ServiceLogin Certificate';
   certificatesStore