fix(auth): align invitation password fields (#2461)

Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>

web/src/app/invitations/accept/page.tsx

@@ -386,15 +386,19 @@ export default function AcceptInvitationPage() {
                     >
                       {t('workspace.confirmPassword')}
                     </label>
-                    <Input
+                    <div className="relative">
-                      id="invite-password-confirm"
+                      <Lock className="absolute left-3 top-3 size-4 text-muted-foreground" />
-                      type="password"
+                      <Input
-                      value={confirmPassword}
+                        id="invite-password-confirm"
-                      onChange={(event) =>
+                        type="password"
-                        setConfirmPassword(event.target.value)
+                        value={confirmPassword}
-                      }
+                        onChange={(event) =>
-                      autoComplete="new-password"
+                          setConfirmPassword(event.target.value)
-                    />
+                        }
+                        className="pl-10"
+                        autoComplete="new-password"
+                      />
+                    </div>
                   </div>
                   <Button
                     className="w-full"
@@ -406,14 +410,6 @@ export default function AcceptInvitationPage() {
                     )}
                     {t('workspace.registerAndAccept')}
                   </Button>
-                  <Button
-                    variant="ghost"
-                    className="w-full"
-                    disabled={status === 'submitting'}
-                    onClick={() => navigate('/login?invitation=1')}
-                  >
-                    {t('workspace.alreadyHaveAccount')}
-                  </Button>
                 </>
               ) : (
                 <Button

web/tests/e2e/invitations.spec.ts

@@ -93,7 +93,7 @@ test('login preserves an explicit invitation email mismatch error', async ({
   });
 
   await page.goto('/invitations/accept#token=mismatch-invitation');
-  await page.getByRole('button', { name: 'I already have an account' }).click();
+  await page.goto('/login?invitation=1');
   await page.getByPlaceholder('Enter email address').fill('other@example.com');
   await page.getByPlaceholder('Enter password').fill('password');
   await page.getByRole('button', { name: 'Login with password' }).click();
@@ -184,9 +184,19 @@ test('an OAuth-only OSS instance registers the invited email with a local passwo
   await expect(page.locator('#invite-email')).toHaveAttribute('readonly', '');
   await expect(page.locator('#invite-password')).toBeVisible();
   await expect(page.locator('#invite-password-confirm')).toBeVisible();
+  for (const inputId of ['invite-password', 'invite-password-confirm']) {
+    const input = page.locator(`#${inputId}`);
+    const field = input.locator('xpath=..');
+    await expect(field).toHaveClass(/relative/);
+    await expect(field.locator('svg')).toBeVisible();
+    await expect(input).toHaveClass(/pl-10/);
+  }
   await expect(
     page.getByRole('button', { name: 'Create account and accept' }),
   ).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'I already have an account' }),
+  ).toHaveCount(0);
   await expect(
     page.getByRole('button', { name: 'Login with LangBot Account' }),
   ).toHaveCount(0);