Implemented Login page

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,23 +17,18 @@
         <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>
 </template>
 
 <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>

src/store/api.js

@@ -4,13 +4,15 @@ 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',
   'application/json',
 ];
 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();
     }

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'),
@@ -79,29 +79,22 @@ export const AuthenticationStore = defineStore('authentication', {
       return api
         .post('/logout', { data: [] }, { headers: headers })
         .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 +113,7 @@ export const AuthenticationStore = defineStore('authentication', {
     },
     resetStoreState() {
       this.authError = false;
+      this.unauthError = false;
       this.xsrfCookie = cookies.get('XSRF-TOKEN');
       this.isAuthenticatedCookie = cookies.get('IsAuthenticated');
     },