a

src/app/(auth)/auth-form.tsx

@@ -75,32 +75,64 @@ export function AuthForm({
       </div>
 
       {!isLogin && (
-        <Field label="Tên hiển thị">
+        <>
+          <Field label="Tên hiển thị">
+            <Icons.User size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
+            <input
+              name="name"
+              type="text"
+              required
+              autoComplete="name"
+              placeholder="Tên của bạn"
+              disabled={pending}
+            />
+          </Field>
+          <Field label="Username (tuỳ chọn)">
+            <Icons.User size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
+            <input
+              name="username"
+              type="text"
+              autoComplete="username"
+              pattern="[a-z0-9](?:[a-z0-9._]{1,28})[a-z0-9]"
+              minLength={3}
+              maxLength={30}
+              placeholder="vd: minh.nguyen — dùng để đăng nhập"
+              disabled={pending}
+              style={{ textTransform: "lowercase" }}
+            />
+          </Field>
+        </>
+      )}
+
+      {isLogin ? (
+        <Field label="Email hoặc username">
           <Icons.User size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
           <input
-            name="name"
+            name="identifier"
             type="text"
             required
-            autoComplete="name"
-            placeholder="Tên của bạn"
+            autoComplete="username"
+            autoCapitalize="off"
+            spellCheck={false}
+            placeholder="ten@email.com hoặc minh.nguyen"
+            disabled={pending}
+          />
+        </Field>
+      ) : (
+        <Field label="Email">
+          <Icons.Mail size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
+          <input
+            name="email"
+            type="email"
+            required
+            autoComplete="email"
+            inputMode="email"
+            placeholder="ten@email.com"
             disabled={pending}
           />
         </Field>
       )}
 
-      <Field label="Email">
-        <Icons.Mail size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
-        <input
-          name="email"
-          type="email"
-          required
-          autoComplete="email"
-          inputMode="email"
-          placeholder="ten@email.com"
-          disabled={pending}
-        />
-      </Field>
-
       <Field label="Mật khẩu">
         <Icons.Lock size={18} stroke={1.75} style={{ color: "var(--muted-foreground)" }} />
         <input