Merge pull request #102 from LCOGT/update/use-alerts-for-login-failure

replaced error div with the alerts store message
LCOGT · Sep 6, 2024 · 4d4e3a8 · 4d4e3a8
2 parents 31f9eb8 + c6aaf86
commit 4d4e3a8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -38,9 +38,9 @@ watch(() => userDataStore.isColorblindMode, (newVal) => {
 
 <template>
   <template v-if="loadedConfig">
+    <alert-toast />
     <template v-if="userDataStore.userIsAuthenticated">
       <nav-bar />
-      <alert-toast />
     </template>
     <router-view />
   </template>

diff --git a/src/components/Global/AlertToast.vue b/src/components/Global/AlertToast.vue
@@ -5,7 +5,12 @@ import { useAlertsStore } from '../../stores/alerts'
 const alertStore = useAlertsStore()
 const showAlert = ref(false)
 
-watch(() => alertStore.alertText, () => {showAlert.value = true})
+watch(() => alertStore.alertText, () => {
+  showAlert.value = true
+  setTimeout(() => {
+    showAlert.value = false
+  }, 5000)
+})
 
 </script>
 <template>

diff --git a/src/views/RegistrationView.vue b/src/views/RegistrationView.vue
@@ -2,16 +2,17 @@
 import { ref, onBeforeMount } from 'vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useUserDataStore } from '@/stores/userData'
+import { useAlertsStore } from '@/stores/alerts'
 import { useRouter } from 'vue-router'
 import { fetchApiCall } from '@/utils/api'
 import lambdaLogo from '../assets/PTR-lambda.png'
 
 const configurationStore = useConfigurationStore()
+const alertStore = useAlertsStore()
 const userDataStore = useUserDataStore()
 const router = useRouter()
 const username = ref('')
 const password = ref('')
-const errorMessage = ref('')
 const showPassword = ref(false)
 
 onBeforeMount(() => {
@@ -28,13 +29,13 @@ const storeToken = async (data) => {
   const authToken = data.token
   if (authToken) {
     userDataStore.authToken = authToken
-    await fetchApiCall({ url: configurationStore.observationPortalUrl + 'profile/', method: 'GET', successCallback: storeUser, failCallback: handleError })
+    await fetchApiCall({ url: configurationStore.observationPortalUrl + 'profile/', method: 'GET', successCallback: storeUser, failCallback: handleAuthError })
   }
 }
 
-const handleError = (error) => {
+const handleAuthError = (error) => {
   console.error('API call failed with error:', error)
-  errorMessage.value = 'Failed to authenticate user'
+  alertStore.setAlert('error', 'Credentials not recognized')
 }
 
 const storeUser = (user) => {
@@ -50,7 +51,7 @@ const Login = async () => {
     password: password.value
   }
   // store an auth token from login credentials
-  await fetchApiCall({ url: configurationStore.observationPortalUrl + 'api-token-auth/', method: 'POST', body: requestBody, successCallback: storeToken, failCallback: handleError })
+  await fetchApiCall({ url: configurationStore.observationPortalUrl + 'api-token-auth/', method: 'POST', body: requestBody, successCallback: storeToken, failCallback: handleAuthError })
 }
 
 </script>
@@ -96,12 +97,6 @@ const Login = async () => {
         >
           Login
         </v-btn>
-        <div
-          v-if="errorMessage"
-          class="error-message"
-        >
-          {{ errorMessage }}
-        </div>
       </v-form>
     </v-card>
   </v-container>
@@ -130,9 +125,4 @@ const Login = async () => {
   display: flex;
   align-items: center;
 }
-
-.error-message {
-  color: red;
-  margin-top: 10px;
-}
 </style>