insforge 0.3.1

package/frontend/src/features/auth/components/OAuthConfigDialog.tsx

@@ -0,0 +1,303 @@
+import { useEffect } from 'react';
+import { useForm, Controller, useFormState } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ExternalLink } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { Input } from '@/components/radix/Input';
+import { Switch } from '@/components/radix/Switch';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/radix/Dialog';
+import WarningIcon from '@/assets/icons/warning.svg';
+import { CopyButton } from '@/components/CopyButton';
+import { oAuthConfigSchema, OAuthConfigSchema } from '@insforge/shared-schemas';
+import { OAuthProviderInfo } from './AuthMethodTab';
+import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+import { getBackendUrl, isInsForgeCloudProject } from '@/lib/utils/utils';
+
+const getCallbackUrl = (provider?: string) => {
+  // Use backend API URL for OAuth callback
+  return `${getBackendUrl()}/api/auth/oauth/${provider}/callback`;
+};
+
+interface OAuthConfigDialogProps {
+  provider?: OAuthProviderInfo;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function OAuthConfigDialog({
+  provider,
+  isOpen,
+  onClose,
+  onSuccess,
+}: OAuthConfigDialogProps) {
+  const {
+    configs,
+    providerConfig,
+    createConfig,
+    updateConfig,
+    isCreating,
+    isUpdating,
+    setSelectedProvider,
+    isLoadingProvider,
+  } = useOAuthConfig();
+
+  const form = useForm<OAuthConfigSchema & { clientSecret?: string }>({
+    resolver: zodResolver(oAuthConfigSchema.extend({ clientSecret: z.string().optional() })),
+    defaultValues: {
+      provider: provider?.id || 'google',
+      clientId: '',
+      clientSecret: '',
+      useSharedKey: false,
+    },
+  });
+
+  const useSharedKey = form.watch('useSharedKey');
+  const clientId = form.watch('clientId');
+  const clientSecret = form.watch('clientSecret');
+
+  // Use useFormState hook for better reactivity
+  const { isDirty } = useFormState({
+    control: form.control,
+  });
+
+  // Set selected provider and refetch when dialog opens
+  useEffect(() => {
+    if (isOpen && provider) {
+      setSelectedProvider(provider.id);
+    }
+  }, [configs, isOpen, provider, setSelectedProvider]);
+
+  // Load OAuth configuration after fetching
+  useEffect(() => {
+    if (isOpen && provider && !isLoadingProvider) {
+      if (providerConfig) {
+        form.reset({
+          provider: provider.id,
+          clientId: providerConfig.clientId || '',
+          clientSecret: providerConfig.clientSecret || '',
+          useSharedKey: providerConfig.useSharedKey || false,
+        });
+      } else {
+        form.reset({
+          provider: provider.id,
+          clientId: '',
+          clientSecret: '',
+          useSharedKey: isInsForgeCloudProject(),
+        });
+      }
+    }
+  }, [isOpen, provider, providerConfig, form, isLoadingProvider]);
+
+  const handleSubmitData = (data: OAuthConfigSchema & { clientSecret?: string }) => {
+    if (!provider) {
+      return;
+    }
+
+    try {
+      if (providerConfig) {
+        // Update existing config
+        updateConfig({
+          provider: provider.id,
+          config: data.useSharedKey
+            ? { useSharedKey: true }
+            : {
+                clientId: data.clientId,
+                clientSecret: data.clientSecret,
+                useSharedKey: false,
+              },
+        });
+      } else {
+        // Create new config
+        createConfig({
+          provider: provider.id,
+          clientId: data.useSharedKey ? undefined : data.clientId,
+          clientSecret: data.useSharedKey ? undefined : clientSecret,
+          useSharedKey: data.useSharedKey,
+        });
+      }
+
+      // Call success callback if provided
+      if (onSuccess) {
+        onSuccess();
+      }
+      // Close dialog
+      onClose();
+    } catch (error) {
+      console.error('Error saving OAuth config:', error);
+    }
+  };
+
+  const handleSubmit = () => {
+    void handleSubmitData(form.getValues());
+  };
+
+  const saving = isCreating || isUpdating;
+
+  // Use RHF's built-in validation and dirty state
+  const isDisabled = () => {
+    if (saving) {
+      return true;
+    }
+
+    // In update mode, require dirty state
+    if (providerConfig && !isDirty) {
+      return true;
+    }
+
+    // If using shared keys, always allow (no credential validation needed)
+    if (useSharedKey) {
+      return false;
+    }
+
+    // If NOT using shared keys, require both clientId and clientSecret
+    return !clientId || !clientSecret;
+  };
+
+  return (
+    <Dialog open={isOpen && !!provider} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-[700px] dark:bg-neutral-800 dark:text-white p-0 gap-0">
+        <DialogHeader className="px-6 py-3 border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle>{provider?.name}</DialogTitle>
+        </DialogHeader>
+        {isLoadingProvider ? (
+          <div className="p-6 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>
+        ) : (
+          <>
+            <form onSubmit={(e) => e.preventDefault()} className="flex flex-col">
+              <div className="space-y-6 p-6">
+                {/* Shared Keys Toggle */}
+                <div className="flex items-center justify-start gap-2">
+                  <Controller
+                    name="useSharedKey"
+                    control={form.control}
+                    render={({ field }) => {
+                      return (
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={(value) => {
+                            field.onChange(value);
+                          }}
+                        />
+                      );
+                    }}
+                  />
+                  <span className="text-sm font-medium text-gray-900 dark:text-white">
+                    Shared Keys
+                  </span>
+                </div>
+
+                {useSharedKey ? (
+                  /* Shared Keys Enabled */
+                  <div className="space-y-6">
+                    <p className="text-sm text-zinc-500 dark:text-neutral-400">
+                      Shared keys are created by the InsForge team for development. It helps you get
+                      started, but will show a InsForge logo and name on the OAuth screen.
+                    </p>
+
+                    <div className="flex items-center gap-3">
+                      <img src={WarningIcon} alt="Warning" className="h-6 w-6" />
+                      <span className="text-sm font-medium text-zinc-950 dark:text-white">
+                        Shared keys should never be used in production
+                      </span>
+                    </div>
+                  </div>
+                ) : (
+                  /* Shared Keys Disabled */
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2">
+                      <ExternalLink className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                      <a
+                        href={provider?.setupUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 font-medium underline"
+                      >
+                        Create a {provider?.name.split(' ')[0]} OAuth App
+                      </a>
+                      <span className="text-sm font-normal text-zinc-950 dark:text-white">
+                        {' '}
+                        and set the callback url to:
+                      </span>
+                    </div>
+
+                    <div className="space-x-3">
+                      <div className="flex items-center gap-2">
+                        <code className="flex items-center py-1 px-3 bg-blue-100 dark:bg-neutral-700 text-blue-800 dark:text-blue-300 font-mono break-all rounded-md text-sm">
+                          {getCallbackUrl(provider?.id)}
+                        </code>
+                        <CopyButton className="h-9" text={getCallbackUrl(provider?.id)} />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+              {!useSharedKey && (
+                <div className="space-y-6 p-6 border-t border-zinc-200 dark:border-neutral-700">
+                  <div className="flex flex-row items-center justify-between gap-10">
+                    <label className="text-sm text-zinc-950 dark:text-white">Client ID</label>
+                    <Input
+                      type="text"
+                      {...form.register('clientId')}
+                      placeholder={`Enter ${provider?.name.split(' ')[0]} OAuth App ID`}
+                      className="w-[340px] dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white"
+                    />
+                  </div>
+
+                  <div className="flex flex-row items-center justify-between gap-10">
+                    <label className="text-sm text-zinc-950 dark:text-white">Client Secret</label>
+                    <Input
+                      type="password"
+                      {...form.register('clientSecret')}
+                      placeholder={`Enter ${provider?.name.split(' ')[0]} OAuth App Secret`}
+                      className="w-[340px] dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white"
+                    />
+                  </div>
+                </div>
+              )}
+            </form>
+
+            <DialogFooter className="p-6 border-t border-zinc-200 dark:border-neutral-700">
+              <Button
+                type="button"
+                className="h-9 w-30 px-3 py-2 dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+                variant="outline"
+                onClick={onClose}
+                disabled={saving}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                onClick={handleSubmit}
+                disabled={isDisabled()}
+                className="h-9 w-30 px-3 py-2 dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
+              >
+                {saving
+                  ? providerConfig
+                    ? 'Updating...'
+                    : 'Adding...'
+                  : providerConfig
+                    ? 'Update'
+                    : 'Add OAuth'}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/auth/components/OAuthEmptyState.tsx

@@ -0,0 +1,15 @@
+import { Lock } from 'lucide-react';
+
+export function OAuthEmptyState() {
+  return (
+    <div className="text-center flex flex-col items-center justify-center gap-3 text-zinc-500 py-8 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Lock className="mx-auto h-10 w-10 text-neutral-400 dark:text-neutral-600" />
+      <div className="flex flex-col items-center justify-center gap-1">
+        <p className="text-sm font-medium text-zinc-900 dark:text-white">No Authentications Yet</p>
+        <p className="text-xs text-neutral-600 dark:text-neutral-400 font-medium">
+          Add your first authentication to get started
+        </p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/auth/components/UserFormDialog.tsx

@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from 'react';
+import { Mail, Lock, AlertCircle } from 'lucide-react';
+import { authService } from '@/features/auth/services/auth.service';
+import { Button, Input, Label, Alert, AlertDescription } from '@/components';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/radix/Dialog';
+import ErrorIcon from '@/assets/icons/error.svg';
+import { useToast } from '@/lib/hooks/useToast';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+import { emailSchema } from '@/lib/utils/validation-schemas';
+import { z } from 'zod';
+
+interface User {
+  id?: string;
+  email: string;
+  password?: string;
+  name?: string;
+}
+
+interface UserFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user?: User | null;
+}
+
+// Validation helpers
+const validateEmail = (email: string): string => {
+  if (!email.trim()) {
+    return 'Cannot leave empty';
+  }
+  try {
+    emailSchema.parse(email);
+    return '';
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return 'Incorrect format';
+    }
+    return 'Invalid email';
+  }
+};
+
+const validatePassword = (password: string): string => {
+  if (!password.trim()) {
+    return 'Cannot leave empty';
+  }
+  return '';
+};
+
+export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // Validation states
+  const [emailError, setEmailError] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [showValidation, setShowValidation] = useState(false);
+
+  const { showToast } = useToast();
+  const { refetch } = useUsers();
+
+  const isEditing = !!user;
+
+  useEffect(() => {
+    if (user) {
+      setEmail(user.email);
+      setPassword('');
+    } else {
+      setEmail('');
+      setPassword('');
+    }
+    setError('');
+    setEmailError('');
+    setPasswordError('');
+    setShowValidation(false);
+  }, [user, open]);
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    // Clear error when user starts typing
+    if (emailError && showValidation) {
+      const error = validateEmail(e.target.value);
+      setEmailError(error);
+    }
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    // Clear error when user starts typing
+    if (passwordError && showValidation) {
+      const error = validatePassword(e.target.value);
+      setPasswordError(error);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validate all fields
+    const emailValidationError = validateEmail(email);
+    const passwordValidationError = validatePassword(password);
+
+    setEmailError(emailValidationError);
+    setPasswordError(passwordValidationError);
+    setShowValidation(true);
+
+    if (emailValidationError || passwordValidationError) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const userData: User = { email };
+      if (password) {
+        userData.password = password;
+      }
+      if (isEditing && user?.id) {
+        userData.id = user.id;
+      }
+
+      await authService.register(userData.email, userData.password || '', userData.name);
+      void refetch();
+      onOpenChange(false);
+      showToast('User created successfully', 'success');
+    } catch (err) {
+      showToast(err instanceof Error ? err.message : 'Failed to create user', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px] dark:bg-neutral-800 dark:text-white p-0 gap-0">
+        <DialogHeader className="px-6 py-3 border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle className="h-7">Add User</DialogTitle>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => {
+            void handleSubmit(e);
+          }}
+          className="flex flex-col"
+        >
+          <div className="space-y-6 p-6">
+            {/* Email Field */}
+            <div className="flex flex-row gap-10 justify-between items-center">
+              <div className="flex flex-row gap-2 items-center">
+                <Mail className="h-5 w-5 text-neutral-500" />
+                <Label htmlFor="user-email" className="text-sm text-zinc-950 dark:text-neutral-50">
+                  Email
+                </Label>
+              </div>
+              <div className="flex flex-col space-y-1">
+                <Input
+                  id="user-email"
+                  type="email"
+                  placeholder="user@example.com"
+                  value={email}
+                  onChange={handleEmailChange}
+                  className={`w-70 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white ${emailError && showValidation ? 'border-red-500 focus:border-red-500' : ''}`}
+                  autoFocus={false}
+                />
+                {emailError && showValidation && (
+                  <div className="flex items-center gap-1">
+                    <img src={ErrorIcon} alt="Error" className="h-4 w-4" />
+                    <p className="text-xs font-medium text-red-600 dark:text-red-500">
+                      {emailError}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Password Field */}
+            <div className="flex flex-row gap-10 justify-between items-center">
+              <div className="flex flex-row gap-2 items-center">
+                <Lock className="h-5 w-5 text-neutral-500" />
+                <Label
+                  htmlFor="user-password"
+                  className="text-sm text-zinc-950 dark:text-neutral-50"
+                >
+                  Password
+                </Label>
+              </div>
+              <div className="flex flex-col space-y-1">
+                <Input
+                  id="user-password"
+                  type="password"
+                  placeholder="Enter password"
+                  value={password}
+                  onChange={handlePasswordChange}
+                  className={`w-70 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:border-neutral-700 dark:text-white ${passwordError && showValidation ? 'border-red-500 focus:border-red-500' : ''}`}
+                />
+                {passwordError && showValidation && (
+                  <div className="flex items-center gap-1">
+                    <img src={ErrorIcon} alt="Error" className="h-4 w-4" />
+                    <p className="text-xs font-medium text-red-600 dark:text-red-500">
+                      {passwordError}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Error Alert */}
+            {error && (
+              <div className="mx-6 mb-6 shrink-0">
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              </div>
+            )}
+          </div>
+          {/* Footer Buttons */}
+          <DialogFooter className="p-6 border-t border-zinc-200 dark:border-neutral-700">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+              className="h-9 w-30 px-3 py-2 dark:bg-neutral-600 dark:border-transparent dark:text-white dark:hover:bg-neutral-700"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading || email === '' || password === ''}
+              className="h-9 w-30 px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white disabled:opacity-50 disabled:cursor-not-allowed dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400"
+            >
+              Add
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default UserFormDialog;