@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/account/hooks/use-mfa-setup.ts.ejs

@@ -0,0 +1,461 @@
+import { UserMfaTypeEnum } from '@hed-hog/api-types/UserMfaTypeEnum';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+export function useMfaSetup() {
+  const { request, showToastHandler, user } = useApp();
+  const t = useTranslations('core.MfaSetupHook');
+  const [secret, setSecret] = useState('');
+  const [codeHash, setCodeHash] = useState('');
+  const [qrCode, setQrCode] = useState('');
+  const [challengeId, setChallengeId] = useState<number | null>(null);
+  const [resendLoading, setResendLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [currentEmail, setCurrentEmail] = useState<string | null>(null);
+
+  const userEmail = user?.user_identifier?.find(
+    (ui) => ui.type === 'email'
+  )?.value;
+
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(
+        () => setResendCooldown(resendCooldown - 1),
+        1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+
+  const resendEmailCode = async () => {
+    if (!currentEmail) {
+      showToastHandler('error', t('emailNotFound'));
+      return;
+    }
+
+    setResendLoading(true);
+    try {
+      const { data }: any = await request<{ challengeId: number }>({
+        url: '/profile/mfa/email/verify',
+        method: 'POST',
+        data: { email: currentEmail },
+      });
+
+      setChallengeId(data.challengeId);
+      setResendCooldown(30);
+      showToastHandler('success', t('codeResent'));
+    } catch (error) {
+      showToastHandler('error', t('resendFailed'));
+      console.error(error);
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  const sendCodeToRemoveEmailMFA = async () => {
+    try {
+      const { data }: any = await request({
+        url: `/profile/email/send-code-to-remove`,
+        method: 'POST',
+        data: { email: userEmail },
+      });
+
+      setCodeHash(data.codeHash);
+      showToastHandler('success', t('checkEmailSent'));
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const enableEmailMFA = async (email: string) => {
+    try {
+      const { data }: any = await request<{ challengeId: number }>({
+        url: '/profile/mfa/email/verify',
+        method: 'POST',
+        data: { email },
+      });
+
+      setChallengeId(data.challengeId);
+      setCurrentEmail(email);
+      setResendCooldown(30);
+      showToastHandler('success', t('checkEmailSent'));
+      return data.challengeId;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const enableAuthenticatorMFA = async () => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/totp/generate',
+        method: 'POST',
+      });
+
+      setSecret(data.secret);
+      setQrCode(data.qrCode);
+      showToastHandler('success', t('scanQrCode'));
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const verifyEmailMFA = async (name: string, token: string, email: string) => {
+    try {
+      const { data }: any = await request<{ codes: string[] }>({
+        url: '/profile/mfa/email/verify/confirm',
+        method: 'POST',
+        data: { pin: token, challengeId, name, email },
+      });
+
+      showToastHandler('success', t('methodAddedSuccess'));
+      return data?.codes ? (data.codes as string[]) : [];
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const updateMFAName = async (mfaId: number, name: string) => {
+    try {
+      await request({
+        url: `/profile/update-mfa/${mfaId}`,
+        method: 'PUT',
+        data: { name },
+      });
+
+      showToastHandler('success', t('nameUpdatedSuccess'));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const verifyTOTPMFA = async (name: string, verificationCode: string) => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/totp/verify',
+        method: 'POST',
+        data: {
+          name,
+          token: verificationCode,
+          secret,
+        },
+      });
+
+      showToastHandler('success', t('methodAddedSuccess'));
+      return data.codes as string[];
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleRemoveTOTPMFA = async (methodId: number, token: string) => {
+    try {
+      await request({
+        url: `/profile/totp/${methodId}/remove`,
+        method: 'DELETE',
+        data: { token },
+      });
+
+      showToastHandler('success', t('methodRemovedSuccess'));
+    } catch (error) {
+      showToastHandler('error', t('removeMethodFailed'));
+      throw error;
+    }
+  };
+
+  const handleRemoveEmailMFA = async (methodId: number, token: string) => {
+    try {
+      await request({
+        url: `/profile/email/${methodId}/remove`,
+        method: 'DELETE',
+        data: { token, hash: codeHash },
+      });
+
+      showToastHandler('success', t('methodRemovedSuccess'));
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const removeMFAMethodWithRecoveryCode = async (
+    methodId: number,
+    recoveryCode: string
+  ) => {
+    try {
+      await request({
+        url: `/profile/mfa/${methodId}/remove-with-recovery-code`,
+        method: 'DELETE',
+        data: { recoveryCode },
+      });
+
+      showToastHandler('success', t('methodRemovedSuccess'));
+    } catch (error) {
+      showToastHandler('error', t('removeMethodFailed'));
+      throw error;
+    }
+  };
+
+  const handleRemoveWebAuthnMFA = async (methodId: number) => {
+    try {
+      const { startAuthentication } = await import('@simplewebauthn/browser');
+      const optionsResponse = await request<any>({
+        url: '/profile/webauthn/authenticate/generate',
+        method: 'POST',
+      });
+
+      if (!optionsResponse.data) {
+        throw new Error('Failed to generate authentication options');
+      }
+
+      showToastHandler('success', t('authenticateToRemove'));
+      const assertion = await startAuthentication(optionsResponse.data);
+      await request({
+        url: '/profile/webauthn/authenticate/verify',
+        method: 'POST',
+        data: {
+          assertionResponse: assertion,
+        },
+      });
+
+      await request({
+        url: `/profile/webauthn/${methodId}/remove`,
+        method: 'DELETE',
+      });
+      showToastHandler('success', t('securityKeyRemovedSuccess'));
+    } catch (error: any) {
+      if (error?.name === 'NotAllowedError') {
+        showToastHandler('error', t('authenticationCancelled'));
+      } else {
+        showToastHandler(
+          'error',
+          error?.message || t('removeSecurityKeyFailed')
+        );
+      }
+      throw error;
+    }
+  };
+
+  const removeMFAMethod = async (
+    methodId: number,
+    methodType: UserMfaTypeEnum,
+    verificationCode: string
+  ) => {
+    switch (methodType) {
+      case UserMfaTypeEnum.TOTP:
+        await handleRemoveTOTPMFA(methodId, verificationCode);
+        break;
+      case UserMfaTypeEnum.WEBAUTHN:
+        await handleRemoveWebAuthnMFA(methodId);
+        break;
+      case UserMfaTypeEnum.EMAIL:
+        await handleRemoveEmailMFA(methodId, verificationCode);
+        break;
+
+      default:
+        await handleRemoveEmailMFA(methodId, verificationCode);
+    }
+  };
+
+  const removeMfaUnified = async (
+    methodId: number,
+    token?: string,
+    hash?: string,
+    verificationType?: 'totp' | 'email' | 'recovery' | 'webauthn',
+    assertionResponse?: any
+  ) => {
+    try {
+      await request({
+        url: `/profile/mfa/${methodId}/remove`,
+        method: 'DELETE',
+        data: { token, hash, verificationType, assertionResponse },
+      });
+
+      showToastHandler('success', t('methodRemovedSuccess'));
+    } catch (error) {
+      showToastHandler('error', t('removeMethodFailed'));
+      throw error;
+    }
+  };
+
+  const initiateSetup = async (type: UserMfaTypeEnum, email?: string) => {
+    switch (type) {
+      case UserMfaTypeEnum.EMAIL:
+        if (email) {
+          await enableEmailMFA(email);
+        } else {
+          throw new Error('Email is required for EMAIL MFA');
+        }
+        break;
+      case UserMfaTypeEnum.TOTP:
+        await enableAuthenticatorMFA();
+        break;
+      default:
+        if (email) {
+          await enableEmailMFA(email);
+        } else {
+          throw new Error('Email is required for EMAIL MFA');
+        }
+    }
+  };
+
+  const checkMfaVerificationType = async () => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/recovery-codes/send-verification',
+        method: 'POST',
+      });
+
+      return {
+        requiresVerification: data.requiresVerification,
+        verificationType: data.verificationType,
+        availableMethods: data.availableMethods,
+        codeHash: data.codeHash,
+        hasWebAuthn: data.hasWebAuthn,
+        hasRecoveryCodes: data.hasRecoveryCodes,
+      };
+    } catch (error) {
+      showToastHandler('error', t('checkVerificationTypeFailed'));
+      throw error;
+    }
+  };
+
+  const regenerateRecoveryCodes = async (
+    verificationCode?: string,
+    hash?: string,
+    verificationType?: 'totp' | 'email' | 'recovery' | 'webauthn',
+    assertionResponse?: any
+  ) => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/recovery-codes/regenerate',
+        method: 'POST',
+        data: { verificationCode, hash, verificationType, assertionResponse },
+      });
+
+      showToastHandler('success', t('recoveryCodesRegeneratedSuccess'));
+      return data.codes as string[];
+    } catch (error) {
+      showToastHandler('error', t('regenerateRecoveryCodesFailed'));
+      throw error;
+    }
+  };
+
+  const checkIfMfaExists = async () => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/mfa/check-verification',
+        method: 'POST',
+      });
+
+      return {
+        requiresVerification: data.requiresVerification,
+        verificationType: data.verificationType,
+        availableMethods: data.availableMethods,
+        codeHash: data.codeHash,
+        hasWebAuthn: data.hasWebAuthn,
+        hasRecoveryCodes: data.hasRecoveryCodes,
+      };
+    } catch (error) {
+      showToastHandler('error', t('checkExistingMfaFailed'));
+      throw error;
+    }
+  };
+
+  const checkMfaBeforeRemove = async () => {
+    try {
+      const { data }: any = await request({
+        url: '/profile/mfa/check-verification-remove',
+        method: 'POST',
+      });
+
+      return {
+        requiresVerification: data.requiresVerification,
+        verificationType: data.verificationType,
+        availableMethods: data.availableMethods,
+        codeHash: data.codeHash,
+        hasWebAuthn: data.hasWebAuthn,
+        hasRecoveryCodes: data.hasRecoveryCodes,
+      };
+    } catch (error) {
+      showToastHandler('error', t('checkMfaBeforeRemoveFailed'));
+      throw error;
+    }
+  };
+
+  const verifyBeforeAddMfa = async (
+    verificationCode: string,
+    hash?: string,
+    verificationType?: 'totp' | 'email' | 'recovery' | 'webauthn',
+    assertionResponse?: any
+  ) => {
+    try {
+      await request({
+        url: '/profile/mfa/verify-before-add',
+        method: 'POST',
+        data: { verificationCode, hash, verificationType, assertionResponse },
+      });
+
+      return true;
+    } catch (error) {
+      console.error('❌ verifyBeforeAddMfa error:', error);
+      showToastHandler('error', t('invalidVerificationCode'));
+      throw error;
+    }
+  };
+
+  const enableWebAuthnMFA = async (name: string) => {
+    try {
+      const { startRegistration } = await import('@simplewebauthn/browser');
+
+      const { data: options }: any = await request({
+        url: '/profile/webauthn/generate',
+        method: 'POST',
+        data: { name },
+      });
+
+      const attestationResponse = await startRegistration(options);
+
+      const { data }: any = await request({
+        url: '/profile/webauthn/verify',
+        method: 'POST',
+        data: { name, attestationResponse },
+      });
+
+      showToastHandler('success', t('securityKeyRegisteredSuccess'));
+      return data.codes as string[];
+    } catch (error: any) {
+      if (error.name === 'NotAllowedError') {
+        showToastHandler('error', t('registrationCancelled'));
+      } else {
+        showToastHandler('error', t('registerSecurityKeyFailed'));
+      }
+      throw error;
+    }
+  };
+
+  return {
+    qrCode,
+    userEmail,
+    verifyEmailMFA,
+    verifyTOTPMFA,
+    removeMFAMethod,
+    removeMfaUnified,
+    removeMFAMethodWithRecoveryCode,
+    updateMFAName,
+    sendCodeToRemoveEmailMFA,
+    initiateSetup,
+    regenerateRecoveryCodes,
+    checkMfaVerificationType,
+    checkIfMfaExists,
+    checkMfaBeforeRemove,
+    verifyBeforeAddMfa,
+    enableWebAuthnMFA,
+    resendEmailCode,
+    resendLoading,
+    resendCooldown,
+  };
+}

