only show GitHub button / dialog during onboarding

hub/site/src/components/login/auth-form.tsx

@@ -13,7 +13,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from '@/components/ui/dialog'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { AuthMethodsList, OAuth2AuthConfig } from 'pocketbase'
 import { Link } from '../router'
 
@@ -67,57 +67,60 @@ export function UserAuthForm({
 	const [isOauthLoading, setIsOauthLoading] = useState<boolean>(false)
 	const [errors, setErrors] = useState<Record<string, string | undefined>>({})
 
-	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+	const handleSubmit = useCallback(
-		e.preventDefault()
+		async (e: React.FormEvent<HTMLFormElement>) => {
-		setIsLoading(true)
+			e.preventDefault()
-		try {
+			setIsLoading(true)
-			const formData = new FormData(e.target as HTMLFormElement)
+			try {
-			const data = Object.fromEntries(formData) as Record<string, any>
+				const formData = new FormData(e.target as HTMLFormElement)
-			const Schema = isFirstRun ? RegisterSchema : LoginSchema
+				const data = Object.fromEntries(formData) as Record<string, any>
-			const result = v.safeParse(Schema, data)
+				const Schema = isFirstRun ? RegisterSchema : LoginSchema
-			if (!result.success) {
+				const result = v.safeParse(Schema, data)
-				console.log(result)
+				if (!result.success) {
-				let errors = {}
+					console.log(result)
-				for (const issue of result.issues) {
+					let errors = {}
-					// @ts-ignore
+					for (const issue of result.issues) {
-					errors[issue.path[0].key] = issue.message
+						// @ts-ignore
-				}
+						errors[issue.path[0].key] = issue.message
-				setErrors(errors)
+					}
-				return
+					setErrors(errors)
-			}
-			const { email, password, passwordConfirm, username } = result.output
-			if (isFirstRun) {
-				// check that passwords match
-				if (password !== passwordConfirm) {
-					let msg = 'Passwords do not match'
-					setErrors({ passwordConfirm: msg })
 					return
 				}
-				await pb.admins.create({
+				const { email, password, passwordConfirm, username } = result.output
-					email,
+				if (isFirstRun) {
-					password,
+					// check that passwords match
-					passwordConfirm: password,
+					if (password !== passwordConfirm) {
-				})
+						let msg = 'Passwords do not match'
-				await pb.admins.authWithPassword(email, password)
+						setErrors({ passwordConfirm: msg })
-				await pb.collection('users').create({
+						return
-					username,
+					}
-					email,
+					await pb.admins.create({
-					password,
+						email,
-					passwordConfirm: password,
+						password,
-					role: 'admin',
+						passwordConfirm: password,
-					verified: true,
+					})
-				})
+					await pb.admins.authWithPassword(email, password)
-				await pb.collection('users').authWithPassword(email, password)
+					await pb.collection('users').create({
-			} else {
+						username,
-				await pb.collection('users').authWithPassword(email, password)
+						email,
+						password,
+						passwordConfirm: password,
+						role: 'admin',
+						verified: true,
+					})
+					await pb.collection('users').authWithPassword(email, password)
+				} else {
+					await pb.collection('users').authWithPassword(email, password)
+				}
+				$authenticated.set(true)
+			} catch (e) {
+				showLoginFaliedToast()
+			} finally {
+				setIsLoading(false)
 			}
-			$authenticated.set(true)
+		},
-		} catch (e) {
+		[isFirstRun]
-			showLoginFaliedToast()
+	)
-		} finally {
-			setIsLoading(false)
-		}
-	}
 
 	if (!authMethods) {
 		return null
@@ -225,14 +228,17 @@ export function UserAuthForm({
 							</button>
 						</div>
 					</form>
-					<div className="relative">
+					{(isFirstRun || authMethods.authProviders.length > 0) && (
-						<div className="absolute inset-0 flex items-center">
+						// only show 'continue with' during onboarding or if we have auth providers
-							<span className="w-full border-t" />
+						<div className="relative">
+							<div className="absolute inset-0 flex items-center">
+								<span className="w-full border-t" />
+							</div>
+							<div className="relative flex justify-center text-xs uppercase">
+								<span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+							</div>
 						</div>
-						<div className="relative flex justify-center text-xs uppercase">
+					)}
-							<span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-						</div>
-					</div>
 				</>
 			)}
 
@@ -297,7 +303,8 @@ export function UserAuthForm({
 				</div>
 			)}
 
-			{!authMethods.authProviders.length && (
+			{!authMethods.authProviders.length && isFirstRun && (
+				// only show GitHub button / dialog during onboarding
 				<Dialog>
 					<DialogTrigger asChild>
 						<button type="button" className={cn(buttonVariants({ variant: 'outline' }))}>