fix: focus login errors

apps/web/src/pages/LoginPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useAuth } from '@/composables/useAuth.js';
@@ -8,6 +8,14 @@ const router = useRouter();
 const { signIn, isLoading, error } = useAuth();
 const email = ref('');
 const password = ref('');
+const errorMessage = ref(null);
+
+watch(error, async (value) => {
+  if (!value) return;
+  errorMessage.value = value.message;
+  await nextTick();
+  document.getElementById('login-error')?.focus();
+});
 
 async function submit() {
   try {
@@ -29,7 +37,7 @@ async function submit() {
       <input id="admin-email" v-model="email" class="fixture-input" type="email" autocomplete="username" required />
       <label class="fixture-label" for="admin-password">Password</label>
       <input id="admin-password" v-model="password" class="fixture-input" type="password" autocomplete="current-password" required />
-      <p v-if="error" class="state state--error" role="alert">{{ error.message }}</p>
+      <p v-if="errorMessage" id="login-error" class="state state--error" role="alert" tabindex="-1">{{ errorMessage }}</p>
       <button class="button button--primary" type="submit" :disabled="isLoading">{{ isLoading ? 'Signing in...' : 'Sign in' }}</button>
     </form>
   </main>