From f25f555821e2fa49b14977682a7e4859499243e1 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sat, 25 Jan 2025 15:45:04 +0530
Subject: [PATCH] feat[ui]: updates to reset,set password and user login pages.

---
 frontend/src/views/ResetPasswordView.vue | 44 +++++++++++++---------
 frontend/src/views/SetPasswordView.vue   | 46 +++++++++++++----------
 frontend/src/views/UserLoginView.vue     | 48 ++++++++++++------------
 3 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/ResetPasswordView.vue b/frontend/src/views/ResetPasswordView.vue
index 8fb04b1b..05c6a93c 100644
--- a/frontend/src/views/ResetPasswordView.vue
+++ b/frontend/src/views/ResetPasswordView.vue
@@ -1,39 +1,41 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-gray-50">
+  <div class="min-h-screen flex flex-col bg-background">
     <header class="p-6">
-      <h1 class="text-xl font-bold text-gray-900">LibreDesk</h1>
+      <h1 class="text-2xl font-bold text-foreground">LibreDesk</h1>
     </header>
 
     <main class="flex-1 flex items-center justify-center p-4">
       <div class="w-full max-w-[400px]">
-        <Card class="bg-white border border-gray-200 shadow-lg">
+        <Card class="bg-card border border-border shadow-xl rounded-xl">
           <CardContent class="p-8 space-y-6">
             <div class="space-y-2 text-center">
-              <CardTitle class="text-2xl font-bold text-gray-900">Reset Password</CardTitle>
-              <p class="text-gray-600">Enter your email to receive a password reset link.</p>
+              <CardTitle class="text-3xl font-bold text-foreground">Reset Password</CardTitle>
+              <p class="text-muted-foreground">
+                Enter your email to receive a password reset link.
+              </p>
             </div>
 
             <form @submit.prevent="requestResetAction" class="space-y-4">
               <div class="space-y-2">
-                <Label for="email" class="text-sm font-medium text-gray-700">Email</Label>
+                <Label for="email" class="text-sm font-medium text-foreground">Email</Label>
                 <Input
                   id="email"
                   type="email"
                   placeholder="Enter your email address"
                   v-model.trim="resetForm.email"
-                  :class="{ 'border-red-500': emailHasError }"
-                  class="w-full bg-white border-gray-300 text-gray-900 placeholder:text-gray-400"
+                  :class="{ 'border-destructive': emailHasError }"
+                  class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
                 />
               </div>
 
               <Button
-                class="w-full bg-primary hover:bg-slate-500 text-white"
+                class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
                 :disabled="isLoading"
                 type="submit"
               >
                 <span v-if="isLoading" class="flex items-center justify-center">
                   <svg
-                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-foreground"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
@@ -62,11 +64,13 @@
               v-if="errorMessage"
               :errorMessage="errorMessage"
               :border="true"
-              class="w-full bg-red-50 text-red-600 border-red-200 p-3 rounded-md text-sm"
+              class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
             />
 
             <div class="text-center">
-              <router-link to="/" class="text-sm text-blue-600 hover:text-blue-500"
+              <router-link
+                to="/"
+                class="text-sm text-primary hover:text-primary/80 transition-all duration-200 ease-in-out"
                 >Back to Login</router-link
               >
             </div>
@@ -76,12 +80,18 @@
     </main>
 
     <footer class="p-6 text-center">
-      <div class="text-sm text-gray-500 space-x-4">
-        <a href="#" class="hover:text-gray-700">Privacy Policy</a>
+      <div class="text-sm text-muted-foreground space-x-4">
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Privacy Policy</a
+        >
         <span>•</span>
-        <a href="#" class="hover:text-gray-700">Terms of Service</a>
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Terms of Service</a
+        >
         <span>•</span>
-        <a href="#" class="hover:text-gray-700">Legal Notice</a>
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Legal Notice</a
+        >
       </div>
     </footer>
   </div>
