feat: implement PasswordInput component for enhanced password handling in sign-in and sign-up forms. Update forms to utilize the new component, improving user experience with password visibility toggle and validation feedback.

apps/web/src/components/sign-in-form.tsx

@@ -9,6 +9,7 @@ import z from "zod";
 
 import { authClient } from "@/lib/auth-client";
 import { trackUmamiEvent, AnalyticsEvent } from "@/lib/umami";
+import { PasswordInput } from "@/components/ui/PasswordInput";
 
 import Loader from "./loader";
 
@@ -110,13 +111,13 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
                       Lupa password?
                     </Link>
                   </div>
-                  <Input
+                  <PasswordInput
                     id={field.name}
                     name={field.name}
-                    type="password"
                     value={field.state.value}
                     onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
+                    onChange={field.handleChange}
+                    autoComplete="current-password"
                   />
                   {field.state.meta.errors.map((error) => (
                     <p key={error?.message} className="text-red-500 text-sm">

apps/web/src/components/sign-up-form.tsx

@@ -11,9 +11,29 @@ import z from "zod";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { trackUmamiEvent, AnalyticsEvent } from "@/lib/umami";
+import { PasswordInput } from "@/components/ui/PasswordInput";
 
 import Loader from "./loader";
 
+const passwordSchema = z
+  .string()
+  .regex(
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
+    "Password must be at least 8 characters with uppercase, lowercase, and number",
+  );
+
+const signUpSchema = z
+  .object({
+    name: z.string().min(2, "Name must be at least 2 characters"),
+    email: z.email("Invalid email address"),
+    password: passwordSchema,
+    confirmPassword: z.string().min(1, "Confirm your password"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Password tidak cocok",
+    path: ["confirmPassword"],
+  });
+
 export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: () => void }) {
   const navigate = useNavigate({
     from: "/",
@@ -25,6 +45,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
     defaultValues: {
       email: "",
       password: "",
+      confirmPassword: "",
       name: "",
     },
     onSubmit: async ({ value }) => {
@@ -53,11 +74,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
       );
     },
     validators: {
-      onSubmit: z.object({
-        name: z.string().min(2, "Name must be at least 2 characters"),
-        email: z.email("Invalid email address"),
-        password: z.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/, "Password must be at least 8 characters with uppercase, lowercase, and number"),
-      }),
+      onSubmit: signUpSchema,
     },
   });
 
@@ -130,13 +147,38 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
               {(field) => (
                 <div className="space-y-2">
                   <Label htmlFor={field.name}>Password</Label>
-                  <Input
+                  <PasswordInput
                     id={field.name}
                     name={field.name}
-                    type="password"
                     value={field.state.value}
                     onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
+                    onChange={field.handleChange}
+                    autoComplete="new-password"
+                    placeholder="Minimal 8 karakter"
+                  />
+                  {field.state.meta.errors.map((error) => (
+                    <p key={error?.message} className="text-red-500 text-sm">
+                      {error?.message}
+                    </p>
+                  ))}
+                </div>
+              )}
+            </form.Field>
+          </div>
+
+          <div>
+            <form.Field name="confirmPassword">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Konfirmasi Password</Label>
+                  <PasswordInput
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    autoComplete="new-password"
+                    placeholder="Ulangi password"
                   />
                   {field.state.meta.errors.map((error) => (
                     <p key={error?.message} className="text-red-500 text-sm">

apps/web/src/components/ui/PasswordInput.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+type PasswordInputProps = {
+  id: string;
+  name?: string;
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  autoComplete?: string;
+};
+
+export function PasswordInput({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  autoComplete,
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="relative">
+      <Input
+        id={id}
+        name={name}
+        type={visible ? "text" : "password"}
+        value={value}
+        onBlur={onBlur}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        className="pr-11"
+      />
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="absolute right-0 top-0 h-full w-11 rounded-[var(--radius-lg)] text-muted-foreground hover:text-foreground"
+        aria-label={visible ? "Sembunyikan password" : "Tampilkan password"}
+        onClick={() => setVisible((prev) => !prev)}
+      >
+        <MaterialIcon name={visible ? "visibility_off" : "visibility"} className="text-xl" />
+      </Button>
+    </div>
+  );
+}

packages/api/src/__tests__/credit.test.ts

@@ -20,6 +20,8 @@ const MOCK_ENV = {
   PLATFORM_AI_BASE_URL: "https://api.openai.com/v1",
   PLATFORM_AI_MODEL: "gpt-4o-mini",
   DEFAULT_SIGNUP_CREDIT_TOKENS: "50000",
+  FREE_CREDITS_ENABLED: true,
+  FREE_CREDITS_MAX_POOL: 1000000,
 };
 
 mock.module("@labas/env/server", () => ({
@@ -163,4 +165,18 @@ describe("Credit Utility", () => {
       expect(row.tokenBalance).toBe(0);
     });
   });
+
+  describe("autoRefillIfEligible", () => {
+    it("grants initial free credits to new user with zero balance", async () => {
+      const uid = makeUserId("refill");
+      await db.insert(schema.user).values({ id: uid, name: uid, email: `${uid}@test.com` });
+
+      const result = await credit.autoRefillIfEligible(uid);
+      expect(result.refilled).toBe(true);
+      expect(result.newBalance).toBe(50000);
+
+      const info = await credit.getUserCredit(uid);
+      expect(info.tokenBalance).toBe(50000);
+    });
+  });
 });

packages/api/src/routers/admin.ts

@@ -5,7 +5,7 @@ import * as schema from "@labas/db";
 import { db } from "@labas/db";
 import { paginationSchema, paginateDefaults } from "../lib/pagination";
 import { throwNotFound, throwForbidden, throwBadRequest } from "../lib/errors";
-import { getUserCredit, getLastRefillAt, getPoolUsage, getConfig, setConfig } from "../lib/credit";
+import { getUserCredit, getLastRefillAt, getPoolUsage, getConfig, setConfig, autoRefillIfEligible } from "../lib/credit";
 import { env } from "@labas/env/server";
 
 function audit(adminUserId: string, action: string, targetUserId: string | null, details?: Record<string, unknown>) {
@@ -24,7 +24,16 @@ export const adminRouter = router({
   }),
 
   getMyCredit: protectedProcedure.query(async ({ ctx }) => {
-    const credit = await getUserCredit(ctx.session.user.id);
+    let credit = await getUserCredit(ctx.session.user.id);
+
+    // Proactively grant first free-credit refill so new users see balance before clicking Generate.
+    if (credit.tokenBalance <= 0) {
+      const refill = await autoRefillIfEligible(ctx.session.user.id);
+      if (refill.refilled && refill.newBalance !== undefined) {
+        credit = { ...credit, tokenBalance: refill.newBalance };
+      }
+    }
+
     const lastRefill = await getLastRefillAt(ctx.session.user.id);
     const cooldownMs = 7 * 24 * 60 * 60 * 1000;
     const lastRefillTime = lastRefill?.createdAt ? new Date(lastRefill.createdAt).getTime() : 0;

packages/api/src/routers/verification.ts

@@ -7,6 +7,7 @@ import { eq, and, gt, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { sendOtpEmail } from "../lib/email";
+import { autoRefillIfEligible } from "../lib/credit";
 import { publicProcedure, router } from "../index";
 import { checkRateLimit } from "../lib/rate-limit";
 
@@ -88,6 +89,16 @@ export const verificationRouter = router({
 
       await db.delete(verification).where(eq(verification.id, record.id));
 
+      const [verifiedUser] = await db
+        .select({ id: user.id })
+        .from(user)
+        .where(eq(user.email, input.email))
+        .limit(1);
+
+      if (verifiedUser) {
+        await autoRefillIfEligible(verifiedUser.id);
+      }
+
       return { success: true };
     }),