feat: reset password (#1092)

ui/src/views/LoginView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import CatalystLogo from '@/components/common/CatalystLogo.vue'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 
@@ -8,9 +9,11 @@ import { useQuery } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
+import { cn } from '@/lib/utils'
 
 const mail = ref('')
 const password = ref('')
+const errorTitle = ref('')
 const errorMessage = ref('')
 
 const login = () => {
@@ -20,6 +23,7 @@ const login = () => {
       window.location.href = '/ui/'
     })
     .catch((error) => {
+      errorTitle.value = 'Login failed'
       errorMessage.value = error.message
     })
 }
@@ -37,7 +41,8 @@ watch(
       mail.value = 'user@catalyst-soar.com'
       password.value = '1234567890'
     }
-  }
+  },
+  { immediate: true }
 )
 </script>
 
@@ -45,12 +50,18 @@ watch(
   <div class="flex h-full w-full flex-1 items-center justify-center">
     <Card class="m-auto w-96">
       <CardHeader class="flex flex-row justify-between">
-        <CardTitle>Catalyst</CardTitle>
+        <CardTitle class="flex flex-row">
+          <CatalystLogo class="size-12" />
+          <div>
+            <h1 class="text-lg font-bold">Catalyst</h1>
+            <div class="text-muted-foreground">Login</div>
+          </div>
+        </CardTitle>
       </CardHeader>
       <CardContent class="flex flex-col gap-4">
-        <Alert v-if="errorMessage" variant="destructive" class="border-4 p-4">
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{{ errorMessage }}</AlertDescription>
+        <Alert v-if="errorTitle || errorMessage" variant="destructive" class="border-4 p-4">
+          <AlertTitle v-if="errorTitle">{{ errorTitle }}</AlertTitle>
+          <AlertDescription v-if="errorMessage">{{ errorMessage }}</AlertDescription>
         </Alert>
         <Input
           v-model="mail"
@@ -66,7 +77,14 @@ watch(
           class="w-full"
           @keydown.enter="login"
         />
-        <Button variant="outline" class="w-full" @click="login"> Login</Button>
+        <Button variant="outline" class="w-full" @click="login">Login</Button>
+        <RouterLink
+          :to="{ name: 'password-reset' }"
+          :class="
+            cn(buttonVariants({ variant: 'link', size: 'default' }), 'w-full text-foreground')
+          "
+          >Reset Password
+        </RouterLink>
       </CardContent>
     </Card>
   </div>

ui/src/views/PasswordResetView.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import CatalystLogo from '@/components/common/CatalystLogo.vue'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button, buttonVariants } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+
+import { ref } from 'vue'
+
+import { pb } from '@/lib/pocketbase'
+import { cn } from '@/lib/utils'
+
+interface AlertData {
+  variant: 'default' | 'destructive'
+  title: string
+  message: string
+}
+
+const mail = ref('')
+const alert = ref<AlertData | null>(null)
+
+const resetPassword = () => {
+  pb.collection('users')
+    .requestPasswordReset(mail.value)
+    .then(() => {
+      alert.value = {
+        variant: 'default',
+        title: 'Password reset',
+        message: 'Password reset email sent'
+      }
+    })
+    .catch((error) => {
+      alert.value = {
+        variant: 'destructive',
+        title: 'Password reset failed',
+        message: error.message
+      }
+    })
+}
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-1 items-center justify-center">
+    <Card class="m-auto w-96">
+      <CardHeader class="flex flex-row justify-between">
+        <CardTitle class="flex flex-row">
+          <CatalystLogo class="size-12" />
+          <div>
+            <h1 class="text-lg font-bold">Catalyst</h1>
+            <div class="text-muted-foreground">Password Reset</div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <CardContent class="flex flex-col gap-4">
+        <Alert v-if="alert" :variant="alert.variant" class="border-4 p-4">
+          <AlertTitle>{{ alert.title }}</AlertTitle>
+          <AlertDescription>{{ alert.message }}</AlertDescription>
+        </Alert>
+        <div v-else class="flex flex-col gap-4">
+          <Input
+            v-model="mail"
+            type="text"
+            placeholder="Email"
+            class="w-full"
+            @keydown.enter="resetPassword"
+          />
+          <Button variant="outline" class="w-full" @click="resetPassword">Reset Password</Button>
+        </div>
+        <RouterLink
+          :to="{ name: 'login' }"
+          :class="
+            cn(buttonVariants({ variant: 'link', size: 'default' }), 'w-full text-foreground')
+          "
+          >Back to Login
+        </RouterLink>
+      </CardContent>
+    </Card>
+  </div>
+</template>