@@ -130,7 +140,7 @@ const requestResetAction = async () => {
     })
     toast({
       title: 'Reset link sent',
-      description: 'Please check your email for the reset link.',
+      description: 'Please check your email for the reset link.'
     })
     router.push({ name: 'login' })
   } catch (err) {
diff --git a/frontend/src/views/SetPasswordView.vue b/frontend/src/views/SetPasswordView.vue
index 6bcc3a82..5ce6a5d4 100644
--- a/frontend/src/views/SetPasswordView.vue
+++ b/frontend/src/views/SetPasswordView.vue
@@ -1,33 +1,35 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-gray-50">
+  <div class="min-h-screen flex flex-col bg-background">
     <header class="p-6">
-      <h1 class="text-xl font-bold text-gray-900">LibreDesk</h1>
+      <h1 class="text-2xl font-bold text-foreground">LibreDesk</h1>
     </header>
 
     <main class="flex-1 flex items-center justify-center p-4">
       <div class="w-full max-w-[400px]">
-        <Card class="bg-white border border-gray-200 shadow-lg">
+        <Card class="bg-card border border-border shadow-xl rounded-xl">
           <CardContent class="p-8 space-y-6">
             <div class="space-y-2 text-center">
-              <CardTitle class="text-2xl font-bold text-gray-900">Set New Password</CardTitle>
-              <p class="text-gray-600">Please enter your new password twice to confirm.</p>
+              <CardTitle class="text-3xl font-bold text-foreground">Set New Password</CardTitle>
+              <p class="text-muted-foreground">Please enter your new password twice to confirm.</p>
             </div>
 
             <form @submit.prevent="setPasswordAction" class="space-y-4">
               <div class="space-y-2">
-                <Label for="password" class="text-sm font-medium text-gray-700">New Password</Label>
+                <Label for="password" class="text-sm font-medium text-foreground"
+                  >New Password</Label
+                >
                 <Input
                   id="password"
                   type="password"
                   placeholder="Enter new password"
                   v-model="passwordForm.password"
-                  :class="{ 'border-red-500': passwordHasError }"
-                  class="w-full bg-white border-gray-300 text-gray-900 placeholder:text-gray-400"
+                  :class="{ 'border-destructive': passwordHasError }"
+                  class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
                 />
               </div>
 
               <div class="space-y-2">
-                <Label for="confirmPassword" class="text-sm font-medium text-gray-700"
+                <Label for="confirmPassword" class="text-sm font-medium text-foreground"
                   >Confirm Password</Label
                 >
                 <Input
@@ -35,19 +37,19 @@
                   type="password"
                   placeholder="Confirm new password"
                   v-model="passwordForm.confirmPassword"
-                  :class="{ 'border-red-500': confirmPasswordHasError }"
-                  class="w-full bg-white border-gray-300 text-gray-900 placeholder:text-gray-400"
+                  :class="{ 'border-destructive': confirmPasswordHasError }"
+                  class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
                 />
               </div>
 
               <Button
-                class="w-full bg-primary hover:bg-slate-500 text-white"
+                class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
                 :disabled="isLoading"
                 type="submit"
               >
                 <span v-if="isLoading" class="flex items-center justify-center">
                   <svg
-                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-foreground"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
@@ -76,7 +78,7 @@
               v-if="errorMessage"
               :errorMessage="errorMessage"
               :border="true"
-              class="w-full bg-red-50 text-red-600 border-red-200 p-3 rounded-md text-sm"
+              class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
             />
           </CardContent>
         </Card>
@@ -84,12 +86,18 @@
     </main>
 
     <footer class="p-6 text-center">
-      <div class="text-sm text-gray-500 space-x-4">
-        <a href="#" class="hover:text-gray-700">Privacy Policy</a>
+      <div class="text-sm text-muted-foreground space-x-4">
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Privacy Policy</a
+        >
         <span>•</span>
-        <a href="#" class="hover:text-gray-700">Terms of Service</a>
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Terms of Service</a
+        >
         <span>•</span>
-        <a href="#" class="hover:text-gray-700">Legal Notice</a>
+        <a href="#" class="hover:text-foreground transition-all duration-200 ease-in-out"
+          >Legal Notice</a
+        >
       </div>
     </footer>
   </div>
@@ -161,7 +169,7 @@ const setPasswordAction = async () => {
 
     toast({
       title: 'Password set successfully',
-      description: 'You can now login with your new password.',
+      description: 'You can now login with your new password.'
     })
 
     router.push({ name: 'login' })
diff --git a/frontend/src/views/UserLoginView.vue b/frontend/src/views/UserLoginView.vue
index bd92338e..2a9c12ed 100644
--- a/frontend/src/views/UserLoginView.vue
+++ b/frontend/src/views/UserLoginView.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-gray-50">
+  <div class="min-h-screen flex flex-col bg-background">
     <header class="p-6">
-      <h1 class="text-xl font-bold text-gray-900">LibreDesk</h1>
+      <h1 class="text-2xl font-bold text-foreground">LibreDesk</h1>
     </header>
 
     <main class="flex-1 flex items-center justify-center p-4">
       <div class="w-full max-w-[400px]">
-        <Card class="bg-white border border-gray-200 shadow-lg">
+        <Card class="bg-card border border-border shadow-xl rounded-xl">
           <CardContent class="p-8 space-y-6">
             <div class="space-y-2 text-center">
-              <CardTitle class="text-2xl font-bold text-gray-900">Sign in</CardTitle>
-              <p class="text-gray-600">Sign in to your account</p>
+              <CardTitle class="text-3xl font-bold text-foreground">Sign in</CardTitle>
+              <p class="text-muted-foreground">Sign in to your account</p>
             </div>
 
-            <div v-if="enabledOIDCProviders.length" class="space-y-3">
+            <div v-if="enabledOIDCProviders.length" class="space-y-4">
               <Button
                 v-for="oidcProvider in enabledOIDCProviders"
                 :key="oidcProvider.id"
                 variant="outline"
                 type="button"
                 @click="redirectToOIDC(oidcProvider)"
-                class="w-full bg-white hover:bg-gray-50 text-gray-700 border-gray-300"
+                class="w-full bg-card hover:bg-secondary text-foreground border-border rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
               >
                 <img :src="oidcProvider.logo_url" width="20" class="mr-2" alt="" />
                 {{ oidcProvider.name }}
@@ -28,36 +28,36 @@
 
               <div class="relative">
                 <div class="absolute inset-0 flex items-center">
-                  <span class="w-full border-t border-gray-200"></span>
+                  <span class="w-full border-t border-border"></span>
                 </div>
                 <div class="relative flex justify-center text-xs uppercase">
-                  <span class="px-2 text-gray-500 bg-white">Or continue with</span>
+                  <span class="px-2 text-muted-foreground bg-card">Or continue with</span>
                 </div>
               </div>
             </div>
 
             <form @submit.prevent="loginAction" class="space-y-4">
               <div class="space-y-2">
-                <Label for="email" class="text-sm font-medium text-gray-700">Email</Label>
+                <Label for="email" class="text-sm font-medium text-foreground">Email</Label>
                 <Input
                   id="email"
                   type="text"
                   placeholder="Enter your email"
                   v-model.trim="loginForm.email"
-                  :class="{ 'border-red-500': emailHasError }"
-                  class="w-full bg-white border-gray-300 text-gray-900 placeholder:text-gray-400"
+                  :class="{ 'border-destructive': emailHasError }"
+                  class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
                 />
               </div>
 
               <div class="space-y-2">
-                <Label for="password" class="text-sm font-medium text-gray-700">Password</Label>
+                <Label for="password" class="text-sm font-medium text-foreground">Password</Label>
                 <Input
                   id="password"
                   type="password"
                   placeholder="Enter your password"
                   v-model="loginForm.password"
-                  :class="{ 'border-red-500': passwordHasError }"
-                  class="w-full bg-white border-gray-300 text-gray-900 placeholder:text-gray-400"
+                  :class="{ 'border-destructive': passwordHasError }"
+                  class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
                 />
               </div>
 
@@ -66,23 +66,26 @@
                   <!-- <input
                     type="checkbox"
                     id="remember"
-                    class="w-4 h-4 rounded bg-white border-gray-300 text-blue-600"
+                    class="w-4 h-4 rounded bg-card border-border text-primary"
                   />
-                  <Label for="remember" class="text-sm text-gray-600">Remember me</Label> -->
+                  <Label for="remember" class="text-sm text-muted-foreground">Remember me</Label> -->
                 </div>
-                <router-link to="/reset-password" class="text-sm text-blue-600 hover:text-blue-500">
+                <router-link
+                  to="/reset-password"
+                  class="text-sm text-primary hover:text-primary/80 transition-all duration-200 ease-in-out"
+                >
                   Forgot password?
                 </router-link>
               </div>
 
               <Button
-                class="w-full bg-primary hover:bg-slate-500 text-white"
+                class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
                 :disabled="isLoading"
                 type="submit"
               >
                 <span v-if="isLoading" class="flex items-center justify-center">
                   <svg
-                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-foreground"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
@@ -111,7 +114,7 @@
               v-if="errorMessage"
               :errorMessage="errorMessage"
               :border="true"
-              class="w-full bg-red-50 text-red-600 border-red-200 p-3 rounded-md text-sm"
+              class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
             />
           </CardContent>
         </Card>
@@ -119,8 +122,7 @@
     </main>
 
     <footer class="p-6 text-center">
-      <div class="text-sm text-gray-500 space-x-4">
-      </div>
+      <div class="text-sm text-muted-foreground space-x-4"></div>
     </footer>
   </div>
 </template>