Introduce the UI & bind properties to show the invalid credentials wa…

…rning

components/applications/worklog-tracker/WlWorklogAuthForm.vue

@@ -7,6 +7,10 @@
       <label for="password">Password</label>
       <WlInput id="password" v-model="password" label="Password" type="password" placeholder="••••••••"/>
       <WlButton variant="primary" type="submit">Login</WlButton>
+      <div v-if="props.invalidCredentials" class="flex items-center justify-center gap-2 text-warning-400">
+        <WlTriangleExclamationIcon/>
+        <span>Invalid credentials</span>
+      </div>
     </form>
   </div>
 </template>
@@ -16,11 +20,17 @@ import { ref } from 'vue'
 
 import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
 import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
+import WlTriangleExclamationIcon from '~/components/shared/icons/static/WlTriangleExclamationIcon.vue'
+
+type Props = {
+  invalidCredentials: boolean;
+}
 
 type Emits = {
   (e: 'login', email: string, password: string): void
 }
 
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const email = ref('')

components/applications/worklog-tracker/WlWorklogTracker.vue

@@ -16,7 +16,7 @@
     />
     <WlWorklogList :selected-index="selectedIndex" :items="worklogList.value" @select="listeners.select"/>
   </template>
-  <WlWorklogAuthForm v-else @login="listeners.login"/>
+  <WlWorklogAuthForm v-else :invalid-credentials="worklogAuth.invalidCredentials.value" @login="listeners.login"/>
 </template>
 
 <script setup lang="ts">