@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/account/components/email-request-dialog.tsx.ejs

@@ -0,0 +1,96 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Mail } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface EmailRequestDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (email: string) => Promise<void>;
+}
+
+export function EmailRequestDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+}: EmailRequestDialogProps) {
+  const t = useTranslations('core.EmailRequestDialog');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!email.trim() || !email.includes('@')) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSubmit(email);
+      setEmail('');
+    } catch (error) {
+      console.error('Failed to send code:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setEmail('');
+    }
+    onOpenChange(open);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Mail className="w-5 h-5" />
+            {t('title')}
+          </DialogTitle>
+          <DialogDescription>{t('description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="email-address">{t('emailLabel')}</Label>
+            <Input
+              id="email-address"
+              type="email"
+              placeholder={t('emailPlaceholder')}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleSubmit();
+                }
+              }}
+              autoFocus
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            {t('cancelButton')}
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!email.trim() || !email.includes('@') || loading}
+          >
+            {loading ? t('sending') : t('sendButton')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/account/components/mfa-add-buttons.tsx.ejs

@@ -0,0 +1,43 @@
+import { Button } from '@/components/ui/button';
+import { UserMfaTypeEnum } from '@hed-hog/api-types';
+import { Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+interface MfaAddButtonsProps {
+  onAddMethod: (type: UserMfaTypeEnum) => void;
+}
+
+export function MfaAddButtons({ onAddMethod }: MfaAddButtonsProps) {
+  const t = useTranslations('core.MfaAddButtons');
+
+  return (
+    <div className="grid grid-cols-3 gap-2 pt-4">
+      <Button
+        variant="outline"
+        onClick={() => onAddMethod(UserMfaTypeEnum.EMAIL)}
+        className="justify-start"
+      >
+        <Plus className="mr-2 size-4" />
+        {t('addEmail')}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={() => onAddMethod(UserMfaTypeEnum.TOTP)}
+        className="justify-start"
+      >
+        <Plus className="mr-2 size-4" />
+        {t('addAuthenticator')}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={() => onAddMethod(UserMfaTypeEnum.WEBAUTHN)}
+        className="justify-start"
+      >
+        <Plus className="mr-2 size-4" />
+        {t('addSecurityKey')}
+      </Button>
+    </div>
+  );
+}

package/hedhog/frontend/app/account/components/mfa-method-card.tsx.ejs

@@ -0,0 +1,115 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { UserMfa } from '@hed-hog/api-types';
+import { Edit2, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { FormEvent, useState } from 'react';
+import { getMethodIcon } from '../lib/mfa-utils';
+
+interface MfaMethodCardProps {
+  method: UserMfa;
+  onUpdate: (methodId: number, name: string) => void;
+  onRemove: (method: any) => void;
+  refetch: () => void;
+}
+
+export function MfaMethodCard({
+  method,
+  onRemove,
+  onUpdate,
+  refetch,
+}: MfaMethodCardProps) {
+  const t = useTranslations('core.TwoFactorAuth');
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [editName, setEditName] = useState<string>((method as any).name ?? '');
+
+  const handleSubmitUpdate = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const name = editName.trim();
+    if (!name) return;
+
+    const id = Number(method.id);
+    await Promise.resolve(onUpdate(id, name));
+    setIsEditOpen(false);
+    refetch();
+  };
+
+  return (
+    <div className="flex items-center justify-between rounded-lg border p-4">
+      <div className="flex items-center gap-4">
+        {getMethodIcon(method.type)}
+        <div>
+          <div className="flex items-center gap-2">
+            <p className="font-medium">{method.name}</p>
+            {method.verified_at ? (
+              <Badge variant="default" className="text-xs">
+                {t('verified')}
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="text-xs">
+                {t('notVerified')}
+              </Badge>
+            )}
+          </div>
+          {method.type === 'email' &&
+            (method as any).user_mfa_email?.[0]?.email && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {(method as any).user_mfa_email[0].email}
+              </p>
+            )}
+        </div>
+      </div>
+      <div className="flex items-center">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            setEditName(method.name);
+            setIsEditOpen(true);
+          }}
+        >
+          <Edit2 className="w-4 h-4" />
+        </Button>
+
+        <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>{t('editMfaName')}</DialogTitle>
+            </DialogHeader>
+
+            <form onSubmit={handleSubmitUpdate} className="mt-2 flex flex-col">
+              <Label className="mb-2 block text-sm font-medium">
+                {t('nameLabel')}
+              </Label>
+              <Input
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                className="mb-4 w-full rounded-md border px-3 py-2 text-sm"
+                required
+                aria-label={t('mfaNameAriaLabel')}
+              />
+
+              <div className="flex flex-row gap-2 justify-end">
+                <Button type="button" variant="outline">
+                  {t('cancel')}
+                </Button>
+                <Button type="submit">{t('save')}</Button>
+              </div>
+            </form>
+          </DialogContent>
+        </Dialog>
+        <Button variant="ghost" size="icon" onClick={() => onRemove(method)}>
+          <Trash2 className="size-4 text-destructive" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/account/components/mfa-setup-dialog.tsx.ejs

@@ -0,0 +1,236 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { Label } from '@/components/ui/label';
+import { UserMfaTypeEnum } from '@hed-hog/api-types/UserMfaTypeEnum';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { getMethodName } from '../lib/mfa-utils';
+
+interface MfaSetupDialogProps {
+  open: boolean;
+  selectedMethod: UserMfaTypeEnum | null;
+  qrCode: string;
+  verificationCode: string;
+  name: string;
+  onNameChange: (name: string) => void;
+  onOpenChange: (open: boolean) => void;
+  onVerificationCodeChange: (code: string) => void;
+  onVerify: () => void;
+  isRemoval?: boolean;
+  useRecoveryCode?: boolean;
+  onToggleRecoveryCode?: () => void;
+  resendLoading?: boolean;
+  resendCooldown?: number;
+  onResendCode?: () => void;
+}
+
+export function MfaSetupDialog({
+  open,
+  selectedMethod,
+  qrCode,
+  verificationCode,
+  name,
+  onNameChange,
+  onOpenChange,
+  onVerificationCodeChange,
+  onVerify,
+  isRemoval = false,
+  useRecoveryCode = false,
+  onToggleRecoveryCode,
+  resendLoading = false,
+  resendCooldown = 0,
+  onResendCode,
+}: MfaSetupDialogProps) {
+  const t = useTranslations('core.MfaSetupDialog');
+  const { getSettingValue } = useApp();
+  const pinCodeLength = getSettingValue('mfa-email-code-length') || 6;
+  const methodName = getMethodName(String(selectedMethod));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {isRemoval ? t('titleRemove') : t('titleSetup', { methodName })}
+          </DialogTitle>
+          <DialogDescription>
+            {isRemoval ? t('descriptionRemove') : t('descriptionSetup')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          {selectedMethod === UserMfaTypeEnum.TOTP && !isRemoval && (
+            <div className="space-y-2">
+              <p className="text-sm">{t('scanQrCode')}</p>
+              <div className="bg-muted p-4 rounded-lg flex justify-center">
+                <img src={qrCode} alt="QR Code" />
+              </div>
+            </div>
+          )}
+          <div className="space-y-4">
+            {!isRemoval && selectedMethod !== UserMfaTypeEnum.WEBAUTHN && (
+              <div className="space-y-2">
+                <Label htmlFor="method-name">{t('methodNameLabel')}</Label>
+                <Input
+                  id="method-name"
+                  placeholder={t('methodNamePlaceholder', {
+                    methodLabel: methodName,
+                    example:
+                      selectedMethod === UserMfaTypeEnum.EMAIL
+                        ? 'Hotmail'
+                        : 'Main',
+                  })}
+                  value={name}
+                  onChange={(e) => onNameChange(e.target.value)}
+                  autoFocus
+                />
+              </div>
+            )}
+
+            {!isRemoval && selectedMethod === UserMfaTypeEnum.WEBAUTHN && (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="method-name">
+                    {t('securityKeyNameLabel')}
+                  </Label>
+                  <Input
+                    id="method-name"
+                    placeholder={t('securityKeyNamePlaceholder')}
+                    value={name}
+                    onChange={(e) => onNameChange(e.target.value)}
+                    autoFocus
+                  />
+                </div>
+                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950">
+                  <p className="text-sm text-blue-900 dark:text-blue-100">
+                    {t('securityKeyInstructions')}
+                  </p>
+                </div>
+              </>
+            )}
+
+            {selectedMethod !== UserMfaTypeEnum.WEBAUTHN && (
+              <div className="space-y-2 mt-8 flex flex-col items-center justify-center">
+                <Label htmlFor="verification-code">
+                  {useRecoveryCode
+                    ? t('recoveryCodeLabel')
+                    : t('verificationCodeLabel')}
+                </Label>
+                {useRecoveryCode ? (
+                  <Input
+                    id="verification-code"
+                    placeholder={t('recoveryCodePlaceholder')}
+                    value={verificationCode}
+                    onChange={(e) => onVerificationCodeChange(e.target.value)}
+                    className="text-center font-mono"
+                    autoFocus
+                  />
+                ) : (
+                  <InputOTP
+                    maxLength={
+                      selectedMethod === UserMfaTypeEnum.TOTP
+                        ? 6
+                        : pinCodeLength
+                    }
+                    value={verificationCode}
+                    onChange={onVerificationCodeChange}
+                  >
+                    {(() => {
+                      const length =
+                        selectedMethod === UserMfaTypeEnum.TOTP
+                          ? 6
+                          : pinCodeLength;
+                      const groupSize = Math.ceil(length / 2);
+                      const groups = [
+                        Array.from({ length: groupSize }, (_, i) => (
+                          <InputOTPSlot key={i} index={i} />
+                        )),
+                        Array.from({ length: length - groupSize }, (_, i) => (
+                          <InputOTPSlot
+                            key={i + groupSize}
+                            index={i + groupSize}
+                          />
+                        )),
+                      ];
+                      return (
+                        <>
+                          <InputOTPGroup>{groups[0]}</InputOTPGroup>
+                          <InputOTPSeparator />
+                          <InputOTPGroup>{groups[1]}</InputOTPGroup>
+                        </>
+                      );
+                    })()}
+                  </InputOTP>
+                )}
+                {!isRemoval &&
+                  selectedMethod === UserMfaTypeEnum.EMAIL &&
+                  onResendCode && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={onResendCode}
+                      disabled={resendLoading || resendCooldown > 0}
+                      className="mt-2"
+                    >
+                      {resendLoading
+                        ? t('resending')
+                        : resendCooldown > 0
+                          ? t('resendIn', { seconds: resendCooldown })
+                          : t('resendCode')}
+                    </Button>
+                  )}
+                {isRemoval && onToggleRecoveryCode && (
+                  <Button
+                    type="button"
+                    variant="link"
+                    size="sm"
+                    onClick={onToggleRecoveryCode}
+                    className="text-xs"
+                  >
+                    {useRecoveryCode
+                      ? 'Use verification code'
+                      : 'Use recovery code instead'}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancelButton')}
+          </Button>
+          <Button
+            onClick={onVerify}
+            variant={isRemoval ? 'destructive' : 'default'}
+            disabled={
+              !isRemoval && selectedMethod === UserMfaTypeEnum.WEBAUTHN && !name
+            }
+          >
+            {isRemoval && selectedMethod === UserMfaTypeEnum.WEBAUTHN
+              ? t('registerButton')
+              : isRemoval
+                ? t('verifyRemoveButton')
+                : selectedMethod === UserMfaTypeEnum.WEBAUTHN
+                  ? t('registerButton')
+                  : t('verifyButton')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/account/components/profile-form.tsx.ejs

@@ -0,0 +1,209 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { User as UserType } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader, Upload, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export function ProfileForm() {
+  const { user, request, showToastHandler, refetchUser } = useApp();
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const t = useTranslations('core.ProfileForm');
+
+  const profileSchema = z.object({
+    name: z.string().min(2, t('errorName')),
+  });
+
+  type ProfileFormValues = z.infer<typeof profileSchema>;
+
+  const {
+    data: profile,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ['profile'],
+    queryFn: async () => {
+      const response = await request<UserType>({
+        url: `/profile`,
+      });
+      return response.data;
+    },
+  });
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      name: profile?.name || '',
+    },
+  });
+
+  const onSubmit = async (data: ProfileFormValues) => {
+    try {
+      await request({
+        url: `/profile`,
+        method: 'PUT',
+        data,
+      });
+      showToastHandler('success', t('updatedSuccess'));
+    } catch (error) {
+      showToastHandler('error', t('updateFailure'));
+    }
+  };
+
+  const handleAvatarChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      showToastHandler('error', t('invalidImageType'));
+      return;
+    }
+
+    // Validate file size (5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      showToastHandler('error', t('imageTooLarge'));
+      return;
+    }
+
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      await request({
+        url: `/profile/avatar`,
+        method: 'PUT',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      showToastHandler('success', t('avatarUpdateSuccess'));
+      refetchUser();
+      refetch();
+    } catch (error) {
+      showToastHandler('error', t('avatarUpdateFailure'));
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const userInitials =
+    user?.name
+      ?.split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2) || 'U';
+
+  useEffect(() => {
+    if (profile) {
+      form.reset({
+        name: profile.name,
+      });
+    }
+  }, [profile, form]);
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>{t('title')}</CardTitle>
+        <CardDescription>{t('description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6 px-6 pb-6">
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <Avatar className="size-24">
+              <AvatarImage
+                src={getPhotoUrl(profile?.photo_id)}
+                alt={profile?.name || t('avatarAlt')}
+              />
+              <AvatarFallback className="text-2xl">
+                {userInitials}
+              </AvatarFallback>
+            </Avatar>
+            {uploading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full">
+                <Loader className="animate-spin h-8 w-8 text-white" />
+              </div>
+            )}
+          </div>
+          <div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleAvatarChange}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+            >
+              <Upload className="mr-2 size-4" />
+              {uploading ? t('uploading') : t('changeAvatar')}
+            </Button>
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t('avatarGuidelines')}
+            </p>
+          </div>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('formNameLabel')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('formNamePlaceholder')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              type="submit"
+              disabled={form.formState.isSubmitting || isLoading}
+            >
+              <User className="mr-2 size-4" />
+              {t('saveChanges')}
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}