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>

apps/tasks/app/register/page.tsx

@@ -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")}