pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-05 18:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix log in loading button

Browse Source
This commit is contained in:
miloschwartz
2025-07-21 17:26:02 -07:00
parent 114ce8997f
commit b54ccbfa2f
1 changed files with 112 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/LoginForm.tsx
View File

@@ -63,7 +63,6 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [securityKeyLoading, setSecurityKeyLoading] = useState(false);
const hasIdp = idps && idps.length > 0; const hasIdp = idps && idps.length > 0;
const [mfaRequested, setMfaRequested] = useState(false); const [mfaRequested, setMfaRequested] = useState(false);
@@ -72,14 +71,12 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
const t = useTranslations(); const t = useTranslations();
const formSchema = z.object({ const formSchema = z.object({
email: z.string().email({ message: t('emailInvalid') }), email: z.string().email({ message: t("emailInvalid") }),
password: z password: z.string().min(8, { message: t("passwordRequirementsChars") })
.string()
.min(8, { message: t('passwordRequirementsChars') })
}); });
const mfaSchema = z.object({ const mfaSchema = z.object({
code: z.string().length(6, { message: t('pincodeInvalid') }) code: z.string().length(6, { message: t("pincodeInvalid") })
}); });
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
@@ -99,17 +96,23 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
async function initiateSecurityKeyAuth() { async function initiateSecurityKeyAuth() {
setShowSecurityKeyPrompt(true); setShowSecurityKeyPrompt(true);
setSecurityKeyLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
// Start WebAuthn authentication without email // Start WebAuthn authentication without email
const startRes = await api.post("/auth/security-key/authenticate/start", {}); const startRes = await api.post(
"/auth/security-key/authenticate/start",
{}
);
if (!startRes) { if (!startRes) {
setError(t('securityKeyAuthError', { setError(
defaultValue: "Failed to start security key authentication" t("securityKeyAuthError", {
})); defaultValue:
"Failed to start security key authentication"
})
);
return; return;
} }
@@ -125,7 +128,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
{ credential }, { credential },
{ {
headers: { headers: {
'X-Temp-Session-Id': tempSessionId "X-Temp-Session-Id": tempSessionId
} }
} }
); );
@@ -136,39 +139,61 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
} }
} }
} catch (error: any) { } catch (error: any) {
if (error.name === 'NotAllowedError') { if (error.name === "NotAllowedError") {
if (error.message.includes('denied permission')) { if (error.message.includes("denied permission")) {
setError(t('securityKeyPermissionDenied', { setError(
defaultValue: "Please allow access to your security key to continue signing in." t("securityKeyPermissionDenied", {
})); defaultValue:
"Please allow access to your security key to continue signing in."
})
);
} else { } else {
setError(t('securityKeyRemovedTooQuickly', { setError(
defaultValue: "Please keep your security key connected until the sign-in process completes." t("securityKeyRemovedTooQuickly", {
})); defaultValue:
"Please keep your security key connected until the sign-in process completes."
})
);
} }
} else if (error.name === 'NotSupportedError') { } else if (error.name === "NotSupportedError") {
setError(t('securityKeyNotSupported', { setError(
defaultValue: "Your security key may not be compatible. Please try a different security key." t("securityKeyNotSupported", {
})); defaultValue:
"Your security key may not be compatible. Please try a different security key."
})
);
} else { } else {
setError(t('securityKeyUnknownError', { setError(
defaultValue: "There was a problem using your security key. Please try again." t("securityKeyUnknownError", {
})); defaultValue:
"There was a problem using your security key. Please try again."
})
);
} }
} }
} catch (e: any) { } catch (e: any) {
if (e.isAxiosError) { if (e.isAxiosError) {
setError(formatAxiosError(e, t('securityKeyAuthError', { setError(
defaultValue: "Failed to authenticate with security key" formatAxiosError(
}))); e,
t("securityKeyAuthError", {
defaultValue:
"Failed to authenticate with security key"
})
)
);
} else { } else {
console.error(e); console.error(e);
setError(e.message || t('securityKeyAuthError', { setError(
defaultValue: "Failed to authenticate with security key" e.message ||
})); t("securityKeyAuthError", {
defaultValue:
"Failed to authenticate with security key"
})
);
} }
} finally { } finally {
setSecurityKeyLoading(false); setLoading(false);
setShowSecurityKeyPrompt(false); setShowSecurityKeyPrompt(false);
} }
} }
@@ -182,11 +207,14 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
setShowSecurityKeyPrompt(false); setShowSecurityKeyPrompt(false);
try { try {
const res = await api.post<AxiosResponse<LoginResponse>>("/auth/login", { const res = await api.post<AxiosResponse<LoginResponse>>(
email, "/auth/login",
password, {
code email,
}); password,
code
}
);
const data = res.data.data; const data = res.data.data;
@@ -212,7 +240,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
} }
if (data?.twoFactorSetupRequired) { if (data?.twoFactorSetupRequired) {
const setupUrl = `/auth/2fa/setup?email=${encodeURIComponent(email)}${redirect ? `&redirect=${encodeURIComponent(redirect)}` : ''}`; const setupUrl = `/auth/2fa/setup?email=${encodeURIComponent(email)}${redirect ? `&redirect=${encodeURIComponent(redirect)}` : ""}`;
router.push(setupUrl); router.push(setupUrl);
return; return;
} }
@@ -222,16 +250,22 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
} }
} catch (e: any) { } catch (e: any) {
if (e.isAxiosError) { if (e.isAxiosError) {
const errorMessage = formatAxiosError(e, t('loginError', { const errorMessage = formatAxiosError(
defaultValue: "Failed to log in" e,
})); t("loginError", {
defaultValue: "Failed to log in"
})
);
setError(errorMessage); setError(errorMessage);
return; return;
} else { } else {
console.error(e); console.error(e);
setError(e.message || t('loginError', { setError(
defaultValue: "Failed to log in" e.message ||
})); t("loginError", {
defaultValue: "Failed to log in"
})
);
return; return;
} }
} finally { } finally {
@@ -251,7 +285,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
console.log(res); console.log(res);
if (!res) { if (!res) {
setError(t('loginError')); setError(t("loginError"));
return; return;
} }
@@ -268,8 +302,9 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
<Alert> <Alert>
<FingerprintIcon className="w-5 h-5 mr-2" /> <FingerprintIcon className="w-5 h-5 mr-2" />
<AlertDescription> <AlertDescription>
{t('securityKeyPrompt', { {t("securityKeyPrompt", {
defaultValue: "Please verify your identity using your security key. Make sure your security key is connected and ready." defaultValue:
"Please verify your identity using your security key. Make sure your security key is connected and ready."
})} })}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
@@ -288,7 +323,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
name="email" name="email"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t('email')}</FormLabel> <FormLabel>{t("email")}</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -303,7 +338,9 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t('password')}</FormLabel> <FormLabel>
{t("password")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
type="password" type="password"
@@ -320,18 +357,18 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
href={`/auth/reset-password${form.getValues().email ? `?email=${form.getValues().email}` : ""}`} href={`/auth/reset-password${form.getValues().email ? `?email=${form.getValues().email}` : ""}`}
className="text-sm text-muted-foreground" className="text-sm text-muted-foreground"
> >
{t('passwordForgot')} {t("passwordForgot")}
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<Button type="submit" disabled={loading}> <Button
{loading ? t('idpConnectingToProcess', { type="submit"
defaultValue: "Connecting..." disabled={loading}
}) : t('login', { loading={loading}
defaultValue: "Log in" >
})} {t("login")}
</Button> </Button>
</div> </div>
</form> </form>
@@ -342,11 +379,9 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
{mfaRequested && ( {mfaRequested && (
<> <>
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-medium"> <h3 className="text-lg font-medium">{t("otpAuth")}</h3>
{t('otpAuth')}
</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t('otpAuthDescription')} {t("otpAuthDescription")}
</p> </p>
</div> </div>
<Form {...mfaForm}> <Form {...mfaForm}>
@@ -368,10 +403,16 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
pattern={ pattern={
REGEXP_ONLY_DIGITS_AND_CHARS REGEXP_ONLY_DIGITS_AND_CHARS
} }
onChange={(value: string) => { onChange={(
value: string
) => {
field.onChange(value); field.onChange(value);
if (value.length === 6) { if (
mfaForm.handleSubmit(onSubmit)(); value.length === 6
) {
mfaForm.handleSubmit(
onSubmit
)();
} }
}} }}
> >
@@ -422,7 +463,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
loading={loading} loading={loading}
disabled={loading} disabled={loading}
> >
{t('otpAuthSubmit')} {t("otpAuthSubmit")}
</Button> </Button>
)} )}
@@ -433,11 +474,11 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
variant="outline" variant="outline"
className="w-full" className="w-full"
onClick={initiateSecurityKeyAuth} onClick={initiateSecurityKeyAuth}
loading={securityKeyLoading} loading={loading}
disabled={securityKeyLoading || showSecurityKeyPrompt} disabled={loading || showSecurityKeyPrompt}
> >
<FingerprintIcon className="w-4 h-4 mr-2" /> <FingerprintIcon className="w-4 h-4 mr-2" />
{t('securityKeyLogin', { {t("securityKeyLogin", {
defaultValue: "Sign in with security key" defaultValue: "Sign in with security key"
})} })}
</Button> </Button>
@@ -450,7 +491,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
</div> </div>
<div className="relative flex justify-center text-xs uppercase"> <div className="relative flex justify-center text-xs uppercase">
<span className="px-2 bg-card text-muted-foreground"> <span className="px-2 bg-card text-muted-foreground">
{t('idpContinue')} {t("idpContinue")}
</span> </span>
</div> </div>
</div> </div>
@@ -483,7 +524,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
mfaForm.reset(); mfaForm.reset();
}} }}
> >
{t('otpAuthBack')} {t("otpAuthBack")}
</Button> </Button>
)} )}
</div> </div>