Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login fixes

Browse Source
This commit is contained in:
Michael Freno
2025-12-22 10:55:08 -05:00
parent 281654081d
commit 1dd852795e
5 changed files with 204 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/routes/login/password-reset.tsx
View File

@@ -5,6 +5,7 @@ import CountdownCircleTimer from "~/components/CountdownCircleTimer";
import Eye from "~/components/icons/Eye";
import EyeSlash from "~/components/icons/EyeSlash";
import { validatePassword } from "~/lib/validation";
import { api } from "~/lib/api";
export default function PasswordResetPage() {
const navigate = useNavigate();
@@ -67,32 +68,26 @@ export default function PasswordResetPage() {
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 api.auth.resetPassword.mutate({
token: token,
newPassword,
newPasswordConfirmation: newPasswordConf
});
const result = await response.json();
if (response.ok && result.result?.data) {
if (result.success) {
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);
}
setError("Failed to reset password");
}
} catch (err) {
} catch (err: any) {
console.error("Password reset error:", err);
setError("An error occurred. Please try again.");
const errorMsg = err.message || "An error occurred. Please try again.";
if (errorMsg.includes("expired") || errorMsg.includes("token")) {
setShowRequestNewEmail(true);
setError("Token has expired");
} else {
setError(errorMsg);
}
} finally {
setPasswordChangeLoading(false);
}
@@ -192,27 +187,48 @@ export default function PasswordResetPage() {
>
<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>
<div class="flex justify-center">
<div class="input-group mx-4 flex">
<input
ref={newPasswordRef}
name="newPassword"
type={showPasswordInput() ? "text" : "password"}
required
autofocus
onInput={handleNewPasswordChange}
onBlur={handlePasswordBlur}
disabled={passwordChangeLoading()}
placeholder=" "
class="underlinedInput bg-transparent"
/>
<span class="bar"></span>
<label class="underlinedInputLabel">New Password</label>
</div>
<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"
onClick={() => {
setShowPasswordInput(!showPasswordInput());
newPasswordRef?.focus();
}}
class="absolute mt-14 ml-60"
>
<Show when={showPasswordInput()} fallback={<Eye />}>
<EyeSlash />
<Show
when={showPasswordInput()}
fallback={
<EyeSlash
height={24}
width={24}
strokeWidth={1}
class="stroke-zinc-900 dark:stroke-white"
/>
}
>
<Eye
height={24}
width={24}
strokeWidth={1}
class="stroke-zinc-900 dark:stroke-white"
/>
</Show>
</button>
</div>
@@ -221,34 +237,54 @@ export default function PasswordResetPage() {
<div
class={`${
showPasswordLengthWarning() ? "" : "opacity-0 select-none"
} mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
} text-center 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>
<div class="-mt-4 flex justify-center">
<div class="input-group mx-4 flex">
<input
ref={newPasswordConfRef}
name="newPasswordConf"
onInput={handlePasswordConfChange}
type={showPasswordConfInput() ? "text" : "password"}
required
disabled={passwordChangeLoading()}
placeholder=" "
class="underlinedInput bg-transparent"
/>
<span class="bar"></span>
<label class="underlinedInputLabel">
Password Confirmation
</label>
</div>
<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"
onClick={() => {
setShowPasswordConfInput(!showPasswordConfInput());
newPasswordConfRef?.focus();
}}
class="absolute mt-14 ml-60"
>
<Show when={showPasswordConfInput()} fallback={<Eye />}>
<EyeSlash />
<Show
when={showPasswordConfInput()}
fallback={
<EyeSlash
height={24}
width={24}
strokeWidth={1}
class="stroke-zinc-900 dark:stroke-white"
/>
}
>
<Eye
height={24}
width={24}
strokeWidth={1}
class="stroke-zinc-900 dark:stroke-white"
/>
</Show>
</button>
</div>
@@ -262,7 +298,7 @@ export default function PasswordResetPage() {
newPasswordConfRef.value.length >= 6
? ""
: "opacity-0 select-none"
} mt-2 text-center text-sm text-red-500 transition-opacity duration-200 ease-in-out`}
} text-center text-red-500 transition-opacity duration-200 ease-in-out`}
>
Passwords do not match!
</div>