feat: add multi-user support and role-based access control #31

web/src/features/auth/sign-in/auth-layout.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright (c) 2025 rustmailer.com (https://rustmailer.com)
+//
+// This file is part of the Bichon Email Archiving Project
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import Logo from '@/assets/logo.svg'
+
+type AuthLayoutProps = {
+  children: React.ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className='container grid h-svh max-w-none items-center justify-center'>
+      <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
+        <div className='mb-4 flex items-center justify-center'>
+          <img
+            src={Logo}
+            width={150}
+            height={150}
+            alt='Bichon Logo'
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}

web/src/features/auth/sign-in/components/user-auth-form.tsx

@@ -33,8 +33,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { PasswordInput } from '@/components/password-input'
 import { useMutation } from '@tanstack/react-query'
-import { login } from '@/api/access-tokens/api'
-import { setAccessToken } from '@/stores/authStore'
+import { setToken } from '@/stores/authStore'
 import { toast } from '@/hooks/use-toast'
 import { AxiosError } from 'axios'
 import { ToastAction } from '@/components/ui/toast'
@@ -42,17 +41,21 @@ import { useLocation, useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/button'
 import { useTranslation } from 'react-i18next'
 import i18n from '@/i18n'
+import { Loader2, LogIn } from 'lucide-react'
+import { login } from '@/api/users/api'
 
 type UserAuthFormProps = HTMLAttributes<HTMLDivElement>
 
-const getFormSchema = (t: (key: string, options?: Record<string, any>) => string) => z.object({
-  username: z
-    .string(),
-  password: z
-    .string()
-    .min(1, { message: t('validation.pleaseEnterPassword') })
-    .min(4, { message: t('validation.passwordMinLength', { min: 4 }) }),
-});
+const getFormSchema = (t: (key: string, options?: Record<string, any>) => string) =>
+  z.object({
+    username: z
+      .string()
+      .min(1, { message: t('validation.pleaseEnterUsernameOrEmail') }),
+    password: z
+      .string()
+      .min(1, { message: t('validation.pleaseEnterPassword') })
+      .min(4, { message: t('validation.passwordMinLength', { min: 4 }) }),
+  });
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   const [isLoading, setIsLoading] = useState(false)
@@ -66,24 +69,33 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      username: 'root',
+      username: '',
       password: '',
     },
   })
 
   const mutation = useMutation({
-    mutationFn: (password: string) => login(password),
+    mutationFn: (data: Record<string, any>) => login(data),
     retry: 0,
   });
 
   async function onSubmit(data: z.infer<typeof formSchema>) {
     setIsLoading(true)
 
-    mutation.mutate(data.password, {
-      onSuccess: (rootToken) => {
-        setAccessToken(rootToken);
+    mutation.mutate(data, {
+      onSuccess: (result) => {
+        if (result.success) {
+          setToken(result);
+          navigate({ to: redirect });
+        } else {
+          toast({
+            variant: "destructive",
+            title: t('auth.loginFailed'),
+            description: `${result.error_message!}`,
+            action: <ToastAction altText={t('common.tryAgain')}>{t('common.tryAgain')}</ToastAction>,
+          })
+        }
         setIsLoading(false);
-        navigate({ to: redirect });
       },
       onError: (error) => {
         const { t } = i18n
@@ -119,7 +131,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 <FormItem className='space-y-1'>
                   <FormLabel>{t('auth.username')}</FormLabel>
                   <FormControl>
-                    <Input disabled {...field} value={"root"} />
+                    <Input {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -140,7 +152,8 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 </FormItem>
               )}
             />
-            <Button className='mt-2' loading={isLoading}>
+            <Button className='mt-2' disabled={isLoading}>
+              {isLoading ? <Loader2 className='animate-spin' /> : <LogIn size={16} className='mr-2' />}
               {t('auth.login')}
             </Button>
           </div>

web/src/features/auth/sign-in/index.tsx

@@ -16,30 +16,41 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-
-import Logo from '@/assets/logo.svg'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { UserAuthForm } from './components/user-auth-form'
 import { useTranslation } from 'react-i18next'
+import { AuthLayout } from './auth-layout'
 
 export default function SignIn() {
   const { t } = useTranslation()
   return (
-    <div className='container relative flex h-svh flex-col items-center justify-center'>
-      <div className='p-8 flex flex-col items-center'>
-        <img
-          src={Logo}
-          className='mb-6'
-          width={350}
-          height={350}
-          alt='Bichon Logo'
-        />
-        <h2 className='mb-4 text-lg font-medium text-muted-foreground'>
-          {t('auth.welcome')}
-        </h2>
-        <div className='mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[350px]'>
+    <AuthLayout>
+      <Card className='gap-4'>
+        <CardHeader>
+          <CardTitle className='text-lg tracking-tight'>{t('auth.welcome')}</CardTitle>
+        </CardHeader>
+        <CardContent>
           <UserAuthForm />
-        </div>
-      </div>
-    </div>
+        </CardContent>
+        <CardFooter>
+          <p className="text-muted-foreground px-8 text-center text-sm">
+            {t('common.project_description')}
+            <a
+              href="https://github.com/rustmailer/bichon"
+              className="hover:text-primary underline underline-offset-4 ml-1"
+            >
+              {t('common.view_on_github_button')}
+            </a>
+            .
+          </p>
+        </CardFooter>
+      </Card>
+    </AuthLayout>
   )
 }