calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1129 from adrianeastles/feature/form-signup-improvements

Browse Source 
Form Signup Improvements - Password Requirements & Pre-Filled Email on signup form Invite
This commit is contained in:
Owen Schwartz
2025-08-12 21:52:44 -07:00
committed by GitHub
parent af638d666c 1351fb6689
commit 0bf302e013
6 changed files with 247 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
messages/en-US.json
View File

@@ -833,6 +833,24 @@
"pincodeRequirementsLength": "PIN must be exactly 6 digits",
"pincodeRequirementsChars": "PIN must only contain numbers",
"passwordRequirementsLength": "Password must be at least 1 character long",
"passwordRequirementsTitle": "Password requirements:",
"passwordRequirementLength": "At least 8 characters long",
"passwordRequirementUppercase": "At least one uppercase letter",
"passwordRequirementLowercase": "At least one lowercase letter",
"passwordRequirementNumber": "At least one number",
"passwordRequirementSpecial": "At least one special character",
"passwordRequirementsMet": "✓ Password meets all requirements",
"passwordStrength": "Password strength",
"passwordStrengthWeak": "Weak",
"passwordStrengthMedium": "Medium",
"passwordStrengthStrong": "Strong",
"passwordRequirements": "Requirements:",
"passwordRequirementLengthText": "8+ characters",
"passwordRequirementUppercaseText": "Uppercase letter (A-Z)",
"passwordRequirementLowercaseText": "Lowercase letter (a-z)",
"passwordRequirementNumberText": "Number (0-9)",
"passwordRequirementSpecialText": "Special character (!@#$%...)",
"passwordsDoNotMatch": "Passwords do not match",
"otpEmailRequirementsLength": "OTP must be at least 1 character long",
"otpEmailSent": "OTP Sent",
"otpEmailSentDescription": "An OTP has been sent to your email",
@@ -1327,4 +1345,4 @@
"resourceEnableProxy": "Enable Public Proxy",
"resourceEnableProxyDescription": "Enable public proxying to this resource. This allows access to the resource from outside the network through the cloud on an open port. Requires Traefik config.",
"externalProxyEnabled": "External Proxy Enabled"
}
}

4
server/routers/user/inviteUser.ts
View File

