Authentication flow change - Remove requirement for user to enter username - Use Passkey discoverability instead.

src/pages/LandingPage.vue

@@ -1,14 +1,14 @@
 <template>
-  <q-page class="landing-page column items-center q-pa-md wallpaper">
+  <q-page class="landing-page column items-center q-pa-md bg-theme">
     <div class="hero text-center q-pa-xl full-width">
-      <q-img
+      <img
         src="/stylepoint.png"
         alt="StylePoint Logo"
         class="logo q-mb-md"
         style="max-width: 300px; width: 100%;"
-      />
+      >
       <h1 class="text-h3 text-weight-bold text-yellow q-mb-sm">
-        Welcome to StylePoint
+        Welcome to {{ productName }}
       </h1>
       <p class="text-h6 text-white q-mb-lg">
         An all-in-one tool designed for StyleTech Developers.
@@ -47,6 +47,8 @@
 <script setup>
 import { ref } from 'vue';
 
+const productName = process.env.PRODUCT_NAME;
+
 const features = ref([
   'Automated Daily Reports',
   'Deep Mantis Integration',
@@ -65,18 +67,6 @@ const features = ref([
   filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.5));
 }
 
-.wallpaper {
-  background: linear-gradient(
-    to top left,
-    #fdc730,
-    #ea2963,
-    #bd288a 50%,
-    #6e43ac,
-    #4763bf,
-    #16a3e8
-  );
-}
-
 .features {
   background-color: rgba(0, 0, 0, 0.25);
   border-radius: 10px;

src/pages/LoginPage.vue

@@ -1,29 +1,38 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card style="width: 400px; max-width: 90vw;">
+  <q-page class="flex flex-center bg-theme">
+    <img
+      src="/stylepoint.png"
+      alt="StylePoint Logo"
+      class="logo q-mb-md absolute"
+      style="max-width: 300px; width: 100%; top: 75px;"
+    >
+    <q-card
+      style="width: 400px; max-width: 90vw;"
+      dark
+      class="bg-blurred"
+      flat
+      bordered
+    >
       <q-card-section>
-        <div class="text-h6">
-          Login
+        <div
+          class="
+      text-h4
+      text-center"
+        >
+          <small>Login</small>
         </div>
       </q-card-section>
 
-      <q-card-section>
-        <q-input
-          v-model="username"
-          label="Username"
-          outlined
-          dense
-          class="q-mb-md"
-          @keyup.enter="handleLogin"
-          :hint="errorMessage ? errorMessage : ''"
-          :rules="[val => !!val || 'Username is required']"
-        />
+      <q-separator />
+
+      <q-card-section class="row justify-center">
         <q-btn
-          label="Login with Passkey"
-          color="primary"
-          class="full-width"
+          icon="key"
+          round
           @click="handleLogin"
           :loading="loading"
+          size="xl"
+          class="bg-theme shadow-5"
         />
         <div
           v-if="errorMessage"
@@ -35,7 +44,8 @@
 
       <q-card-actions align="center">
         <q-btn
-          flat
+          outline
+          color="secondary"
           label="Don't have an account? Register"
           to="/register"
         />
@@ -51,7 +61,8 @@ import { startAuthentication } from '@simplewebauthn/browser';
 import axios from 'boot/axios';
 import { useAuthStore } from 'stores/auth'; // Import the auth store
 
-const username = ref('');
+const productName = process.env.PRODUCT_NAME;
+
 const loading = ref(false);
 const errorMessage = ref('');
 const router = useRouter();
@@ -65,9 +76,7 @@ async function handleLogin()
   try
   {
     // 1. Get options from server
-    const optionsRes = await axios.post('/api/auth/generate-authentication-options', {
-      username: username.value || undefined, // Send username if provided
-    });
+    const optionsRes = await axios.post('/api/auth/generate-authentication-options');
     const options = optionsRes.data;
 
     // 2. Start authentication ceremony in browser
@@ -125,4 +134,4 @@ async function handleLogin()
     loading.value = false;
   }
 }
-</script>
+</script>

src/pages/RegisterPage.vue

@@ -1,13 +1,27 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card style="width: 400px; max-width: 90vw;">
+  <q-page class="flex flex-center bg-theme">
+    <img
+      src="/stylepoint.png"
+      alt="StylePoint Logo"
+      class="logo q-mb-md absolute"
+      style="max-width: 300px; width: 100%; top: 75px;"
+    >
+    <q-card
+      style="width: 400px; max-width: 90vw;"
+      dark
+      class="bg-blurred"
+      flat
+      bordered
+    >
       <q-card-section>
         <!-- Update title -->
-        <div class="text-h6">
-          Register Passkey
+        <div class="text-h4 text-center">
+          Register Account
         </div>
       </q-card-section>
 
+      <q-separator />
+
       <q-card-section>
         <q-input
           v-model="username"
@@ -45,12 +59,12 @@
           @keyup.enter="handleRegister"
         />
         <q-btn
-          label="Register Passkey"
+          label="Register Account"
           color="primary"
           class="full-width"
           @click="handleRegister"
           :loading="loading"
-          :disable="loading || !username || !email || !fullName"
+          :disable="loading || !username || !email || !fullName || (showTokenInput && !registrationToken)"
         />
         <div
           v-if="successMessage"
@@ -66,14 +80,16 @@
         </div>
       </q-card-section>
 
-      <q-card-actions align="center">
+      <q-card-section>
         <!-- Always show login link -->
         <q-btn
+          color="secondary"
           flat
           label="Already have an account? Login"
           to="/login"
+          class="full-width"
         />
-      </q-card-actions>
+      </q-card-section>
     </q-card>
   </q-page>
 </template>