insforge 0.3.2 → 1.2.10

package/frontend/src/features/auth/page/AuthMethodsPage.tsx

@@ -0,0 +1,275 @@
+import { useState, useCallback, useMemo } from 'react';
+import { MoreHorizontal, Plus, Trash2, Pencil, Mail, ChevronDown } from 'lucide-react';
+import { OAuthConfigDialog, AuthPreview } from '@/features/auth/components';
+import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import {
+  Button,
+  ConfirmDialog,
+  CopyButton,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components';
+import type { OAuthProvidersSchema } from '@insforge/shared-schemas';
+import {
+  oauthProviders,
+  type OAuthProviderInfo,
+  getAuthImplementationPrompt,
+} from '@/features/auth/helpers';
+import { getBackendUrl } from '@/lib/utils/utils';
+
+export default function AuthMethodsPage() {
+  const [selectedProvider, setSelectedProvider] = useState<OAuthProviderInfo>();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { confirm, confirmDialogProps } = useConfirm();
+  const {
+    configs,
+    isLoadingConfigs,
+    deleteConfig,
+    refetchConfigs,
+    getProviderConfig,
+    isProviderConfigured,
+  } = useOAuthConfig();
+
+  const handleConfigureProvider = (provider: OAuthProviderInfo) => {
+    setSelectedProvider(provider);
+    setIsDialogOpen(true);
+  };
+
+  const deleteOAuthConfig = async (providerId: OAuthProvidersSchema, providerName: string) => {
+    const shouldDelete = await confirm({
+      title: `Delete ${providerName} OAuth`,
+      description: `Are you sure you want to delete the ${providerName} configuration? This action cannot be undone.`,
+      confirmText: 'Delete',
+      cancelText: 'Cancel',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      deleteConfig(providerId);
+    }
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+    setSelectedProvider(undefined);
+  };
+
+  const hasAuthMethods = useMemo(() => {
+    return !!configs.length;
+  }, [configs]);
+
+  const enabledProviders = useMemo(() => {
+    const enabled: Record<OAuthProvidersSchema, boolean> = {} as Record<
+      OAuthProvidersSchema,
+      boolean
+    >;
+    oauthProviders.forEach((provider) => {
+      enabled[provider.id] = isProviderConfigured(provider.id);
+    });
+    return enabled;
+  }, [isProviderConfigured]);
+
+  // Check if all providers are enabled
+  const allProvidersEnabled = useMemo(() => {
+    return oauthProviders.every((provider) => enabledProviders[provider.id]);
+  }, [enabledProviders]);
+
+  const handleSuccess = useCallback(() => {
+    // Refresh configuration after successful update
+    void refetchConfigs();
+  }, [refetchConfigs]);
+
+  if (isLoadingConfigs) {
+    return (
+      <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="text-sm text-gray-500 dark:text-zinc-400">
+              Loading OAuth configuration...
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Two column layout */}
+      <div className="h-full flex overflow-hidden">
+        {/* Left Section - Auth Methods List */}
+        <div className="flex-1 bg-slate-50 dark:bg-[#2d2d2d] flex flex-col overflow-hidden">
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-6 gap-3">
+            <h2 className="px-4 text-xl font-semibold text-gray-900 dark:text-white tracking-tight">
+              Auth Methods
+            </h2>
+            {!allProvidersEnabled && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button className="h-8 px-2 py-0 gap-2 bg-black text-white dark:bg-neutral-600 dark:text-white hover:bg-gray-800 dark:hover:bg-neutral-500 text-sm font-medium rounded">
+                    <Plus className="w-5 h-5" />
+                    Add Provider
+                    <ChevronDown className="w-4 h-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-80">
+                  {/* Available providers (not enabled) */}
+                  {oauthProviders
+                    .filter((provider) => !enabledProviders[provider.id])
+                    .map((provider) => (
+                      <DropdownMenuItem
+                        key={provider.id}
+                        onClick={() => handleConfigureProvider(provider)}
+                        className="py-2 px-3 flex items-center gap-3 cursor-pointer"
+                      >
+                        {provider.icon}
+                        <span className="text-sm">{provider.name}</span>
+                      </DropdownMenuItem>
+                    ))}
+
+                  {/* Separator if there are both enabled and disabled providers */}
+                  {oauthProviders.some((p) => enabledProviders[p.id]) &&
+                    oauthProviders.some((p) => !enabledProviders[p.id]) && (
+                      <DropdownMenuSeparator />
+                    )}
+
+                  {/* Enabled providers (disabled from selection) */}
+                  {oauthProviders
+                    .filter((provider) => enabledProviders[provider.id])
+                    .map((provider) => (
+                      <DropdownMenuItem
+                        key={provider.id}
+                        disabled
+                        className="py-2 px-3 flex items-center justify-between gap-3 opacity-50 cursor-not-allowed"
+                      >
+                        <div className="flex items-center gap-3">
+                          {provider.icon}
+                          <span className="text-sm">{provider.name}</span>
+                        </div>
+                        <span className="text-xs px-2 py-0.5 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded border border-emerald-300 dark:border-emerald-700">
+                          Enabled
+                        </span>
+                      </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+
+          {/* Auth Methods List */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="flex flex-col gap-3">
+              {/* Email Auth Card */}
+              <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-neutral-800 rounded-lg border border-gray-200 dark:border-transparent">
+                <div className="flex items-center gap-3">
+                  <Mail className="w-6 h-6 text-gray-700 dark:text-white" />
+                  <div className="text-sm font-medium text-black dark:text-white">Email Auth</div>
+                </div>
+              </div>
+
+              {/* OAuth Providers */}
+              {hasAuthMethods &&
+                oauthProviders.map((provider) => {
+                  const providerConfig = getProviderConfig(provider.id);
+                  if (!providerConfig) {
+                    return null;
+                  }
+
+                  return (
+                    <div
+                      key={provider.id}
+                      className="flex items-center justify-between px-6 py-4 bg-white dark:bg-neutral-800 rounded-lg border border-gray-200 dark:border-transparent"
+                    >
+                      <div className="flex items-center gap-3">
+                        {provider.icon}
+                        <div className="text-sm font-medium text-black dark:text-white">
+                          {provider.name}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-3">
+                        {providerConfig.useSharedKey && (
+                          <span className="px-2 py-0.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-500 dark:border-neutral-400 rounded">
+                            Shared Keys
+                          </span>
+                        )}
+
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              className="h-7 w-7 p-1 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-700"
+                              variant="ghost"
+                              size="sm"
+                            >
+                              <MoreHorizontal className="w-5 h-5" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-40 py-1 px-2">
+                            <DropdownMenuItem
+                              onClick={() => handleConfigureProvider(provider)}
+                              className="py-2 px-3 flex items-center gap-3 cursor-pointer"
+                            >
+                              <Pencil className="w-5 h-5" />
+                              Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => void deleteOAuthConfig(provider.id, provider.name)}
+                              className="py-2 px-3 flex items-center gap-3 cursor-pointer text-red-600 dark:text-red-400"
+                            >
+                              <Trash2 className="w-5 h-5" />
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Section - Preview */}
+        <div className="w-[688px] bg-slate-50 dark:bg-[#2d2d2d] p-3 flex flex-col overflow-hidden">
+          <div className="h-full bg-gray-200 dark:bg-neutral-700 rounded-xl overflow-hidden flex flex-col">
+            {/* Preview Header */}
+            <div className="flex items-center justify-end px-6 py-3 gap-3">
+              <p className="text-sm font-medium text-gray-700 dark:text-white">
+                Integrate Authentication to Your Application
+              </p>
+              <CopyButton
+                text={getAuthImplementationPrompt(getBackendUrl())}
+                copyText="Copy Prompt"
+                variant="primary"
+                className="w-34"
+              />
+            </div>
+
+            {/* Preview Content */}
+            <div className="flex-1 overflow-y-auto py-8 flex flex-col items-center justify-center gap-4">
+              <AuthPreview />
+              <p className="text-xs text-gray-500 dark:text-neutral-400 text-center">
+                Preview Mode
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <OAuthConfigDialog
+        provider={selectedProvider}
+        isOpen={isDialogOpen}
+        onClose={handleCloseDialog}
+        onSuccess={handleSuccess}
+      />
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}

package/frontend/src/features/auth/page/ConfigurationPage.tsx

@@ -0,0 +1,395 @@
+import { useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  Input,
+  Switch,
+  Checkbox,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components';
+import {
+  updateAuthConfigRequestSchema,
+  type UpdateAuthConfigRequest,
+} from '@insforge/shared-schemas';
+import { useAuthConfig } from '@/features/auth/hooks/useAuthConfig';
+import { isInsForgeCloudProject } from '@/lib/utils/utils';
+
+export default function ConfigurationPage() {
+  const { config, isLoading, isUpdating, updateConfig } = useAuthConfig();
+
+  const form = useForm<UpdateAuthConfigRequest>({
+    resolver: zodResolver(updateAuthConfigRequestSchema),
+    defaultValues: {
+      requireEmailVerification: false,
+      passwordMinLength: 6,
+      requireNumber: false,
+      requireLowercase: false,
+      requireUppercase: false,
+      requireSpecialChar: false,
+      verifyEmailMethod: 'code',
+      resetPasswordMethod: 'code',
+      signInRedirectTo: null,
+    },
+  });
+
+  // Load configuration when config changes
+  useEffect(() => {
+    if (config) {
+      form.reset({
+        requireEmailVerification: config.requireEmailVerification,
+        passwordMinLength: config.passwordMinLength,
+        requireNumber: config.requireNumber,
+        requireLowercase: config.requireLowercase,
+        requireUppercase: config.requireUppercase,
+        requireSpecialChar: config.requireSpecialChar,
+        verifyEmailMethod: config.verifyEmailMethod,
+        resetPasswordMethod: config.resetPasswordMethod,
+        signInRedirectTo: config.signInRedirectTo ?? null,
+      });
+    }
+  }, [config, form]);
+
+  const handleSubmitData = (data: UpdateAuthConfigRequest) => {
+    updateConfig(data);
+  };
+
+  const handleSubmit = () => {
+    void form.handleSubmit(handleSubmitData)();
+  };
+
+  const handleReset = () => {
+    if (config) {
+      form.reset({
+        requireEmailVerification: config.requireEmailVerification,
+        passwordMinLength: config.passwordMinLength,
+        requireNumber: config.requireNumber,
+        requireLowercase: config.requireLowercase,
+        requireUppercase: config.requireUppercase,
+        requireSpecialChar: config.requireSpecialChar,
+        verifyEmailMethod: config.verifyEmailMethod,
+        resetPasswordMethod: config.resetPasswordMethod,
+        signInRedirectTo: config.signInRedirectTo ?? null,
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="text-sm text-gray-500 dark:text-zinc-400">Loading configuration...</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-y-auto">
+        <div className="p-6 w-full max-w-[1080px] mx-auto">
+          <div className="flex flex-col gap-8">
+            <div>
+              <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+                Configuration
+              </h2>
+            </div>
+
+            <form onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-8">
+              {/* Sign In Redirect URL */}
+              <div className="space-y-6">
+                <div className="bg-white dark:bg-[#333333] rounded-lg p-6 flex items-center gap-10">
+                  <div className="w-100 flex flex-col gap-1">
+                    <label className="text-sm font-medium text-gray-900 dark:text-white">
+                      Redirect URL After Sign In
+                    </label>
+                    <span className="text-xs text-zinc-500 dark:text-neutral-400">
+                      Your app url after successful authentication
+                    </span>
+                  </div>
+                  <div className="w-full max-w-[320px]">
+                    <Input
+                      type="url"
+                      placeholder="https://yourapp.com/dashboard"
+                      {...form.register('signInRedirectTo')}
+                      className={`bg-white dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white ${
+                        form.formState.errors.signInRedirectTo
+                          ? 'border-red-500 dark:border-red-500'
+                          : ''
+                      }`}
+                    />
+                    {form.formState.errors.signInRedirectTo && (
+                      <span className="text-xs text-red-500">
+                        {form.formState.errors.signInRedirectTo.message ||
+                          'Please enter a valid URL'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {isInsForgeCloudProject() && (
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">
+                      Email Verification
+                    </h3>
+                  </div>
+
+                  <div className="bg-white dark:bg-[#333333] rounded-lg p-6 space-y-6">
+                    {/* Email Verification Toggle */}
+                    <div className="flex items-center gap-10">
+                      <div className="w-100 flex flex-col gap-1">
+                        <span className="text-sm font-medium text-gray-900 dark:text-white">
+                          Require Email Verification
+                        </span>
+                        <span className="text-xs text-zinc-500 dark:text-neutral-400">
+                          Users must verify their email address before they can sign in
+                        </span>
+                      </div>
+                      <Controller
+                        name="requireEmailVerification"
+                        control={form.control}
+                        render={({ field }) => (
+                          <div className="w-full max-w-[320px]">
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={(value) => {
+                                field.onChange(value);
+                              }}
+                            />
+                          </div>
+                        )}
+                      />
+                    </div>
+
+                    {/* Verify Email Method - Only shown when email verification is enabled */}
+                    {form.watch('requireEmailVerification') && (
+                      <div className="flex items-center gap-10">
+                        <div className="w-100 flex flex-col gap-1">
+                          <label className="text-sm font-medium text-gray-900 dark:text-white">
+                            Email Verification Method
+                          </label>
+                          <span className="text-xs text-zinc-500 dark:text-neutral-400">
+                            Choose between 6-digit verification code or verification link
+                          </span>
+                        </div>
+                        <Controller
+                          name="verifyEmailMethod"
+                          control={form.control}
+                          render={({ field }) => (
+                            <Select
+                              value={field.value}
+                              onValueChange={(value) => {
+                                if (value) {
+                                  field.onChange(value);
+                                }
+                              }}
+                            >
+                              <SelectTrigger className="w-full max-w-[320px] dark:bg-neutral-700 dark:border-neutral-700">
+                                <span className="text-black dark:text-white">
+                                  {field.value === 'code' ? 'Code' : 'Link'}
+                                </span>
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="code">Code</SelectItem>
+                                <SelectItem value="link">Link</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          )}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Password Requirements Section */}
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">
+                    Password Requirements
+                  </h3>
+                </div>
+
+                <div className="bg-white dark:bg-[#333333] rounded-lg p-6 space-y-6">
+                  {/* Password Length */}
+                  <div className="flex items-center gap-10">
+                    <div className="w-100 flex flex-col gap-1">
+                      <label className="text-sm font-medium text-gray-900 dark:text-white">
+                        Minimum Password Length
+                      </label>
+                      <span className="text-xs text-zinc-500 dark:text-neutral-400">
+                        Must be between 4 and 128 characters
+                      </span>
+                    </div>
+                    <div className="w-full max-w-[320px]">
+                      <Input
+                        type="number"
+                        min="4"
+                        max="128"
+                        {...form.register('passwordMinLength', { valueAsNumber: true })}
+                        className={`bg-white dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white ${
+                          form.formState.errors.passwordMinLength
+                            ? 'border-red-500 dark:border-red-500'
+                            : ''
+                        }`}
+                      />
+                      {form.formState.errors.passwordMinLength && (
+                        <span className="text-xs text-red-500">
+                          {form.formState.errors.passwordMinLength.message ||
+                            'Must be between 4 and 128 characters'}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Password Strength Checkboxes */}
+                  <div className="flex items-start gap-10">
+                    <div className="w-100 flex flex-col gap-1 justify-center">
+                      <label className="text-sm font-medium text-gray-900 dark:text-white">
+                        Password Strength Requirements
+                      </label>
+                    </div>
+                    <div className="w-full max-w-[320px] flex flex-col gap-3 justify-center">
+                      <Controller
+                        name="requireNumber"
+                        control={form.control}
+                        render={({ field }) => (
+                          <label className="flex items-center gap-2 cursor-pointer">
+                            <Checkbox
+                              checked={field.value ?? false}
+                              onChange={(checked) => field.onChange(checked)}
+                            />
+                            <span className="text-sm text-gray-700 dark:text-white">
+                              At least 1 number
+                            </span>
+                          </label>
+                        )}
+                      />
+
+                      <Controller
+                        name="requireSpecialChar"
+                        control={form.control}
+                        render={({ field }) => (
+                          <label className="flex items-center gap-2 cursor-pointer">
+                            <Checkbox
+                              checked={field.value ?? false}
+                              onChange={(checked) => field.onChange(checked)}
+                            />
+                            <span className="text-sm text-gray-700 dark:text-white">
+                              At least 1 special character
+                            </span>
+                          </label>
+                        )}
+                      />
+
+                      <Controller
+                        name="requireLowercase"
+                        control={form.control}
+                        render={({ field }) => (
+                          <label className="flex items-center gap-2 cursor-pointer">
+                            <Checkbox
+                              checked={field.value ?? false}
+                              onChange={(checked) => field.onChange(checked)}
+                            />
+                            <span className="text-sm text-gray-700 dark:text-white">
+                              At least 1 lowercase character
+                            </span>
+                          </label>
+                        )}
+                      />
+
+                      <Controller
+                        name="requireUppercase"
+                        control={form.control}
+                        render={({ field }) => (
+                          <label className="flex items-center gap-2 cursor-pointer">
+                            <Checkbox
+                              checked={field.value ?? false}
+                              onChange={(checked) => field.onChange(checked)}
+                            />
+                            <span className="text-sm text-gray-700 dark:text-white">
+                              At least 1 uppercase character
+                            </span>
+                          </label>
+                        )}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Reset Password Method */}
+                  {isInsForgeCloudProject() && (
+                    <div className="flex items-center gap-10">
+                      <div className="w-100 flex flex-col gap-1">
+                        <label className="text-sm font-medium text-gray-900 dark:text-white">
+                          Password Reset Method
+                        </label>
+                        <span className="text-xs text-zinc-500 dark:text-neutral-400">
+                          Choose between 6-digit reset code or reset link
+                        </span>
+                      </div>
+                      <Controller
+                        name="resetPasswordMethod"
+                        control={form.control}
+                        render={({ field }) => (
+                          <Select
+                            value={field.value}
+                            onValueChange={(value) => {
+                              if (value) {
+                                field.onChange(value);
+                              }
+                            }}
+                          >
+                            <SelectTrigger className="w-full max-w-[320px] dark:bg-neutral-700 dark:border-neutral-700">
+                              <span className="text-black dark:text-white">
+                                {field.value === 'code' ? 'Code' : 'Link'}
+                              </span>
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="code">Code</SelectItem>
+                              <SelectItem value="link">Link</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        )}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Action Buttons - Reserve space even when hidden */}
+              <div className="flex justify-end gap-3 min-h-10">
+                {form.formState.isDirty && (
+                  <>
+                    <Button
+                      type="button"
+                      onClick={handleReset}
+                      disabled={isUpdating}
+                      className="h-10 px-6 bg-white border border-zinc-200 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-zinc-950 hover:bg-zinc-50 dark:bg-neutral-600 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-700"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={handleSubmit}
+                      disabled={isUpdating}
+                      className="h-10 px-6 dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
+                    >
+                      {isUpdating ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </>
+                )}
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}