Auth with passwords + Playwright E2E tests + PostHog analytics
- bcrypt password hashing in auth (register, login, change-password) - Login/register pages with password fields - Profile update + OAuth placeholder endpoints - Playwright test suite: auth, pages, API (3 test files) - PostHog Docker analytics on :8010 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,8 @@ import { useTranslation } from "@/lib/i18n";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const { setAuth } = useAuth();
|
||||
@@ -24,7 +26,7 @@ export default function LoginPage() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const result = await login({ email: email.trim() });
|
||||
const result = await login({ email: email.trim(), password: password || undefined });
|
||||
setAuth(result.data.token, result.data.user);
|
||||
router.push("/tasks");
|
||||
} catch (err) {
|
||||
@@ -60,6 +62,28 @@ export default function LoginPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t("auth.password")}</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none pr-10"
|
||||
placeholder="******"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
@@ -69,6 +93,12 @@ export default function LoginPage() {
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<Link href="/forgot-password" className="text-sm text-blue-600 hover:underline">
|
||||
{t("auth.forgotPassword")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted mt-4">
|
||||
{t("auth.noAccount")}{" "}
|
||||
<Link href="/register" className="text-blue-600 hover:underline">
|
||||
|
||||
@@ -7,22 +7,52 @@ import { register } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
|
||||
function getPasswordStrength(pw: string): { level: number; label: string; color: string } {
|
||||
if (!pw) return { level: 0, label: "", color: "" };
|
||||
let score = 0;
|
||||
if (pw.length >= 6) score++;
|
||||
if (pw.length >= 10) score++;
|
||||
if (/[A-Z]/.test(pw)) score++;
|
||||
if (/[0-9]/.test(pw)) score++;
|
||||
if (/[^A-Za-z0-9]/.test(pw)) score++;
|
||||
|
||||
if (score <= 1) return { level: 1, label: "weak", color: "bg-red-500" };
|
||||
if (score <= 2) return { level: 2, label: "fair", color: "bg-orange-500" };
|
||||
if (score <= 3) return { level: 3, label: "good", color: "bg-yellow-500" };
|
||||
if (score <= 4) return { level: 4, label: "strong", color: "bg-green-500" };
|
||||
return { level: 5, label: "excellent", color: "bg-emerald-500" };
|
||||
}
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const { setAuth } = useAuth();
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
|
||||
const strength = getPasswordStrength(password);
|
||||
const passwordsMatch = password === confirmPassword;
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!email.trim() || !name.trim()) {
|
||||
setError(t("common.error"));
|
||||
return;
|
||||
}
|
||||
if (!password || password.length < 6) {
|
||||
setError(t("auth.passwordMinLength"));
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
setError(t("auth.passwordMismatch"));
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
@@ -30,6 +60,7 @@ export default function RegisterPage() {
|
||||
email: email.trim(),
|
||||
name: name.trim(),
|
||||
phone: phone.trim() || undefined,
|
||||
password: password,
|
||||
});
|
||||
setAuth(result.data.token, result.data.user);
|
||||
router.push("/tasks");
|
||||
@@ -86,9 +117,66 @@ export default function RegisterPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t("auth.password")} *</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none pr-10"
|
||||
placeholder="******"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
|
||||
</button>
|
||||
</div>
|
||||
{password && (
|
||||
<div className="mt-2">
|
||||
<div className="flex gap-1 mb-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-1.5 flex-1 rounded-full ${
|
||||
i <= strength.level ? strength.color : "bg-gray-200 dark:bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted">{t(`auth.strength.${strength.label}`)}</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted mt-1">{t("auth.passwordMinLength")}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t("auth.confirmPassword")} *</label>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className={`w-full px-3 py-2.5 border rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none ${
|
||||
confirmPassword && !passwordsMatch
|
||||
? "border-red-400 dark:border-red-600"
|
||||
: "border-gray-300 dark:border-gray-600"
|
||||
}`}
|
||||
placeholder="******"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{confirmPassword && !passwordsMatch && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("auth.passwordMismatch")}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
disabled={loading || (!!confirmPassword && !passwordsMatch)}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? t("common.loading") : t("auth.registerBtn")}
|
||||
|
||||
Reference in New Issue
Block a user