good morning

2026-09-27 00:12:54 +08:00 · 2026-08-06 08:11:18 +08:00
parent a37a4e9a97
commit 2be8547a52
10 changed files with 114 additions and 355 deletions
@@ -33,6 +33,7 @@ import { PhoneInput } from '@/components/ui/phone-input'
 import { Badge } from '@/components/ui/badge'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
 import {
  AlertDialog,
  AlertDialogAction,
@@ -148,8 +149,8 @@ export function RegisterForm({ className, ...props }) {
  const [searchParams] = useSearchParams()
  const groupCode = searchParams.get('group_code') || ''

-  // 0 = personal, 1 = credentials, 2 = otp
-  const [step, setStep] = useState(0)
+  // 'choice' = Google vs. manual signup entry screen, 0 = personal, 1 = credentials, 2 = otp
+  const [step, setStep] = useState('choice')
  const [pendingEmail, setPendingEmail] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirm, setShowConfirm]   = useState(false)
@@ -177,7 +178,7 @@ export function RegisterForm({ className, ...props }) {
  // server-side account + send an OTP — losing the tab here (slow internet,
  // accidental reload) is what leaves an orphaned unverified account behind.
  useEffect(() => {
-    if (step === 0) return
+    if (step === 'choice' || step === 0) return

    const handleBeforeUnload = (e) => {
      e.preventDefault()
@@ -204,6 +205,11 @@ export function RegisterForm({ className, ...props }) {
    setStep(1)
  }

+  const handleGoogle = () => {
+    const params = groupCode ? `?group_code=${encodeURIComponent(groupCode)}` : ''
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/google${params}`
+  }
+
  // ── Step 2: Credentials ───────────────────────────────────────────────────
  const {
    register: regCreds,
@@ -306,7 +312,60 @@ export function RegisterForm({ className, ...props }) {
  return (
    <>
      <div className={cn('flex flex-col', className)} {...props}>
-        <StepIndicator current={step} />
+        {step !== 'choice' && <StepIndicator current={step} />}
+
+        {/* ── Entry: Google vs. manual signup ── */}
+        {step === 'choice' && (
+          <div className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Create your account.</h1>
+              <p className="text-muted-foreground text-sm">Join Philproperties to start learning.</p>
+            </div>
+
+            {/* Group code notice */}
+            {groupCode && (
+              <div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-2 bg-muted/40">
+                <Users className="size-4 text-muted-foreground shrink-0" />
+                <p className="text-sm text-muted-foreground">
+                  Joining group{' '}
+                  <span className="font-semibold text-foreground">{groupCode}</span>
+                </p>
+              </div>
+            )}
+
+            {/* Google OAuth */}
+            <Button variant="outline" type="button" onClick={handleGoogle} className="w-full">
+              <svg viewBox="0 0 128 128" className="size-4 mr-2">
+                <path fill="#fff" d="M44.59 4.21a63.28 63.28 0 004.33 120.9 67.6 67.6 0 0032.36.35 57.13 57.13 0 0025.9-13.46 57.44 57.44 0 0016-26.26 74.33 74.33 0 001.61-33.58H65.27v24.69h34.47a29.72 29.72 0 01-12.66 19.52 36.16 36.16 0 01-13.93 5.5 41.29 41.29 0 01-15.1 0A37.16 37.16 0 0144 95.74a39.3 39.3 0 01-14.5-19.42 38.31 38.31 0 010-24.63 39.25 39.25 0 019.18-14.91A37.17 37.17 0 0176.13 27a34.28 34.28 0 0113.64 8q5.83-5.8 11.64-11.63c2-2.09 4.18-4.08 6.15-6.22A61.22 61.22 0 0087.2 4.59a64 64 0 00-42.61-.38z" />
+                <path fill="#e33629" d="M44.59 4.21a64 64 0 0142.61.37 61.22 61.22 0 0120.35 12.62c-2 2.14-4.11 4.14-6.15 6.22Q95.58 29.23 89.77 35a34.28 34.28 0 00-13.64-8 37.17 37.17 0 00-37.46 9.74 39.25 39.25 0 00-9.18 14.91L8.76 35.6A63.53 63.53 0 0144.59 4.21z" />
+                <path fill="#f8bd00" d="M3.26 51.5a62.93 62.93 0 015.5-15.9l20.73 16.09a38.31 38.31 0 000 24.63q-10.36 8-20.73 16.08a63.33 63.33 0 01-5.5-40.9z" />
+                <path fill="#587dbd" d="M65.27 52.15h59.52a74.33 74.33 0 01-1.61 33.58 57.44 57.44 0 01-16 26.26c-6.69-5.22-13.41-10.4-20.1-15.62a29.72 29.72 0 0012.66-19.54H65.27c-.01-8.22 0-16.45 0-24.68z" />
+                <path fill="#319f43" d="M8.75 92.4q10.37-8 20.73-16.08A39.3 39.3 0 0044 95.74a37.16 37.16 0 0014.08 6.08 41.29 41.29 0 0015.1 0 36.16 36.16 0 0013.93-5.5c6.69 5.22 13.41 10.4 20.1 15.62a57.13 57.13 0 01-25.9 13.47 67.6 67.6 0 01-32.36-.35 63 63 0 01-23-11.59A63.73 63.73 0 018.75 92.4z" />
+              </svg>
+              Login with Google
+            </Button>
+
+            <div className="relative flex items-center gap-3 text-xs text-muted-foreground">
+              <Separator className="flex-1" />
+              <span>Or continue with</span>
+              <Separator className="flex-1" />
+            </div>
+
+            <Button type="button" className="w-full" onClick={() => setStep(0)}>
+              Proceed
+            </Button>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
+                Sign in
+              </Link>
+            </p>
+          </div>
+        )}

        {/* ── Step 1: Personal info ── */}
        {step === 0 && (
@@ -472,13 +531,21 @@ export function RegisterForm({ className, ...props }) {
              )}
            </div>

-            <Button type="submit" className="w-full mt-1">
-              Proceed
-            </Button>
+            <div className="flex gap-2 mt-1">
+              <Button type="button" variant="outline" className="flex-1" onClick={() => setStep('choice')}>
+                ← Back
+              </Button>
+              <Button type="submit" className="flex-1">
+                Proceed
+              </Button>
+            </div>

            <p className="text-center text-sm text-muted-foreground">
              Already have an account?{' '}
-              <Link to="/login" className="font-medium underline underline-offset-4">
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
                Sign in
              </Link>
            </p>
@@ -621,7 +688,10 @@ export function RegisterForm({ className, ...props }) {

            <p className="text-center text-sm text-muted-foreground">
              Already have an account?{' '}
-              <Link to="/login" className="font-medium underline underline-offset-4">
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
                Sign in
              </Link>
            </p>