feat: Enhance login forms with last used authentication method

apps/web/src/pages/auth/login.tsx

@@ -23,7 +23,7 @@ import {NextSeo} from 'next-seo';
 import Image from 'next/image';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useForm} from 'react-hook-form';
 import type {z} from 'zod';
 
@@ -57,8 +57,16 @@ export default function Login() {
     },
   });
 
+  const [lastUsed, setLastUsed] = useState<'email' | 'google' | 'github' | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [showReset, setShowReset] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('plunk_last_auth_method');
+    if (stored === 'email' || stored === 'google' || stored === 'github') {
+      setLastUsed(stored);
+    }
+  }, []);
   const [resetEmail, setResetEmail] = useState('');
   const [resetStatus, setResetStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
   const [resetError, setResetError] = useState<string | null>(null);
@@ -82,6 +90,7 @@ export default function Login() {
         setErrorMessage('Email or password is incorrect');
       } else {
         setErrorMessage(null);
+        localStorage.setItem('plunk_last_auth_method', 'email');
 
         await userMutate();
         await projectsMutate();
@@ -157,11 +166,13 @@ export default function Login() {
                       <>
                         <div className="grid gap-2">
                           {oauthConfig.google && (
+                            <div className="relative">
                               <Button
                                 type="button"
                                 variant="outline"
                                 className="w-full"
                                 onClick={() => {
+                                  localStorage.setItem('plunk_last_auth_method', 'google');
                                   window.location.href = `${API_URI}/oauth/google/outbound`;
                                 }}
                               >
@@ -185,13 +196,21 @@ export default function Login() {
                                 </svg>
                                 Continue with Google
                               </Button>
+                              {lastUsed === 'google' && (
+                                <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-neutral-400">
+                                  Last used
+                                </span>
+                              )}
+                            </div>
                           )}
                           {oauthConfig.github && (
+                            <div className="relative">
                               <Button
                                 type="button"
                                 variant="outline"
                                 className="w-full"
                                 onClick={() => {
+                                  localStorage.setItem('plunk_last_auth_method', 'github');
                                   window.location.href = `${API_URI}/oauth/github/outbound`;
                                 }}
                               >
@@ -200,6 +219,12 @@ export default function Login() {
                                 </svg>
                                 Continue with GitHub
                               </Button>
+                              {lastUsed === 'github' && (
+                                <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-neutral-400">
+                                  Last used
+                                </span>
+                              )}
+                            </div>
                           )}
                         </div>
                         <div className="relative">
@@ -219,7 +244,12 @@ export default function Login() {
                         name="email"
                         render={({field}) => (
                           <FormItem>
+                            <div className="flex items-center gap-2">
                               <FormLabel>Email</FormLabel>
+                              {lastUsed === 'email' && (
+                                <span className="text-[10px] text-neutral-400">Last used</span>
+                              )}
+                            </div>
                             <FormControl>
                               <Input placeholder="[email protected]" autoFocus {...field} />
                             </FormControl>