@hed-hog/core 0.0.185 → 0.0.190

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

@@ -0,0 +1,379 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { Label } from '@/components/ui/label';
+import { UserIdentifier } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CheckCircle2, Mail, ShieldCheck, XCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export function ChangeEmailForm() {
+  const t = useTranslations('core.ChangeEmailForm');
+  const { user, request, showToastHandler, getSettingValue } = useApp();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [showPinDialog, setShowPinDialog] = useState(false);
+  const [pendingData, setPendingData] = useState<EmailFormValues | null>(null);
+  const pinCodeLength = getSettingValue('mfa-email-code-length') || 6;
+  const [challengeId, setChallengeId] = useState<number | null>(null);
+
+  const emailSchema = z.object({
+    newEmail: z.string().email(t('errorEmailRequired')),
+    password: z.string().min(1, t('errorPasswordRequired')),
+  });
+
+  const pinSchema = z.object({
+    pin: z
+      .string()
+      .length(pinCodeLength, t('errorPinLength', { length: pinCodeLength })),
+  });
+
+  type EmailFormValues = z.infer<typeof emailSchema>;
+  type PinFormValues = z.infer<typeof pinSchema>;
+
+  const {
+    data: userIdentifier,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ['profile', 'email'],
+    queryFn: async () => {
+      const response = await request<UserIdentifier>({
+        url: '/profile/email',
+      });
+      return response.data;
+    },
+  });
+
+  const form = useForm<EmailFormValues>({
+    resolver: zodResolver(emailSchema),
+    defaultValues: {
+      newEmail: '',
+      password: '',
+    },
+  });
+
+  const pinForm = useForm<PinFormValues>({
+    resolver: zodResolver(pinSchema),
+    defaultValues: {
+      pin: '',
+    },
+  });
+
+  // Estado para o código OTP
+  const [verificationCode, setVerificationCode] = useState('');
+
+  const onSubmit = async ({ newEmail, password }: EmailFormValues) => {
+    if (newEmail === userIdentifier?.value) {
+      showToastHandler('error', t('errorDifferentEmail'));
+      return;
+    }
+
+    try {
+      const { data } = await request<{ requireEmailVerification: boolean }>({
+        url: '/profile/change-email',
+        method: 'PUT',
+        data: {
+          email: newEmail,
+          password: password,
+        },
+      });
+
+      if (data.requireEmailVerification) {
+        setPendingData({ newEmail, password });
+        setShowConfirmDialog(true);
+      } else {
+        setPendingData(null);
+        form.reset({ newEmail: '', password: '' });
+        await refetch();
+        showToastHandler('success', t('successEmailChanged'));
+      }
+    } catch (error) {}
+  };
+
+  const handleSendVerificationEmail = async () => {
+    try {
+      const { data } = await request<{ challengeId: number }>({
+        url: '/profile/email/verify',
+        method: 'POST',
+        data: {
+          email: pendingData?.newEmail ?? userIdentifier?.value,
+        },
+      });
+
+      setChallengeId(data.challengeId);
+
+      showToastHandler('success', t('successEmailSent'));
+
+      setShowPinDialog(true);
+    } catch (error) {
+      showToastHandler('error', t('errorSendFailed'));
+    }
+  };
+
+  const onPinSubmit = useCallback(async () => {
+    try {
+      await request({
+        url: '/profile/email/verify/confirm',
+        method: 'POST',
+        data: { pin: verificationCode, challengeId },
+      });
+
+      form.reset({ newEmail: '', password: '' });
+      refetch();
+      showToastHandler('success', t('successVerified'));
+      setShowPinDialog(false);
+      pinForm.reset();
+      setVerificationCode('');
+    } catch (error) {
+      showToastHandler('error', t('errorInvalidPin'));
+    }
+  }, [challengeId, pinForm, verificationCode]);
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="pb-4">
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="px-6 pb-6">
+          <div className="mb-6 flex items-center justify-between rounded-lg border bg-muted/50 p-4">
+            {isLoading ? (
+              <div className="flex w-full items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="bg-muted-foreground/10 rounded-full h-5 w-5 animate-pulse" />
+                  <div>
+                    <div className="h-4 w-24 bg-muted-foreground/10 rounded animate-pulse mb-1" />
+                    <div className="h-4 w-40 bg-muted-foreground/10 rounded animate-pulse" />
+                  </div>
+                </div>
+                <div className="h-5 w-20 bg-muted-foreground/10 rounded animate-pulse" />
+              </div>
+            ) : (
+              <>
+                <div className="flex items-center gap-3">
+                  <Mail className="size-5 text-muted-foreground" />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {t('currentEmailLabel')}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {userIdentifier?.value}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {userIdentifier?.verified_at ? (
+                    <div className="flex items-center gap-1 text-green-600">
+                      <CheckCircle2 className="size-5" />
+                      <span className="text-sm font-medium">
+                        {t('verified')}
+                      </span>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex items-center gap-1 text-amber-600">
+                        <XCircle className="size-5" />
+                        <span className="text-sm font-medium">
+                          {t('notVerified')}
+                        </span>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={handleSendVerificationEmail}
+                      >
+                        <ShieldCheck className="mr-2 size-4" />
+                        {t('verifyButton')}
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="newEmail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('newEmailLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder={t('newEmailPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('passwordLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder={t('passwordPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                <Mail className="mr-2 size-4" />
+                {t('changeEmailButton')}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('confirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t.rich('confirmDescription', {
+                newEmail: String(pendingData?.newEmail),
+                strong: (chunks) => <strong>{chunks}</strong>,
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancelButton')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleSendVerificationEmail}>
+              {t('confirmButton')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog open={showPinDialog} onOpenChange={setShowPinDialog}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('verifyDialogTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('verifyDialogDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onPinSubmit();
+            }}
+            className="space-y-4"
+          >
+            <div className="space-y-2 flex flex-col gap-2 items-center justify-center">
+              <Label className="text-sm font-medium">{t('pinCodeLabel')}</Label>
+              <InputOTP
+                maxLength={pinCodeLength}
+                value={verificationCode}
+                onChange={setVerificationCode}
+              >
+                {(() => {
+                  const groupSize = Math.ceil(pinCodeLength / 2);
+                  const groups = [
+                    Array.from({ length: groupSize }, (_, i) => (
+                      <InputOTPSlot key={i} index={i} />
+                    )),
+                    Array.from(
+                      { length: pinCodeLength - groupSize },
+                      (_, i) => (
+                        <InputOTPSlot
+                          key={i + groupSize}
+                          index={i + groupSize}
+                        />
+                      )
+                    ),
+                  ];
+                  return (
+                    <>
+                      <InputOTPGroup>{groups[0]}</InputOTPGroup>
+                      <InputOTPSeparator />
+                      <InputOTPGroup>{groups[1]}</InputOTPGroup>
+                    </>
+                  );
+                })()}
+              </InputOTP>
+              <Button
+                type="button"
+                variant="ghost"
+                className="mt-2"
+                onClick={handleSendVerificationEmail}
+              >
+                {t('resendEmailButton')}
+              </Button>
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowPinDialog(false)}
+              >
+                {t('cancelButton')}
+              </Button>
+              <Button type="submit" disabled={verificationCode.length !== 6}>
+                <ShieldCheck className="mr-2 size-4" />
+                {t('verifySubmitButton')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -0,0 +1,184 @@
+'use client';
+
+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 { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Lock } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export function ChangePasswordForm() {
+  const { request, showToastHandler, getSettingValue } = useApp();
+  const t = useTranslations('core.ChangePasswordForm');
+  const minPasswordLength = getSettingValue('password-min-length') || 6;
+  const minPasswordSymbols = getSettingValue('password-min-symbols') || 0;
+  const minPasswordUppercase = getSettingValue('password-min-uppercase') || 0;
+  const minPasswordNumbers = getSettingValue('password-min-numbers') || 0;
+
+  const passwordSchema = z
+    .object({
+      currentPassword: z
+        .string()
+        .min(minPasswordLength, t('currentPasswordRequired')),
+      newPassword: z
+        .string()
+        .min(minPasswordLength, t('newPasswordMinLength'))
+        .refine(
+          (val) => {
+            const symbolCount = val.replace(/[a-zA-Z0-9]/g, '').length;
+            return symbolCount >= minPasswordSymbols;
+          },
+          {
+            message: t('newPasswordMinSymbols', {
+              minSymbols: minPasswordSymbols,
+            }),
+          }
+        )
+        .refine(
+          (val) => {
+            const uppercaseCount = (val.match(/[A-Z]/g) || []).length;
+            return uppercaseCount >= minPasswordUppercase;
+          },
+          {
+            message: t('newPasswordMinUppercase', {
+              minUppercase: minPasswordUppercase,
+            }),
+          }
+        )
+        .refine(
+          (val) => {
+            const numberCount = (val.match(/[0-9]/g) || []).length;
+            return numberCount >= minPasswordNumbers;
+          },
+          {
+            message: t('newPasswordMinNumbers', {
+              minNumbers: minPasswordNumbers,
+            }),
+          }
+        ),
+      confirmPassword: z
+        .string()
+        .min(minPasswordLength, t('confirmPasswordRequired')),
+    })
+    .refine((data) => data.newPassword === data.confirmPassword, {
+      message: t('passwordsDontMatch'),
+      path: ['confirmPassword'],
+    });
+
+  type PasswordFormValues = z.infer<typeof passwordSchema>;
+
+  const form = useForm<PasswordFormValues>({
+    resolver: zodResolver(passwordSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  });
+
+  const onSubmit = async (data: PasswordFormValues) => {
+    try {
+      await request({
+        url: '/profile/change-password',
+        method: 'PUT',
+        data: {
+          currentPassword: data.currentPassword,
+          newPassword: data.newPassword,
+        },
+      });
+
+      showToastHandler('success', t('updateSuccess'));
+
+      form.reset();
+    } catch (error) {
+      showToastHandler('error', t('updateFailure'));
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>{t('title')}</CardTitle>
+        <CardDescription>{t('description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="px-6 pb-6">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="currentPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('currentPasswordLabel')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder={t('currentPasswordPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="newPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('newPasswordLabel')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder={t('newPasswordPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('confirmPasswordLabel')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder={t('confirmPasswordPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              <Lock className="mr-2 size-4" />
+              {t('changePasswordButton')}
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/account/components/connected-accounts.tsx.ejs

@@ -0,0 +1,144 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Link as LinkIcon, Unlink } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import FacebookIcon from '../../../../../public/facebook.svg';
+import GithubIcon from '../../../../../public/github.svg';
+import GoogleIcon from '../../../../../public/google.svg';
+import MicrosoftIcon from '../../../../../public/microsoft.svg';
+
+export function ConnectedAccounts() {
+  const { getSettingValue, request, setAccessToken, showToastHandler, user } =
+    useApp();
+  const t = useTranslations('core.ConnectedAccounts');
+  const availableProviders = getSettingValue('providers') || '[]';
+
+  const providerIcons: Record<string, React.ComponentType<any>> = {
+    google: GoogleIcon,
+    facebook: FacebookIcon,
+    github: GithubIcon,
+    microsoft: MicrosoftIcon,
+  };
+
+  const providers = Array.isArray(availableProviders)
+    ? availableProviders.map((p: any) => {
+        if (typeof p === 'string') {
+          return {
+            id: p,
+            name: p.charAt(0).toUpperCase() + p.slice(1),
+            icon: providerIcons[p] ?? (() => null),
+          };
+        }
+        return {
+          ...p,
+          icon: providerIcons[p.id] ?? (() => null),
+        };
+      })
+    : [];
+
+  const handleDisconnect = async (email: string, providerName: string) => {
+    try {
+      const { data }: any = await request({
+        url: `/oauth/${providerName.toLowerCase()}`,
+        method: 'DELETE',
+        data: { email },
+      });
+
+      if (data.accessToken) {
+        setAccessToken(data.accessToken);
+      }
+      showToastHandler('success', t('disconnectSuccess'));
+    } catch (error) {
+      showToastHandler('error', t('disconnectFailure'));
+      throw error;
+    }
+  };
+
+  const getConnectionInfo = (providerName: string) => {
+    const accounts = (user?.user_account ?? []).filter(
+      (ua) => ua.provider === providerName.toLowerCase()
+    );
+
+    return {
+      isConnected: accounts.length > 0,
+      account: accounts[0],
+      accountCount: accounts.length,
+    };
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>{t('title')}</CardTitle>
+        <CardDescription>{t('description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4 px-6 pb-6">
+        {providers?.map((provider: any) => {
+          const { isConnected, account } = getConnectionInfo(provider.name);
+
+          return (
+            <div
+              key={provider.id}
+              className="flex items-center justify-between rounded-lg border p-4"
+            >
+              <div className="flex items-center gap-4">
+                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
+                  <img className="size-5" src={provider.icon.src} />
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <p className="font-medium">{provider.name}</p>
+                    {Boolean(isConnected) && (
+                      <Badge variant="default" className="text-xs">
+                        {t('connected')}
+                      </Badge>
+                    )}
+                  </div>
+                  {Boolean(isConnected) && (
+                    <p className="text-sm text-muted-foreground">
+                      {account?.email || t('connected')}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div>
+                {Boolean(isConnected) ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      handleDisconnect(String(account?.email), provider.name)
+                    }
+                  >
+                    <Unlink className="mr-2 size-4" />
+                    {t('disconnect')}
+                  </Button>
+                ) : (
+                  <Link
+                    href={`${process.env.NEXT_PUBLIC_API_BASE_URL}/oauth/${provider.name.toLowerCase()}/connect`}
+                  >
+                    <Button type="button" variant="outline" size="sm">
+                      <LinkIcon className="mr-2 size-4" />
+                      {t('connect')}
+                    </Button>
+                  </Link>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}