340 lines
11 KiB
TypeScript
340 lines
11 KiB
TypeScript
import { createSignal, createEffect, Show } from "solid-js";
|
|
import { A, useNavigate, useSearchParams } from "@solidjs/router";
|
|
import { Title, Meta } from "@solidjs/meta";
|
|
import CountdownCircleTimer from "~/components/CountdownCircleTimer";
|
|
import Eye from "~/components/icons/Eye";
|
|
import EyeSlash from "~/components/icons/EyeSlash";
|
|
import { validatePassword } from "~/lib/validation";
|
|
|
|
export default function PasswordResetPage() {
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
// State management
|
|
const [passwordBlurred, setPasswordBlurred] = createSignal(false);
|
|
const [passwordChangeLoading, setPasswordChangeLoading] = createSignal(false);
|
|
const [passwordsMatch, setPasswordsMatch] = createSignal(false);
|
|
const [showPasswordLengthWarning, setShowPasswordLengthWarning] =
|
|
createSignal(false);
|
|
const [passwordLengthSufficient, setPasswordLengthSufficient] =
|
|
createSignal(false);
|
|
const [showRequestNewEmail, setShowRequestNewEmail] = createSignal(false);
|
|
const [countDown, setCountDown] = createSignal(false);
|
|
const [error, setError] = createSignal("");
|
|
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
|
|
const [showPasswordConfInput, setShowPasswordConfInput] = createSignal(false);
|
|
|
|
// Form refs
|
|
let newPasswordRef: HTMLInputElement | undefined;
|
|
let newPasswordConfRef: HTMLInputElement | undefined;
|
|
|
|
// Get token from URL
|
|
const token = searchParams.token;
|
|
|
|
// Redirect to request page if no token
|
|
createEffect(() => {
|
|
if (!token) {
|
|
navigate("/login/request-password-reset");
|
|
}
|
|
});
|
|
|
|
// Form submission handler
|
|
const setNewPasswordTrigger = async (e: Event) => {
|
|
e.preventDefault();
|
|
setShowRequestNewEmail(false);
|
|
setError("");
|
|
|
|
if (!newPasswordRef || !newPasswordConfRef) {
|
|
setError("Please fill in all fields");
|
|
return;
|
|
}
|
|
|
|
const newPassword = newPasswordRef.value;
|
|
const newPasswordConf = newPasswordConfRef.value;
|
|
|
|
// Validate password
|
|
const passwordValidation = validatePassword(newPassword);
|
|
if (!passwordValidation.isValid) {
|
|
setError(passwordValidation.errors[0] || "Invalid password");
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== newPasswordConf) {
|
|
setError("Passwords do not match");
|
|
return;
|
|
}
|
|
|
|
setPasswordChangeLoading(true);
|
|
|
|
try {
|
|
const response = await fetch("/api/trpc/auth.resetPassword", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
token: token,
|
|
newPassword,
|
|
newPasswordConfirmation: newPasswordConf
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok && result.result?.data) {
|
|
setCountDown(true);
|
|
} else {
|
|
const errorMsg = result.error?.message || "Failed to reset password";
|
|
if (errorMsg.includes("expired") || errorMsg.includes("token")) {
|
|
setShowRequestNewEmail(true);
|
|
setError("Token has expired");
|
|
} else {
|
|
setError(errorMsg);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("Password reset error:", err);
|
|
setError("An error occurred. Please try again.");
|
|
} finally {
|
|
setPasswordChangeLoading(false);
|
|
}
|
|
};
|
|
|
|
// Check if passwords match
|
|
const checkForMatch = (newPassword: string, newPasswordConf: string) => {
|
|
if (newPassword === newPasswordConf) {
|
|
setPasswordsMatch(true);
|
|
} else {
|
|
setPasswordsMatch(false);
|
|
}
|
|
};
|
|
|
|
// Check password length
|
|
const checkPasswordLength = (password: string) => {
|
|
if (password.length >= 8) {
|
|
setPasswordLengthSufficient(true);
|
|
setShowPasswordLengthWarning(false);
|
|
} else {
|
|
setPasswordLengthSufficient(false);
|
|
if (passwordBlurred()) {
|
|
setShowPasswordLengthWarning(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle password blur
|
|
const passwordLengthBlurCheck = () => {
|
|
if (
|
|
!passwordLengthSufficient() &&
|
|
newPasswordRef &&
|
|
newPasswordRef.value !== ""
|
|
) {
|
|
setShowPasswordLengthWarning(true);
|
|
}
|
|
setPasswordBlurred(true);
|
|
};
|
|
|
|
// Handle new password change
|
|
const handleNewPasswordChange = (e: Event) => {
|
|
const target = e.target as HTMLInputElement;
|
|
checkPasswordLength(target.value);
|
|
if (newPasswordConfRef) {
|
|
checkForMatch(target.value, newPasswordConfRef.value);
|
|
}
|
|
};
|
|
|
|
// Handle password confirmation change
|
|
const handlePasswordConfChange = (e: Event) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (newPasswordRef) {
|
|
checkForMatch(newPasswordRef.value, target.value);
|
|
}
|
|
};
|
|
|
|
// Handle password blur
|
|
const handlePasswordBlur = () => {
|
|
passwordLengthBlurCheck();
|
|
};
|
|
|
|
// Render countdown timer
|
|
const renderTime = (timeRemaining: number) => {
|
|
if (timeRemaining === 0) {
|
|
navigate("/login");
|
|
}
|
|
return (
|
|
<div class="timer text-center">
|
|
<div class="text-sm text-slate-700 dark:text-slate-300">
|
|
Change Successful!
|
|
</div>
|
|
<div class="value py-1 text-3xl text-blue-500 dark:text-blue-400">
|
|
{timeRemaining}
|
|
</div>
|
|
<div class="text-sm text-slate-700 dark:text-slate-300">
|
|
Redirecting...
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Title>Reset Password | Michael Freno</Title>
|
|
<Meta
|
|
name="description"
|
|
content="Set a new password for your account to regain access to your profile and personalized features."
|
|
/>
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
|
|
<div class="pt-24 text-center text-xl font-semibold text-slate-800 dark:text-slate-100">
|
|
Set New Password
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={(e) => setNewPasswordTrigger(e)}
|
|
class="mt-4 flex w-full justify-center"
|
|
>
|
|
<div class="flex w-full max-w-md flex-col justify-center px-4">
|
|
{/* New Password Input */}
|
|
<div class="input-group relative mx-4">
|
|
<input
|
|
ref={newPasswordRef}
|
|
name="newPassword"
|
|
type={showPasswordInput() ? "text" : "password"}
|
|
required
|
|
onInput={handleNewPasswordChange}
|
|
onBlur={handlePasswordBlur}
|
|
disabled={passwordChangeLoading()}
|
|
placeholder=" "
|
|
class="underlinedInput w-full bg-transparent pr-10"
|
|
/>
|
|
<span class="bar"></span>
|
|
<label class="underlinedInputLabel">New Password</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPasswordInput(!showPasswordInput())}
|
|
class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|
>
|
|
<Show when={showPasswordInput()} fallback={<Eye />}>
|
|
<EyeSlash />
|
|
</Show>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Password Length Warning */}
|
|
<div
|
|
class={`${
|
|
showPasswordLengthWarning() ? "" : "opacity-0 select-none"
|
|
} mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
|
|
>
|
|
Password too short! Min Length: 8
|
|
</div>
|
|
|
|
{/* Password Confirmation Input */}
|
|
<div class="input-group relative mx-4 mt-6">
|
|
<input
|
|
ref={newPasswordConfRef}
|
|
name="newPasswordConf"
|
|
onInput={handlePasswordConfChange}
|
|
type={showPasswordConfInput() ? "text" : "password"}
|
|
required
|
|
disabled={passwordChangeLoading()}
|
|
placeholder=" "
|
|
class="underlinedInput w-full bg-transparent pr-10"
|
|
/>
|
|
<span class="bar"></span>
|
|
<label class="underlinedInputLabel">Password Confirmation</label>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setShowPasswordConfInput(!showPasswordConfInput())
|
|
}
|
|
class="absolute top-2 right-0 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|
>
|
|
<Show when={showPasswordConfInput()} fallback={<Eye />}>
|
|
<EyeSlash />
|
|
</Show>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Password Mismatch Warning */}
|
|
<div
|
|
class={`${
|
|
!passwordsMatch() &&
|
|
passwordLengthSufficient() &&
|
|
newPasswordConfRef &&
|
|
newPasswordConfRef.value.length >= 6
|
|
? ""
|
|
: "opacity-0 select-none"
|
|
} mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
|
|
>
|
|
Passwords do not match!
|
|
</div>
|
|
|
|
{/* Countdown Timer or Submit Button */}
|
|
<Show
|
|
when={countDown()}
|
|
fallback={
|
|
<button
|
|
type="submit"
|
|
disabled={passwordChangeLoading() || !passwordsMatch()}
|
|
class={`${
|
|
passwordChangeLoading() || !passwordsMatch()
|
|
? "cursor-not-allowed bg-zinc-400"
|
|
: "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700"
|
|
} my-6 flex justify-center rounded px-4 py-2 font-medium text-white transition-all duration-300 ease-out`}
|
|
>
|
|
{passwordChangeLoading() ? "Setting..." : "Set New Password"}
|
|
</button>
|
|
}
|
|
>
|
|
<div class="mx-auto pt-4">
|
|
<CountdownCircleTimer
|
|
isPlaying={countDown()}
|
|
duration={5}
|
|
size={200}
|
|
strokeWidth={12}
|
|
colors="#60a5fa"
|
|
onComplete={() => false}
|
|
>
|
|
{({ remainingTime }) => renderTime(remainingTime)}
|
|
</CountdownCircleTimer>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Error Message */}
|
|
<Show when={error() && !showRequestNewEmail()}>
|
|
<div class="mt-4 flex justify-center">
|
|
<div class="text-sm text-red-500 italic">{error()}</div>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* Token Expired Message */}
|
|
<div
|
|
class={`${
|
|
showRequestNewEmail() ? "" : "opacity-0 select-none"
|
|
} flex justify-center px-4 text-red-500 italic transition-opacity duration-300 ease-in-out`}
|
|
>
|
|
Token has expired, request a new one{" "}
|
|
<A
|
|
class="pl-1 text-blue-500 underline underline-offset-4 hover:text-blue-400"
|
|
href="/login/request-password-reset"
|
|
>
|
|
here
|
|
</A>
|
|
</div>
|
|
|
|
{/* Back to Login Link */}
|
|
<Show when={!countDown()}>
|
|
<div class="mt-6 flex justify-center">
|
|
<A
|
|
href="/login"
|
|
class="text-blue-500 underline underline-offset-4 transition-colors hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Back to Login
|
|
</A>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|