Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(auth): add password confirm field #4

Merged
merged 1 commit into from
Nov 6, 2024
Merged

feat(auth): add password confirm field #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@emotion/styled": "^11.13.0",
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.1.5",
Expand Down
11 changes: 11 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

158 changes: 148 additions & 10 deletions src/components/auth/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { RegisterCredentials } from "../../types/auth";
import { toast } from "react-hot-toast";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faOpenid } from "@fortawesome/free-brands-svg-icons";
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import Toast from "../Toast";
import logo from "../../assets/logo.svg";
import { Footer } from "../shared/Footer";
Expand All @@ -27,12 +28,24 @@ export function LoginPage() {
const [checkingRegistration, setCheckingRegistration] = useState(true);

// Form state
const [formData, setFormData] = useState<RegisterCredentials>({
const [formData, setFormData] = useState<
RegisterCredentials & { confirmPassword?: string }
>({
username: "",
password: "",
confirmPassword: "",
email: "", // Will be set during registration
});

// Password validation state
const [passwordValidation, setPasswordValidation] = useState({
minLength: false,
hasUppercase: false,
hasLowercase: false,
hasNumber: false,
passwordsMatch: false,
});

// Get the return URL from location state, or default to '/'
const from =
(location.state as { from?: { pathname: string } })?.from?.pathname || "/";
Expand Down Expand Up @@ -73,6 +86,21 @@ export function LoginPage() {
}
}, [isAuthenticated, loading, navigate, from]);

// Password validation effect
useEffect(() => {
if (isRegistering) {
const password = formData.password;
setPasswordValidation({
minLength: password.length >= 8,
hasUppercase: /[A-Z]/.test(password),
hasLowercase: /[a-z]/.test(password),
hasNumber: /[0-9]/.test(password),
passwordsMatch:
password === formData.confirmPassword && password !== "",
});
}
}, [formData.password, formData.confirmPassword, isRegistering]);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({
Expand All @@ -88,6 +116,31 @@ export function LoginPage() {

try {
if (isRegistering) {
// Check if passwords match
if (formData.password !== formData.confirmPassword) {
setError("Passwords do not match");
toast.custom((t) => (
<Toast type="error" body="Passwords do not match" t={t} />
));
return;
}

// Check if all password requirements are met
const allRequirementsMet = Object.values(passwordValidation).every(
(value) => value
);
if (!allRequirementsMet) {
setError("Please meet all password requirements");
toast.custom((t) => (
<Toast
type="error"
body="Please meet all password requirements"
t={t}
/>
));
return;
}

try {
// Generate a default email using the username
const defaultEmail = `${formData.username}@dashbrr.local`;
Expand Down Expand Up @@ -224,24 +277,109 @@ export function LoginPage() {
name="password"
type="password"
required
className="appearance-none rounded-b-md relative block w-full px-3 py-2 border border-gray-700 dark:border-gray-900 bg-gray-700 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
className="appearance-none relative block w-full px-3 py-2 border border-gray-700 dark:border-gray-900 bg-gray-700 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
/>
</div>
{isRegistering && (
<div>
<label htmlFor="confirmPassword" className="sr-only">
Confirm Password
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
required
className="appearance-none rounded-b-md relative block w-full px-3 py-2 border border-gray-700 dark:border-gray-900 bg-gray-700 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
/>
</div>
)}
</div>

{isRegistering && (
<div className="rounded-md bg-blue-900 bg-opacity-20 p-4">
<div className="text-sm text-blue-400">
<h4 className="font-medium mb-2">Password Requirements:</h4>
<ul className="list-disc pl-5 space-y-1">
<li>Minimum 8 characters</li>
<li>At least one uppercase letter</li>
<li>At least one lowercase letter</li>
<li>At least one number</li>
<li>At least one special character</li>
<div className="text-sm">
<h4 className="font-medium mb-2 text-blue-400">
Password Requirements:
</h4>
<ul className="space-y-1">
<li
className={`flex items-center ${
passwordValidation.minLength
? "text-green-400"
: "text-blue-400"
}`}
>
<FontAwesomeIcon
icon={passwordValidation.minLength ? faCheck : faTimes}
className="w-4 h-4 mr-2"
/>
Minimum 8 characters
</li>
<li
className={`flex items-center ${
passwordValidation.hasUppercase
? "text-green-400"
: "text-blue-400"
}`}
>
<FontAwesomeIcon
icon={
passwordValidation.hasUppercase ? faCheck : faTimes
}
className="w-4 h-4 mr-2"
/>
At least one uppercase letter
</li>
<li
className={`flex items-center ${
passwordValidation.hasLowercase
? "text-green-400"
: "text-blue-400"
}`}
>
<FontAwesomeIcon
icon={
passwordValidation.hasLowercase ? faCheck : faTimes
}
className="w-4 h-4 mr-2"
/>
At least one lowercase letter
</li>
<li
className={`flex items-center ${
passwordValidation.hasNumber
? "text-green-400"
: "text-blue-400"
}`}
>
<FontAwesomeIcon
icon={passwordValidation.hasNumber ? faCheck : faTimes}
className="w-4 h-4 mr-2"
/>
At least one number
</li>
<li
className={`flex items-center ${
passwordValidation.passwordsMatch
? "text-green-400"
: "text-blue-400"
}`}
>
<FontAwesomeIcon
icon={
passwordValidation.passwordsMatch ? faCheck : faTimes
}
className="w-4 h-4 mr-2"
/>
Passwords match
</li>
</ul>
</div>
</div>
Expand Down
Loading