@promakeai/cli 0.0.5

package/template/src/modules/auth/forgot-password-page.tsx

@@ -0,0 +1,371 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+import { Layout } from "@/components/Layout";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@/modules/auth/use-auth";
+import { getErrorMessage } from "@/modules/api/get-error-message";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { KeyRound, ArrowLeft, Eye, EyeOff, CheckCircle2 } from "lucide-react";
+
+type Step = "request" | "reset" | "success";
+
+export default function ForgotPasswordPage() {
+  const { t } = useTranslation("forgotPassword");
+  usePageTitle({ title: t("title", "Forgot Password") });
+
+  const { forgotPassword, resetPassword } = useAuth();
+
+  const [step, setStep] = useState<Step>("request");
+  const [username, setUsername] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleRequestCode = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await forgotPassword(username);
+      toast.success(t("codeSentTitle", "Code Sent!"), {
+        description: t(
+          "codeSentDesc",
+          "A password reset code has been sent to your email.",
+        ),
+      });
+      setStep("reset");
+    } catch (err) {
+      const errorMessage = getErrorMessage(
+        err,
+        t("errorGeneric", "Failed to send reset code. Please try again."),
+      );
+      setError(errorMessage);
+      toast.error(t("errorTitle", "Error"), {
+        description: errorMessage,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleResetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate passwords match
+    if (newPassword !== confirmPassword) {
+      setError(t("passwordMismatch", "Passwords do not match"));
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await resetPassword(username, code, newPassword);
+      toast.success(t("resetSuccessTitle", "Password Reset!"), {
+        description: t(
+          "resetSuccessDesc",
+          "Your password has been successfully reset.",
+        ),
+      });
+      setStep("success");
+    } catch (err) {
+      const errorMessage = getErrorMessage(
+        err,
+        t("errorResetGeneric", "Failed to reset password. Please try again."),
+      );
+      setError(errorMessage);
+      toast.error(t("errorTitle", "Error"), {
+        description: errorMessage,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Success step
+  if (step === "success") {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-muted/30 py-12">
+          <div className="container mx-auto px-4">
+            <div className="max-w-md mx-auto">
+              <Card>
+                <CardContent className="pt-8 pb-8 text-center">
+                  <CheckCircle2 className="w-16 h-16 text-green-500 mx-auto mb-4" />
+                  <h1 className="text-2xl font-bold mb-2">
+                    {t("successTitle", "Password Reset Successfully!")}
+                  </h1>
+                  <p className="text-muted-foreground mb-6">
+                    {t(
+                      "successDescription",
+                      "Your password has been changed. You can now login with your new password.",
+                    )}
+                  </p>
+                  <Button asChild className="w-full">
+                    <Link to="/login">{t("goToLogin", "Go to Login")}</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-muted/30 py-12">
+        <div className="container mx-auto px-4">
+          {/* Hero Section */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-foreground mb-4">
+              {t("title", "Forgot Password")}
+            </h1>
+            <div className="w-16 h-1 bg-primary mx-auto mb-6"></div>
+            <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+              {step === "request"
+                ? t(
+                    "descriptionRequest",
+                    "Enter your username and we'll send you a code to reset your password.",
+                  )
+                : t(
+                    "descriptionReset",
+                    "Enter the code sent to your email and your new password.",
+                  )}
+            </p>
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <KeyRound className="w-5 h-5 text-primary" />
+                  {step === "request"
+                    ? t("cardTitleRequest", "Request Reset Code")
+                    : t("cardTitleReset", "Reset Password")}
+                </CardTitle>
+                <CardDescription>
+                  {step === "request"
+                    ? t("cardDescRequest", "Step 1 of 2: Request a reset code")
+                    : t(
+                        "cardDescReset",
+                        "Step 2 of 2: Enter code and new password",
+                      )}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {step === "request" ? (
+                  // Step 1: Request Code
+                  <form onSubmit={handleRequestCode} className="space-y-6">
+                    <div>
+                      <Label htmlFor="username">
+                        {t("username", "Username")} *
+                      </Label>
+                      <Input
+                        id="username"
+                        type="text"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        placeholder={t(
+                          "usernamePlaceholder",
+                          "Enter your username",
+                        )}
+                        required
+                        className="mt-1"
+                        autoComplete="username"
+                      />
+                    </div>
+
+                    {error && (
+                      <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                        <p className="text-red-800 text-sm font-medium">
+                          {error}
+                        </p>
+                      </div>
+                    )}
+
+                    <Button
+                      type="submit"
+                      size="lg"
+                      className="w-full"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                          {t("sending", "Sending...")}
+                        </>
+                      ) : (
+                        t("sendCode", "Send Reset Code")
+                      )}
+                    </Button>
+
+                    <div className="text-center">
+                      <Link
+                        to="/login"
+                        className="text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1"
+                      >
+                        <ArrowLeft className="w-4 h-4" />
+                        {t("backToLogin", "Back to Login")}
+                      </Link>
+                    </div>
+                  </form>
+                ) : (
+                  // Step 2: Reset Password
+                  <form onSubmit={handleResetPassword} className="space-y-6">
+                    <div className="p-3 bg-muted rounded-lg text-sm">
+                      <span className="text-muted-foreground">
+                        {t("codeFor", "Reset code for:")}{" "}
+                      </span>
+                      <span className="font-medium">{username}</span>
+                    </div>
+
+                    <div>
+                      <Label htmlFor="code">{t("code", "Reset Code")} *</Label>
+                      <Input
+                        id="code"
+                        type="text"
+                        value={code}
+                        onChange={(e) => setCode(e.target.value)}
+                        placeholder={t("codePlaceholder", "Enter 6-digit code")}
+                        required
+                        className="mt-1"
+                        maxLength={6}
+                      />
+                    </div>
+
+                    <div>
+                      <Label htmlFor="newPassword">
+                        {t("newPassword", "New Password")} *
+                      </Label>
+                      <div className="relative">
+                        <Input
+                          id="newPassword"
+                          type={showPassword ? "text" : "password"}
+                          value={newPassword}
+                          onChange={(e) => setNewPassword(e.target.value)}
+                          placeholder={t(
+                            "newPasswordPlaceholder",
+                            "Enter new password",
+                          )}
+                          required
+                          className="mt-1 pr-10"
+                          autoComplete="new-password"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setShowPassword(!showPassword)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                        >
+                          {showPassword ? (
+                            <EyeOff className="w-4 h-4" />
+                          ) : (
+                            <Eye className="w-4 h-4" />
+                          )}
+                        </button>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {t(
+                          "passwordRequirements",
+                          "At least 8 characters, 1 letter and 1 number",
+                        )}
+                      </p>
+                    </div>
+
+                    <div>
+                      <Label htmlFor="confirmPassword">
+                        {t("confirmPassword", "Confirm Password")} *
+                      </Label>
+                      <Input
+                        id="confirmPassword"
+                        type={showPassword ? "text" : "password"}
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        placeholder={t(
+                          "confirmPasswordPlaceholder",
+                          "Confirm new password",
+                        )}
+                        required
+                        className="mt-1"
+                        autoComplete="new-password"
+                      />
+                    </div>
+
+                    {error && (
+                      <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                        <p className="text-red-800 text-sm font-medium">
+                          {error}
+                        </p>
+                      </div>
+                    )}
+
+                    <Button
+                      type="submit"
+                      size="lg"
+                      className="w-full"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                          {t("resetting", "Resetting...")}
+                        </>
+                      ) : (
+                        t("resetPassword", "Reset Password")
+                      )}
+                    </Button>
+
+                    <div className="flex justify-between">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setStep("request");
+                          setCode("");
+                          setNewPassword("");
+                          setConfirmPassword("");
+                          setError(null);
+                        }}
+                        className="text-sm text-muted-foreground hover:text-primary"
+                      >
+                        {t("changeUsername", "Change username")}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          handleRequestCode({
+                            preventDefault: () => {},
+                          } as React.FormEvent)
+                        }
+                        className="text-sm text-primary hover:underline"
+                        disabled={isSubmitting}
+                      >
+                        {t("resendCode", "Resend code")}
+                      </button>
+                    </div>
+                  </form>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}

package/template/src/modules/auth/login-page.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { Layout } from "@/components/Layout";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@/modules/auth/use-auth";
+import { getErrorMessage } from "@/modules/api/get-error-message";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { LogIn, Eye, EyeOff } from "lucide-react";
+
+export default function LoginPage() {
+  const { t } = useTranslation("login");
+  usePageTitle({ title: t("title") });
+
+  const navigate = useNavigate();
+  const { login, isAuthenticated } = useAuth();
+
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Redirect when authenticated (works for both initial load and after login)
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate("/", { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await login(formData.username, formData.password);
+      toast.success(t("toastSuccessTitle", "Welcome back!"), {
+        description: t("toastSuccessDesc", "You have successfully logged in."),
+      });
+      navigate("/", { replace: true });
+    } catch (err) {
+      const errorMessage = getErrorMessage(err, t("errorGeneric"));
+      setError(errorMessage);
+      toast.error(t("toastErrorTitle", "Login failed"), {
+        description: errorMessage,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-muted/30 py-12">
+        <div className="container mx-auto px-4">
+          {/* Hero Section */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-foreground mb-4">
+              {t("title")}
+            </h1>
+            <div className="w-16 h-1 bg-primary mx-auto mb-6"></div>
+            <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+              {t("description")}
+            </p>
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <LogIn className="w-5 h-5 text-primary" />
+                  {t("cardTitle")}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <Label htmlFor="username">{t("username")} *</Label>
+                    <Input
+                      id="username"
+                      name="username"
+                      type="text"
+                      value={formData.username}
+                      onChange={handleChange}
+                      placeholder={t("usernamePlaceholder")}
+                      required
+                      className="mt-1"
+                      autoComplete="username"
+                    />
+                  </div>
+
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="password">{t("password")} *</Label>
+                      <Link
+                        to="/forgot-password"
+                        className="text-sm text-primary hover:underline"
+                      >
+                        {t("forgotPassword", "Forgot password?")}
+                      </Link>
+                    </div>
+                    <div className="relative">
+                      <Input
+                        id="password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        value={formData.password}
+                        onChange={handleChange}
+                        placeholder={t("passwordPlaceholder")}
+                        required
+                        className="mt-1 pr-10"
+                        autoComplete="current-password"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                      >
+                        {showPassword ? (
+                          <EyeOff className="w-4 h-4" />
+                        ) : (
+                          <Eye className="w-4 h-4" />
+                        )}
+                      </button>
+                    </div>
+                  </div>
+
+                  {error && (
+                    <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                      <p className="text-red-800 text-sm font-medium">
+                        {error}
+                      </p>
+                    </div>
+                  )}
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="w-full"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                        {t("submitting")}
+                      </>
+                    ) : (
+                      t("submit")
+                    )}
+                  </Button>
+
+                  <div className="text-center text-sm text-muted-foreground">
+                    {t("noAccount")}{" "}
+                    <Link
+                      to="/register"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      {t("registerLink")}
+                    </Link>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}