realtimex-crm 0.5.7 → 0.6.3

package/src/components/supabase/forgot-password-page.tsx

@@ -1,28 +1,48 @@
 import { useState } from "react";
-import { useResetPassword } from "ra-supabase-core";
 import { Form, required, useNotify, useTranslate } from "ra-core";
 import { Layout } from "@/components/supabase/layout";
 import type { FieldValues, SubmitHandler } from "react-hook-form";
 import { TextInput } from "@/components/admin/text-input";
 import { Button } from "@/components/ui/button";
+import { OtpInput } from "@/components/supabase/otp-input";
+import { supabase } from "@/components/atomic-crm/providers/supabase/supabase";
 
-interface FormData {
+interface EmailFormData {
   email: string;
 }
 
+type Step = 'email' | 'otp';
+
 export const ForgotPasswordPage = () => {
   const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState<Step>('email');
+  const [email, setEmail] = useState('');
+  const [otp, setOtp] = useState('');
+  const [otpError, setOtpError] = useState(false);
 
   const notify = useNotify();
   const translate = useTranslate();
-  const [, { mutateAsync: resetPassword }] = useResetPassword();
 
-  const submit = async (values: FormData) => {
+  const submitEmail = async (values: EmailFormData) => {
     try {
       setLoading(true);
-      await resetPassword({
-        email: values.email,
+      // Normalize email to lowercase
+      const normalizedEmail = values.email.trim().toLowerCase();
+      setEmail(normalizedEmail);
+
+      const { error } = await supabase.auth.signInWithOtp({
+        email: normalizedEmail,
+        options: {
+          shouldCreateUser: false, // Only allow existing users to reset password
+        },
       });
+
+      if (error) {
+        throw error;
+      }
+
+      notify('A 6-digit code has been sent to your email', { type: 'success' });
+      setStep('otp');
     } catch (error: any) {
       notify(
         typeof error === "string"
@@ -47,38 +67,163 @@ export const ForgotPasswordPage = () => {
     }
   };
 
+  const verifyOtp = async (otpCode: string) => {
+    try {
+      setLoading(true);
+      setOtpError(false);
+
+      // Trim whitespace from OTP code
+      const cleanOtp = otpCode.trim();
+
+      console.log('Verifying OTP (forgot password):', { email, token: cleanOtp, type: 'email' });
+
+      const { data, error } = await supabase.auth.verifyOtp({
+        email: email.trim().toLowerCase(), // Normalize email
+        token: cleanOtp,
+        type: 'magiclink', // Changed from 'email' - some Supabase versions treat OTP as magiclink
+      });
+
+      console.log('OTP Verification result:', { data, error });
+
+      if (error) {
+        throw error;
+      }
+
+      if (!data.session) {
+        throw new Error('Failed to create session');
+      }
+
+      console.log('Session created successfully for password reset');
+
+      // User is now logged in, redirect to change password page
+      notify('Code verified! Please set your new password.', { type: 'success' });
+
+      // IMPORTANT: Don't call login() - user is already authenticated via Supabase
+      // The OTP verification already set the session
+      // Calling login({}) with empty params could cause session confusion
+
+      // Navigate to change password page with reload
+      console.log('Navigating to /change-password');
+      window.location.href = '#/change-password';
+      window.location.reload();
+    } catch (error: any) {
+      setOtpError(true);
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "Invalid or expired code"
+            : error.message,
+        {
+          type: "warning",
+          messageArgs: {
+            _:
+              typeof error === "string"
+                ? error
+                : error && error.message
+                  ? error.message
+                  : undefined,
+          },
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOtpComplete = (otpCode: string) => {
+    verifyOtp(otpCode);
+  };
+
+  const handleResendCode = async () => {
+    setOtp('');
+    setOtpError(false);
+    await submitEmail({ email });
+  };
+
   return (
     <Layout>
-      <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-2xl font-semibold tracking-tight">
-          {translate("ra-supabase.reset_password.forgot_password", {
-            _: "Forgot password?",
-          })}
-        </h1>
-        <p>
-          {translate("ra-supabase.reset_password.forgot_password_details", {
-            _: "Enter your email to receive a reset password link.",
-          })}
-        </p>
-      </div>
-      <Form<FormData>
-        className="space-y-8"
-        onSubmit={submit as SubmitHandler<FieldValues>}
-      >
-        <TextInput
-          source="email"
-          label={translate("ra.auth.email", {
-            _: "Email",
-          })}
-          autoComplete="email"
-          validate={required()}
-        />
-        <Button type="submit" className="cursor-pointer" disabled={loading}>
-          {translate("ra.action.reset_password", {
-            _: "Reset password",
-          })}
-        </Button>
-      </Form>
+      {step === 'email' ? (
+        <>
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {translate("ra-supabase.reset_password.forgot_password", {
+                _: "Forgot password?",
+              })}
+            </h1>
+            <p>
+              {translate("ra-supabase.reset_password.forgot_password_details", {
+                _: "Enter your email to receive a 6-digit code.",
+              })}
+            </p>
+          </div>
+          <Form<EmailFormData>
+            className="space-y-8"
+            onSubmit={submitEmail as SubmitHandler<FieldValues>}
+          >
+            <TextInput
+              source="email"
+              label={translate("ra.auth.email", {
+                _: "Email",
+              })}
+              autoComplete="email"
+              validate={required()}
+            />
+            <Button type="submit" className="cursor-pointer w-full" disabled={loading}>
+              {translate("ra.action.reset_password", {
+                _: "Send code",
+              })}
+            </Button>
+          </Form>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Enter verification code
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              We've sent a 6-digit code to {email}
+            </p>
+          </div>
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <OtpInput
+                length={6}
+                value={otp}
+                onChange={setOtp}
+                onComplete={handleOtpComplete}
+                disabled={loading}
+                error={otpError}
+              />
+              {otpError && (
+                <p className="text-sm text-destructive text-center">
+                  Invalid or expired code. Please try again.
+                </p>
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <Button
+                type="button"
+                className="cursor-pointer w-full"
+                disabled={loading || otp.length !== 6}
+                onClick={() => verifyOtp(otp)}
+              >
+                {loading ? 'Verifying...' : 'Verify code'}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer w-full"
+                disabled={loading}
+                onClick={handleResendCode}
+              >
+                Resend code
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
     </Layout>
   );
 };

package/src/components/supabase/otp-input.tsx

@@ -0,0 +1,116 @@
+import { useRef, useState, KeyboardEvent, ClipboardEvent } from 'react';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+interface OtpInputProps {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  disabled?: boolean;
+  error?: boolean;
+}
+
+export function OtpInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  error = false,
+}: OtpInputProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const handleChange = (index: number, inputValue: string) => {
+    // Only allow digits
+    const digit = inputValue.replace(/[^0-9]/g, '');
+
+    if (digit.length === 0) {
+      // Handle backspace/delete
+      const newValue = value.split('');
+      newValue[index] = '';
+      const updatedValue = newValue.join('');
+      onChange(updatedValue);
+
+      // Move to previous input
+      if (index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+      return;
+    }
+
+    // Update the value at the current index
+    const newValue = value.split('');
+    newValue[index] = digit[0];
+    const updatedValue = newValue.join('');
+    onChange(updatedValue);
+
+    // Move to next input if not the last one
+    if (index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Check if OTP is complete
+    if (updatedValue.length === length && onComplete) {
+      onComplete(updatedValue);
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Backspace' && !value[index] && index > 0) {
+      // If current input is empty and backspace is pressed, move to previous
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text/plain');
+    const digits = pastedData.replace(/[^0-9]/g, '').slice(0, length);
+
+    onChange(digits);
+
+    // Focus the next empty input or the last input
+    const nextIndex = Math.min(digits.length, length - 1);
+    inputRefs.current[nextIndex]?.focus();
+
+    // Check if OTP is complete
+    if (digits.length === length && onComplete) {
+      onComplete(digits);
+    }
+  };
+
+  return (
+    <div className="flex gap-2 justify-center">
+      {Array.from({ length }).map((_, index) => (
+        <Input
+          key={index}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
+          type="text"
+          inputMode="numeric"
+          maxLength={1}
+          value={value[index] || ''}
+          onChange={(e) => handleChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex(null)}
+          disabled={disabled}
+          className={cn(
+            'w-12 h-12 text-center text-lg font-semibold',
+            error && 'border-destructive focus-visible:ring-destructive',
+            focusedIndex === index && 'ring-2 ring-ring'
+          )}
+          aria-label={`Digit ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/supabase/otp-login-page.tsx

@@ -0,0 +1,254 @@
+import { useState } from "react";
+import { Form, required, useNotify, useTranslate } from "ra-core";
+import { Layout } from "@/components/supabase/layout";
+import type { FieldValues, SubmitHandler } from "react-hook-form";
+import { TextInput } from "@/components/admin/text-input";
+import { Button } from "@/components/ui/button";
+import { OtpInput } from "@/components/supabase/otp-input";
+import { supabase } from "@/components/atomic-crm/providers/supabase/supabase";
+
+interface EmailFormData {
+  email: string;
+}
+
+type Step = 'email' | 'otp';
+
+export const OtpLoginPage = () => {
+  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState<Step>('email');
+  const [email, setEmail] = useState('');
+  const [otp, setOtp] = useState('');
+  const [otpError, setOtpError] = useState(false);
+
+  const notify = useNotify();
+  const translate = useTranslate();
+
+  const submitEmail = async (values: EmailFormData) => {
+    try {
+      setLoading(true);
+      // Normalize email to lowercase
+      const normalizedEmail = values.email.trim().toLowerCase();
+      setEmail(normalizedEmail);
+
+      const { error } = await supabase.auth.signInWithOtp({
+        email: normalizedEmail,
+        options: {
+          shouldCreateUser: false, // Only allow existing users
+        },
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      notify('A 6-digit code has been sent to your email', { type: 'success' });
+      setStep('otp');
+    } catch (error: any) {
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "ra.auth.sign_in_error"
+            : error.message,
+        {
+          type: "warning",
+          messageArgs: {
+            _:
+              typeof error === "string"
+                ? error
+                : error && error.message
+                  ? error.message
+                  : undefined,
+          },
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const verifyOtp = async (otpCode: string) => {
+    try {
+      setLoading(true);
+      setOtpError(false);
+
+      // Trim whitespace from OTP code
+      const cleanOtp = otpCode.trim();
+
+      console.log('Verifying OTP:', { email, token: cleanOtp, type: 'email' });
+
+      const { data, error } = await supabase.auth.verifyOtp({
+        email: email.trim().toLowerCase(), // Normalize email
+        token: cleanOtp,
+        type: 'magiclink', // Changed from 'email' - some Supabase versions treat OTP as magiclink
+      });
+
+      console.log('OTP Verification result:', { data, error });
+
+      if (error) {
+        throw error;
+      }
+
+      if (!data.session) {
+        throw new Error('Failed to create session');
+      }
+
+      console.log('Session created successfully, user:', data.user);
+
+      // Check if user exists in sales table (access control)
+      console.log('Checking sales table for user_id:', data.user.id);
+      const { data: saleData, error: saleError } = await supabase
+        .from('sales')
+        .select('id, email_confirmed_at')
+        .eq('user_id', data.user.id)
+        .single();
+
+      console.log('Sales table query result:', { saleData, saleError });
+
+      if (saleError || !saleData) {
+        // User authenticated but not in sales table - deny access
+        console.error('User not found in sales table or query error');
+        await supabase.auth.signOut();
+        throw new Error('You do not have access to this application. Please contact your administrator.');
+      }
+
+      // User is logged in and authorized
+      console.log('User authorized, OTP verification complete');
+      notify('Login successful!', { type: 'success' });
+
+      // IMPORTANT: Don't call login() - user is already authenticated via Supabase
+      // The OTP verification already set the session
+      // Calling login({}) with empty params could cause session confusion
+
+      // Force reload to ensure clean state
+      console.log('Reloading to establish session...');
+
+      // Check if this is their first login (email not confirmed yet)
+      if (!saleData.email_confirmed_at) {
+        // Navigate to change password
+        window.location.href = '#/change-password';
+        window.location.reload();
+      } else {
+        // Navigate to dashboard
+        window.location.href = '#/';
+        window.location.reload();
+      }
+    } catch (error: any) {
+      setOtpError(true);
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+            ? "Invalid or expired code"
+            : error.message,
+        {
+          type: "warning",
+          messageArgs: {
+            _:
+              typeof error === "string"
+                ? error
+                : error && error.message
+                  ? error.message
+                  : undefined,
+          },
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOtpComplete = (otpCode: string) => {
+    verifyOtp(otpCode);
+  };
+
+  const handleResendCode = async () => {
+    setOtp('');
+    setOtpError(false);
+    await submitEmail({ email });
+  };
+
+  return (
+    <Layout>
+      {step === 'email' ? (
+        <>
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Login with code
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Enter your email to receive a 6-digit login code
+            </p>
+          </div>
+          <Form<EmailFormData>
+            className="space-y-8"
+            onSubmit={submitEmail as SubmitHandler<FieldValues>}
+          >
+            <TextInput
+              source="email"
+              label={translate("ra.auth.email", {
+                _: "Email",
+              })}
+              autoComplete="email"
+              validate={required()}
+            />
+            <Button type="submit" className="cursor-pointer w-full" disabled={loading}>
+              {translate("ra.action.send_code", {
+                _: "Send code",
+              })}
+            </Button>
+          </Form>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Enter verification code
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              We've sent a 6-digit code to {email}
+            </p>
+          </div>
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <OtpInput
+                length={6}
+                value={otp}
+                onChange={setOtp}
+                onComplete={handleOtpComplete}
+                disabled={loading}
+                error={otpError}
+              />
+              {otpError && (
+                <p className="text-sm text-destructive text-center">
+                  Invalid or expired code. Please try again.
+                </p>
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <Button
+                type="button"
+                className="cursor-pointer w-full"
+                disabled={loading || otp.length !== 6}
+                onClick={() => verifyOtp(otp)}
+              >
+                {loading ? 'Verifying...' : 'Verify code'}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer w-full"
+                disabled={loading}
+                onClick={handleResendCode}
+              >
+                Resend code
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </Layout>
+  );
+};
+
+OtpLoginPage.path = "otp-login";