package/hedhog/frontend/app/account/layout.tsx.ejs

@@ -0,0 +1,105 @@
+'use client';
+
+import { PageHeader } from '@/components/entity-list';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import {
+  Link,
+  Lock,
+  LucideIcon,
+  Mail,
+  Shield,
+  Smartphone,
+  User,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter } from 'next/navigation';
+import { ReactNode } from 'react';
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+type TabConfig = {
+  value: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+export default function AccountLayout({ children }: LayoutProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const t = useTranslations('core.Profile');
+
+  const tabs: TabConfig[] = [
+    { value: 'profile', label: t('tabProfile'), icon: User },
+    { value: 'password', label: t('tabPassword'), icon: Lock },
+    { value: 'email', label: t('tabEmail'), icon: Mail },
+    { value: '2fa', label: t('tab2fa'), icon: Shield },
+    { value: 'accounts', label: t('tabAccounts'), icon: Link },
+    { value: 'sessions', label: t('tabSessions'), icon: Smartphone },
+  ];
+
+  const getCurrentTab = () => {
+    if (pathname.includes('/profile')) return 'profile';
+    if (pathname.includes('/password')) return 'password';
+    if (pathname.includes('/email')) return 'email';
+    if (pathname.includes('/2fa')) return '2fa';
+    if (pathname.includes('/accounts')) return 'accounts';
+    if (pathname.includes('/sessions')) return 'sessions';
+    return 'profile';
+  };
+
+  const handleTabChange = (value: string) => {
+    router.push(`/account/${value}`);
+  };
+
+  return (
+    <div className="flex flex-col pl-4 h-screen">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: t('breadcrumbLabel') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+      <div className="py-2">
+        <Tabs value={getCurrentTab()} onValueChange={handleTabChange}>
+          <TabsList className="grid w-full grid-cols-6 lg:w-fit gap-1 rounded-sm">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = getCurrentTab() === tab.value;
+
+              return (
+                <Tooltip key={tab.value}>
+                  <TooltipTrigger asChild>
+                    <TabsTrigger
+                      value={tab.value}
+                      className={`gap-2 cursor-pointer hover:bg-primary/10 active:bg-primary/20 rounded-sm ${isActive ? 'text-primary' : 'text-primary/50'}`}
+                    >
+                      <Icon className="size-4" />
+                      <span
+                        className={`hidden sm:inline ${isActive ? 'text-primary' : 'text-primary/50'}`}
+                      >
+                        {tab.label}
+                      </span>
+                    </TabsTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="block sm:hidden">
+                    {tab.label}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </TabsList>
+          <div className="mt-2">{children}</div>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/account/lib/mfa-utils.tsx.ejs

@@ -0,0 +1,37 @@
+import { UserMfaTypeEnum } from '@hed-hog/api-types/UserMfaTypeEnum';
+import { Fingerprint, Key, LucideIcon, Mail, Shield } from 'lucide-react';
+
+export function getMethodIcon(type: string): React.ReactElement<LucideIcon> {
+  switch (type) {
+    case UserMfaTypeEnum.EMAIL:
+      return <Mail className="size-5" />;
+    case UserMfaTypeEnum.TOTP:
+      return <Key className="size-5" />;
+    case UserMfaTypeEnum.WEBAUTHN:
+      return <Fingerprint className="size-5" />;
+    default:
+      return <Shield className="size-5" />;
+  }
+}
+
+export function getMethodName(type: string): string {
+  switch (type) {
+    case UserMfaTypeEnum.EMAIL:
+      return 'Email';
+    case UserMfaTypeEnum.TOTP:
+      return 'Authenticator App';
+    case UserMfaTypeEnum.WEBAUTHN:
+      return 'Security Key';
+    default:
+      return type;
+  }
+}
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/hedhog/frontend/app/account/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/account/profile');
+}

package/hedhog/frontend/app/account/password/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { ChangePasswordForm } from '../components/change-password-form';
+
+export default function PasswordPage() {
+  return <ChangePasswordForm />;
+}

package/hedhog/frontend/app/account/profile/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { ProfileForm } from '../components/profile-form';
+
+export default function ProfilePage() {
+  return <ProfileForm />;
+}

package/hedhog/frontend/app/account/sessions/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { ActiveSessions } from '../components/active-sessions';
+
+export default function SessionsPage() {
+  return <ActiveSessions />;
+}