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

password strength report change, added meter to account page

Browse Source
This commit is contained in:
Michael Freno
2026-01-02 15:28:30 -05:00
parent 4f1e9a6d6d
commit df3119d51e
4 changed files with 71 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Bars.tsx
View File

@@ -540,7 +540,7 @@ export function LeftBar() {
{/* Navigation Links */}
<div class="mt-auto">
<Typewriter keepAlive={false}>
<ul class="flex flex-col gap-4 py-6">
<ul class="flex flex-col gap-4 pt-6">
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="/" onClick={handleLinkClick}>
Home
@@ -592,7 +592,7 @@ export function LeftBar() {
</Typewriter>
{/* Get Lost button - outside Typewriter to allow glitch effect */}
<ul class="flex flex-col gap-4 pb-6">
<ul class="pt-4 pb-6">
<li
class="hover:text-subtext0 w-fit transition-all duration-500 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold"
classList={{

4
src/components/PasswordStrengthMeter.tsx
View File

@@ -1,5 +1,5 @@
import { createMemo, For, Show } from "solid-js";
import { validatePassword, type PasswordStrength } from "~/lib/validation";
import { validatePassword } from "~/lib/validation";
import { VALIDATION_CONFIG } from "~/config";
import CheckCircle from "./icons/CheckCircle";
@@ -86,7 +86,7 @@ export default function PasswordStrengthMeter(
{/* Strength bar */}
<Show when={props.password.length > 0}>
<div class="space-y-1">
<div class="bg-surface h-2 w-full overflow-hidden rounded-full">
<div class="bg-surface border-yellow h-2 w-full overflow-hidden rounded-full border">
<div
class={`${config().color} h-full transition-all duration-300 ease-out`}
style={{ width: config().width }}

16
src/lib/validation.ts
View File

@@ -37,6 +37,7 @@ export function validatePassword(password: string): {
strength: PasswordStrength;
} {
const errors: string[] = [];
let includesSpecial = false;
// Minimum length from config
if (password.length < VALIDATION_CONFIG.MIN_PASSWORD_LENGTH) {
@@ -60,11 +61,11 @@ export function validatePassword(password: string): {
errors.push("Password must contain at least one number");
}
if (/[^A-Za-z0-9]/.test(password)) {
includesSpecial = true;
}
// Require special character (if configured)
if (
VALIDATION_CONFIG.PASSWORD_REQUIRE_SPECIAL &&
!/[^A-Za-z0-9]/.test(password)
) {
if (VALIDATION_CONFIG.PASSWORD_REQUIRE_SPECIAL && !includesSpecial) {
errors.push("Password must contain at least one special character");
}
@@ -97,6 +98,13 @@ export function validatePassword(password: string): {
let strength: PasswordStrength = "weak";
if (errors.length === 0) {
if (includesSpecial) {
if (password.length >= 14) {
strength = "strong";
} else if (password.length >= VALIDATION_CONFIG.MIN_PASSWORD_LENGTH) {
strength = "good";
}
}
if (password.length >= 16) {
strength = "strong";
} else if (password.length >= 12) {

69
src/routes/account.tsx
View File

@@ -16,6 +16,7 @@ import { VALIDATION_CONFIG } from "~/config";
import { api } from "~/lib/api";
import type { UserProfile } from "~/types/user";
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
const getUserProfile = query(async (): Promise<UserProfile | null> => {
"use server";
@@ -84,6 +85,7 @@ export default function AccountPage() {
const [passwordBlurred, setPasswordBlurred] = createSignal(false);
const [passwordError, setPasswordError] = createSignal(false);
const [passwordDeletionError, setPasswordDeletionError] = createSignal(false);
const [newPassword, setNewPassword] = createSignal("");
const [showOldPasswordInput, setShowOldPasswordInput] = createSignal(false);
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
@@ -433,6 +435,7 @@ export default function AccountPage() {
const handleNewPasswordChange = (e: Event) => {
const target = e.target as HTMLInputElement;
setNewPassword(target.value);
checkPasswordLength(target.value);
if (newPasswordConfRef) {
checkForMatch(target.value, newPasswordConfRef.value);
@@ -838,9 +841,21 @@ export default function AccountPage() {
>
<Show
when={showOldPasswordInput()}
fallback={<Eye />}
fallback={
<EyeSlash
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
}
>
<EyeSlash />
<Eye
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
</Show>
</button>
</div>
@@ -861,6 +876,9 @@ export default function AccountPage() {
/>
<span class="bar"></span>
<label class="underlinedInputLabel">New Password</label>
<div class="pt-1">
<PasswordStrengthMeter password={newPassword()} />
</div>
<button
type="button"
onClick={() =>
@@ -868,18 +886,26 @@ export default function AccountPage() {
}
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
>
<Show when={showPasswordInput()} fallback={<Eye />}>
<EyeSlash />
<Show
when={showPasswordInput()}
fallback={
<EyeSlash
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
}
>
<Eye
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
</Show>
</button>
</div>
<Show when={showPasswordLengthWarning()}>
<div class="text-red mb-4 text-center text-sm">
Password too short! Min Length: 8
</div>
</Show>
<div class="input-group relative mx-4 mb-2">
<input
ref={newPasswordConfRef}
@@ -894,7 +920,7 @@ export default function AccountPage() {
/>
<span class="bar"></span>
<label class="underlinedInputLabel">
Password Confirmation
New Password Confirmation
</label>
<button
type="button"
@@ -903,8 +929,23 @@ export default function AccountPage() {
}
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
>
<Show when={showPasswordConfInput()} fallback={<Eye />}>
<EyeSlash />
<Show
when={showPasswordConfInput()}
fallback={
<EyeSlash
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
}
>
<Eye
height={24}
width={24}
strokeWidth={1}
class="stroke-text"
/>
</Show>
</button>
</div>