@@ -189,7 +189,7 @@ export async function inviteUser(
)
);
const inviteLink = `${config.getRawConfig().app.dashboard_url}/invite?token=${inviteId}-${token}`;
const inviteLink = `${config.getRawConfig().app.dashboard_url}/invite?token=${inviteId}-${token}&email=${encodeURIComponent(email)}`;
if (doEmail) {
await sendEmail(
@@ -241,7 +241,7 @@ export async function inviteUser(
});
});
const inviteLink = `${config.getRawConfig().app.dashboard_url}/invite?token=${inviteId}-${token}`;
const inviteLink = `${config.getRawConfig().app.dashboard_url}/invite?token=${inviteId}-${token}&email=${encodeURIComponent(email)}`;
if (doEmail) {
await sendEmail(

220
src/app/auth/signup/SignupForm.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
@@ -23,6 +23,7 @@ import {
CardTitle
} from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Progress } from "@/components/ui/progress";
import { SignUpResponse } from "@server/routers/auth";
import { useRouter } from "next/navigation";
import { passwordSchema } from "@server/auth/passwordSchema";
@@ -35,11 +36,46 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
import { useTranslations } from "next-intl";
import BrandingLogo from "@app/components/BrandingLogo";
import { build } from "@server/build";
import { Check, X } from "lucide-react";
import { cn } from "@app/lib/cn";
// Password strength calculation
const calculatePasswordStrength = (password: string) => {
const requirements = {
length: password.length >= 8,
uppercase: /[A-Z]/.test(password),
lowercase: /[a-z]/.test(password),
number: /[0-9]/.test(password),
special: /[~!`@#$%^&*()_\-+={}[\]|\\:;"'<>,.\/?]/.test(password)
};
const score = Object.values(requirements).filter(Boolean).length;
let strength: "weak" | "medium" | "strong" = "weak";
let color = "bg-red-500";
let percentage = 0;
if (score >= 5) {
strength = "strong";
color = "bg-green-500";
percentage = 100;
} else if (score >= 3) {
strength = "medium";
color = "bg-yellow-500";
percentage = 60;
} else if (score >= 1) {
strength = "weak";
color = "bg-red-500";
percentage = 30;
}
return { requirements, strength, color, percentage, score };
};
type SignupFormProps = {
redirect?: string;
inviteId?: string;
inviteToken?: string;
emailParam?: string;
};
const formSchema = z
@@ -68,29 +104,32 @@ const formSchema = z
export default function SignupForm({
redirect,
inviteId,
inviteToken
inviteToken,
emailParam
}: SignupFormProps) {
const router = useRouter();
const { env } = useEnvContext();
const api = createApiClient({ env });
const api = createApiClient(useEnvContext());
const t = useTranslations();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [termsAgreedAt, setTermsAgreedAt] = useState<string | null>(null);
const [passwordValue, setPasswordValue] = useState("");
const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
email: emailParam || "",
password: "",
confirmPassword: "",
agreeToTerms: false
}
},
mode: "onChange" // Enable real-time validation
});
const t = useTranslations();
const passwordStrength = calculatePasswordStrength(passwordValue);
const doPasswordsMatch = passwordValue.length > 0 && confirmPasswordValue.length > 0 && passwordValue === confirmPasswordValue;
async function onSubmit(values: z.infer<typeof formSchema>) {
const { email, password } = values;
@@ -172,7 +211,10 @@ export default function SignupForm({
<FormItem>
<FormLabel>{t("email")}</FormLabel>
<FormControl>
<Input {...field} />
<Input
{...field}
disabled={!!emailParam}
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -183,11 +225,128 @@ export default function SignupForm({
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>{t("password")}</FormLabel>
<div className="flex items-center gap-2">
<FormLabel>{t("password")}</FormLabel>
{passwordStrength.strength === "strong" && (
<Check className="h-4 w-4 text-green-500" />
)}
</div>
<FormControl>
<Input type="password" {...field} />
<div className="relative">
<Input
type="password"
{...field}
onChange={(e) => {
field.onChange(e);
setPasswordValue(e.target.value);
}}
className={cn(
passwordStrength.strength === "strong" && "border-green-500 focus-visible:ring-green-500",
passwordStrength.strength === "medium" && "border-yellow-500 focus-visible:ring-yellow-500",
passwordStrength.strength === "weak" && passwordValue.length > 0 && "border-red-500 focus-visible:ring-red-500"
)}
autoComplete="new-password"
/>
</div>
</FormControl>
<FormMessage />
{passwordValue.length > 0 && (
<div className="space-y-3 mt-2">
{/* Password Strength Meter */}
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-sm font-medium text-foreground">{t("passwordStrength")}</span>
<span className={cn(
"text-sm font-semibold",
passwordStrength.strength === "strong" && "text-green-600 dark:text-green-400",
passwordStrength.strength === "medium" && "text-yellow-600 dark:text-yellow-400",
passwordStrength.strength === "weak" && "text-red-600 dark:text-red-400"
)}>
{t(`passwordStrength${passwordStrength.strength.charAt(0).toUpperCase() + passwordStrength.strength.slice(1)}`)}
</span>
</div>
<Progress
value={passwordStrength.percentage}
className="h-2"
/>
</div>
{/* Requirements Checklist */}
<div className="bg-muted rounded-lg p-3 space-y-2">
<div className="text-sm font-medium text-foreground mb-2">{t("passwordRequirements")}</div>
<div className="grid grid-cols-1 gap-1.5">
<div className="flex items-center gap-2">
{passwordStrength.requirements.length ? (
<Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
) : (
<X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
)}
<span className={cn(
"text-sm",
passwordStrength.requirements.length ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
)}>
{t("passwordRequirementLengthText")}
</span>
</div>
<div className="flex items-center gap-2">
{passwordStrength.requirements.uppercase ? (
<Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
) : (
<X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
)}
<span className={cn(
"text-sm",
passwordStrength.requirements.uppercase ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
)}>
{t("passwordRequirementUppercaseText")}
</span>
</div>
<div className="flex items-center gap-2">
{passwordStrength.requirements.lowercase ? (
<Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
) : (
<X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
)}
<span className={cn(
"text-sm",
passwordStrength.requirements.lowercase ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
)}>
{t("passwordRequirementLowercaseText")}
</span>
</div>
<div className="flex items-center gap-2">
{passwordStrength.requirements.number ? (
<Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
) : (
<X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
)}
<span className={cn(
"text-sm",
passwordStrength.requirements.number ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
)}>
{t("passwordRequirementNumberText")}
</span>
</div>
<div className="flex items-center gap-2">
{passwordStrength.requirements.special ? (
<Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
) : (
<X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
)}
<span className={cn(
"text-sm",
passwordStrength.requirements.special ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
)}>
{t("passwordRequirementSpecialText")}
</span>
</div>
</div>
</div>
</div>
)}
{/* Only show FormMessage when not showing our custom requirements */}
{passwordValue.length === 0 && <FormMessage />}
</FormItem>
)}
/>
@@ -196,13 +355,36 @@ export default function SignupForm({
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("confirmPassword")}
</FormLabel>
<div className="flex items-center gap-2">
<FormLabel>{t('confirmPassword')}</FormLabel>
{doPasswordsMatch && (
<Check className="h-4 w-4 text-green-500" />
)}
</div>
<FormControl>
<Input type="password" {...field} />
<div className="relative">
<Input
type="password"
{...field}
onChange={(e) => {
field.onChange(e);
setConfirmPasswordValue(e.target.value);
}}
className={cn(
doPasswordsMatch && "border-green-500 focus-visible:ring-green-500",
confirmPasswordValue.length > 0 && !doPasswordsMatch && "border-red-500 focus-visible:ring-red-500"
)}
autoComplete="new-password"
/>
</div>
</FormControl>
<FormMessage />
{confirmPasswordValue.length > 0 && !doPasswordsMatch && (
<p className="text-sm text-red-600 mt-1">
{t("passwordsDoNotMatch")}
</p>
)}
{/* Only show FormMessage when field is empty */}
{confirmPasswordValue.length === 0 && <FormMessage />}
</FormItem>
)}
/>
@@ -269,4 +451,4 @@ export default function SignupForm({
</CardContent>
</Card>
);
}
}

6
src/app/auth/signup/page.tsx
View File

@@ -11,7 +11,10 @@ import { getTranslations } from "next-intl/server";
export const dynamic = "force-dynamic";
export default async function Page(props: {
searchParams: Promise<{ redirect: string | undefined }>;
searchParams: Promise<{
redirect: string | undefined;
email: string | undefined;
}>;
}) {
const searchParams = await props.searchParams;
const getUser = cache(verifySession);
@@ -69,6 +72,7 @@ export default async function Page(props: {
redirect={redirectUrl}
inviteToken={inviteToken}
inviteId={inviteId}
emailParam={searchParams.email}
/>
<p className="text-center text-muted-foreground mt-4">

12
src/app/invite/InviteStatusCard.tsx
View File

@@ -17,11 +17,13 @@ import { useTranslations } from "next-intl";
type InviteStatusCardProps = {
type: "rejected" | "wrong_user" | "user_does_not_exist" | "not_logged_in";
token: string;
email?: string;
};
export default function InviteStatusCard({
type,
token,
email,
}: InviteStatusCardProps) {
const router = useRouter();
const api = createApiClient(useEnvContext());
@@ -29,12 +31,18 @@ export default function InviteStatusCard({
async function goToLogin() {
await api.post("/auth/logout", {});
router.push(`/auth/login?redirect=/invite?token=${token}`);
const redirectUrl = email
? `/auth/login?redirect=/invite?token=${token}&email=${encodeURIComponent(email)}`
: `/auth/login?redirect=/invite?token=${token}`;
router.push(redirectUrl);
}
async function goToSignup() {
await api.post("/auth/logout", {});
router.push(`/auth/signup?redirect=/invite?token=${token}`);
const redirectUrl = email
? `/auth/signup?redirect=/invite?token=${token}&email=${encodeURIComponent(email)}`
: `/auth/signup?redirect=/invite?token=${token}`;
router.push(redirectUrl);
}
function renderBody() {

13
src/app/invite/page.tsx
View File

@@ -14,6 +14,7 @@ export default async function InvitePage(props: {
const params = await props.searchParams;
const tokenParam = params.token as string;
const emailParam = params.email as string;
if (!tokenParam) {
redirect("/");
@@ -70,16 +71,22 @@ export default async function InvitePage(props: {
const type = cardType();
if (!user && type === "user_does_not_exist") {
redirect(`/auth/signup?redirect=/invite?token=${params.token}`);
const redirectUrl = emailParam
? `/auth/signup?redirect=/invite?token=${params.token}&email=${encodeURIComponent(emailParam)}`
: `/auth/signup?redirect=/invite?token=${params.token}`;
redirect(redirectUrl);
}
if (!user && type === "not_logged_in") {
redirect(`/auth/login?redirect=/invite?token=${params.token}`);
const redirectUrl = emailParam
? `/auth/login?redirect=/invite?token=${params.token}&email=${encodeURIComponent(emailParam)}`
: `/auth/login?redirect=/invite?token=${params.token}`;
redirect(redirectUrl);
}
return (
<>
<InviteStatusCard type={type} token={tokenParam} />
<InviteStatusCard type={type} token={tokenParam} email={emailParam} />
</>
);
}