fix(ui,backend): migrate to history-mode routing and harden auth flows

Author: 3xp0rt

backend/mail/models.py

@@ -60,7 +60,7 @@ def mimetype(self) -> str:
 class ResetPasswordMail(TemplatedMail):
     def __init__(self, user) -> None:
         self.user = user
-        reset_url = f"{settings.FRONTEND_URL}/#reset-password?token={user.password_reset_token}"
+        reset_url = f"{settings.FRONTEND_URL}/reset-password?token={user.password_reset_token}"
         params = {
             "user": user,
             "reset_url": reset_url,
@@ -78,7 +78,7 @@ def dispatch(self):
 class ConfirmationMail(TemplatedMail):
     def __init__(self, user) -> None:
         self.user = user
-        confirm_url = f"{settings.FRONTEND_URL}/#confirm-email?token={user.email_confirmation_token}"
+        confirm_url = f"{settings.FRONTEND_URL}/confirm-email?token={user.email_confirmation_token}"
         params = {
             "user": user,
             "confirmation_url": confirm_url,
@@ -136,7 +136,7 @@ def dispatch(self):
 class NewUserNotificationMail(TemplatedMail):
     def __init__(self, user, new_user) -> None:
         self.user = user
-        activate_url = f"{settings.FRONTEND_URL}/#account/{new_user.id}"
+        activate_url = f"{settings.FRONTEND_URL}/account/{new_user.id}"
         params = {
             "admin": user,
             "new_user": new_user,
@@ -159,7 +159,7 @@ def __init__(self, user, published_report) -> None:
         params = {
             "user": user,
             "report": published_report,
-            "report_location": f"{settings.FRONTEND_URL}/#reports/{published_report.id}",
+            "report_location": f"{settings.FRONTEND_URL}/reports/{published_report.id}",
         }
         super().__init__(
             subject="CRADLE - Your Report is Ready",
@@ -198,7 +198,7 @@ def __init__(self, user, enrichment_request) -> None:
         params = {
             "user": user,
             "enrichment": enrichment_request,
-            "enrichment_location": f"{settings.FRONTEND_URL}/#enrichments/{enrichment_request.id}",
+            "enrichment_location": f"{settings.FRONTEND_URL}/enrichments/{enrichment_request.id}",
         }
         super().__init__(
             subject="CRADLE - Your Enrichment is Complete",

backend/user/models.py

@@ -120,7 +120,7 @@ def send_email_confirmation(self):
 
         # Generate a token and set its expiration
         self.email_confirmation_token = uuid.uuid4().hex
-        self.email_confirmation_token_expiry = datetime.now() + timedelta(hours=24)
+        self.email_confirmation_token_expiry = timezone.now() + timedelta(hours=24)
         self.save(
             update_fields=[
                 "email_confirmation_token",
@@ -135,7 +135,7 @@ def send_password_reset(self):
         """Send a password reset email to the user."""
         # Generate a token and set its expiration
         self.password_reset_token = uuid.uuid4().hex
-        self.password_reset_token_expiry = datetime.now() + timedelta(hours=1)
+        self.password_reset_token_expiry = timezone.now() + timedelta(hours=1)
         self.save(update_fields=["password_reset_token", "password_reset_token_expiry"])
 
         mail = ResetPasswordMail(self)
@@ -341,7 +341,7 @@ def __str__(self):
 
     def is_expired(self):
         """Check if the session has expired."""
-        return datetime.now() > self.expires_at
+        return timezone.now() > self.expires_at
 
 
 class BlacklistedToken(models.Model):

backend/user/serializers.py

@@ -281,18 +281,18 @@ class EmailConfirmSerializer(serializers.Serializer):
     def validate(self, data):
         token = data["token"]
 
+        if not token:
+            raise ValidationError("We had trouble confirming with this token.")
+
         try:
             self.user = CradleUser.objects.get(email_confirmation_token=token)
-        except CradleUser.DoesNotExist:
+        except (CradleUser.DoesNotExist, CradleUser.MultipleObjectsReturned):
             raise ValidationError("We had trouble confirming with this token.")
 
         if self.user.email_confirmed:
             raise ValidationError("We had trouble confirming with this token.")
 
-        if not token or self.user.email_confirmation_token != token:
-            raise ValidationError("We had trouble confirming with this token.")
-
-        return True
+        return data
 
 
 class Enable2FASerializer(serializers.Serializer):

backend/user/views/user_view.py

@@ -545,7 +545,8 @@ def post(self, request):
             raise ValidationException(detail="Email confirmation token has expired a new one was sent.")
 
         user.email_confirmed = True
-        user.email_confirmation_token = ""
+        user.email_confirmation_token = None
+        user.email_confirmation_token_expiry = None
         user.save()
 
         return Response({"message": "Email confirmed."}, status=status.HTTP_200_OK)

ui/src/components/base/loading/loading.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from '@/components/ui/spinner';
 import React from 'react';
-import Logo from '../Logo/Logo';
+import Logo from '../logo/logo';
 
 interface LoadingProps {
     logo?: boolean;

ui/src/components/domain/admin/user/add-user-form.tsx

@@ -7,8 +7,12 @@ import {
     FieldGroup,
     FieldLabel,
 } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import { InputGroup, InputGroupInput } from '@/components/ui/input-group';
+import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+} from '@/components/ui/input-group';
 import {
     Select,
     SelectContent,
@@ -19,9 +23,11 @@ import {
 import { Switch } from '@/components/ui/switch';
 import useApi from '@/hooks/api/use-api';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';
 import { UserRetrieve } from '@services/cradle/models';
 import { useMutation } from '@tanstack/react-query';
 import bytes from 'bytes';
+import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -61,6 +67,7 @@ const addUserSchema = z.object({
 type FormData = z.infer<typeof addUserSchema>;
 
 export default function AddUserForm({ onAdd }: AddUserFormProps) {
+    const [showPassword, setShowPassword] = useState(false);
     const { usersApi } = useApi();
 
     const {
@@ -168,14 +175,44 @@ export default function AddUserForm({ onAdd }: AddUserFormProps) {
                         Password
                         <span className='text-destructive ml-1'>*</span>
                     </FieldLabel>
-                    <Input
-                        id='password'
-                        type='password'
-                        placeholder='Password'
-                        {...register('password')}
-                        aria-invalid={Boolean(errors.password)}
-                        required
-                    />
+                    <InputGroup>
+                        <InputGroupInput
+                            id='password'
+                            type={showPassword ? 'text' : 'password'}
+                            placeholder='Password'
+                            {...register('password')}
+                            aria-invalid={Boolean(errors.password)}
+                            required
+                        />
+                        <InputGroupAddon align='inline-end'>
+                            <InputGroupButton
+                                type='button'
+                                onClick={() => setShowPassword(!showPassword)}
+                                aria-label={
+                                    showPassword
+                                        ? 'Hide password'
+                                        : 'Show password'
+                                }
+                                title={
+                                    showPassword
+                                        ? 'Hide password'
+                                        : 'Show password'
+                                }
+                            >
+                                {showPassword ? (
+                                    <EyeSlashIcon
+                                        className='size-4'
+                                        weight='bold'
+                                    />
+                                ) : (
+                                    <EyeIcon
+                                        className='size-4'
+                                        weight='bold'
+                                    />
+                                )}
+                            </InputGroupButton>
+                        </InputGroupAddon>
+                    </InputGroup>
                     <FieldDescription>
                         Minimum 8 characters recommended
                     </FieldDescription>

ui/src/components/domain/auth/confirm-email.tsx

@@ -1,7 +1,7 @@
 import useApi from '@/hooks/api/use-api';
 import { useMutation } from '@tanstack/react-query';
 import { Link, useSearch } from '@tanstack/react-router';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 
 /**
@@ -21,11 +21,15 @@ export default function ConfirmEmail() {
         onSuccess: () => toast.success('Email confirmed successfully.'),
     });
 
+    const calledRef = useRef(false);
+
     useEffect(() => {
+        if (calledRef.current) return;
         if (!token) {
             toast.error('No confirmation token provided.');
             return;
         }
+        calledRef.current = true;
         confirmEmail(token);
     }, [token, confirmEmail]);
 

ui/src/components/domain/auth/login.tsx

@@ -527,7 +527,7 @@ export default function Login() {
                         showAtmosphere={true}
                         autoRotate={true}
                         autoRotateSpeed={0.5}
-                        initialView={{ lat: 20, lng: 0, altitude: 1.8 }}
+                        initialView={{ lat: 20, lng: 0, altitude: 3.5 }}
                         viewOffsetX={120}
                     />
                 </Suspense>