@better-forge/ui 0.0.0-stage → 0.1.1

package/src/pages/Login.tsx

@@ -0,0 +1,275 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { api, enterAfterSignIn, setSession, type AuthUser } from '../api/client'
+import { uiConfig } from '../config'
+import { useDarkMode } from '../hooks/useDarkMode'
+import { Alert } from '../components/ui'
+
+interface AuthConfig {
+  passwordLogin: boolean
+  /** `loginUrl` is on the host the identity provider returns to, which may differ from the one this page is on. */
+  oidc: { label: string; loginUrl?: string } | null
+}
+
+const SSO_ERRORS: Record<string, string> = {
+  oidc_failed: 'Single sign-on failed. Try again or contact an administrator.',
+  oidc_no_account: 'No account matches your single sign-on identity. Ask an administrator to create one.',
+}
+
+/** What the sign-in page says about the product beside the form. */
+export interface LoginPageProps {
+  headline: ReactNode
+  tagline: string
+  features: ReadonlyArray<{ icon: string; label: string }>
+}
+
+export default function LoginPage({ headline, tagline, features }: LoginPageProps) {
+  const navigate = useNavigate()
+  const [isDark, toggleDark] = useDarkMode()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [code, setCode] = useState('')
+  const [challengeToken, setChallengeToken] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [searchParams] = useSearchParams()
+  // An SSO sign-in of a user with 2FA comes back here for the code; the server holds the challenge in a cookie.
+  const [ssoChallenge, setSsoChallenge] = useState(searchParams.get('two-factor') === 'sso')
+  const codeStep = !!challengeToken || ssoChallenge
+  const [authConfig, setAuthConfig] = useState<AuthConfig>({ passwordLogin: true, oidc: null })
+  const ssoError = SSO_ERRORS[searchParams.get('error') ?? '']
+
+  useEffect(() => {
+    api.get<AuthConfig>('/auth/config').then(setAuthConfig).catch(() => { /* keep password-only default */ })
+  }, [])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      if (codeStep) {
+        const user = await api.post<AuthUser>('/auth/2fa/verify', challengeToken ? { challengeToken, code } : { code })
+        setSession(user)
+        enterAfterSignIn(user, navigate)
+      } else {
+        const res = await api.post<AuthUser | { requiresTwoFactor: true; challengeToken: string }>('/auth/login', { email, password })
+        if ('requiresTwoFactor' in res) {
+          setChallengeToken(res.challengeToken)
+          setPassword('')
+        } else {
+          setSession(res)
+          enterAfterSignIn(res, navigate)
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex" style={{ background: 'var(--m3-surface)' }}>
+      {/* Left branding panel */}
+      <div
+        className="hidden lg:flex flex-col justify-between w-[400px] flex-shrink-0 p-12 relative overflow-hidden"
+        style={{
+          background: 'var(--m3-surface-container-low)',
+          borderRight: '1px solid var(--m3-outline-variant)',
+        }}
+      >
+        {/* Decorative gradient blobs */}
+        <div
+          className="absolute -top-32 -left-32 w-80 h-80 rounded-full pointer-events-none"
+          style={{ background: 'radial-gradient(circle, color-mix(in srgb, var(--m3-primary) 12%, transparent) 0%, transparent 70%)' }}
+        />
+        <div
+          className="absolute bottom-0 right-0 w-96 h-96 rounded-full pointer-events-none"
+          style={{ background: 'radial-gradient(circle, color-mix(in srgb, var(--m3-primary) 6%, transparent) 0%, transparent 70%)' }}
+        />
+
+        {/* Logo */}
+        <div className="relative flex justify-center">
+          <img
+            src={isDark ? uiConfig().brand.logoDark : uiConfig().brand.logoLight}
+            alt={uiConfig().brand.name}
+            style={{ height: '160px', objectFit: 'contain' }}
+          />
+        </div>
+
+        {/* Main copy */}
+        <div className="relative space-y-4">
+          <h2 className="font-headline font-extrabold text-4xl leading-[1.1] tracking-tight" style={{ color: 'var(--m3-on-surface)' }}>
+            {headline}
+          </h2>
+          <p className="text-base font-sans leading-relaxed" style={{ color: 'var(--m3-secondary)' }}>
+            {tagline}
+          </p>
+        </div>
+
+        {/* Features */}
+        <ul className="relative space-y-3">
+          {features.map((feature) => (
+            <li key={feature.label} className="flex items-center gap-3 text-sm font-sans" style={{ color: 'var(--m3-on-surface-variant)' }}>
+              <span
+                className="material-symbols-outlined rounded-lg p-1.5"
+                aria-hidden="true"
+                style={{ fontSize: '18px', background: 'var(--admin-icon-container)', color: 'var(--admin-icon-color)' }}
+              >
+                {feature.icon}
+              </span>
+              {feature.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex-1 relative flex items-center justify-center px-6 py-12">
+        {/* Dark mode toggle */}
+        <button
+          type="button"
+          onClick={toggleDark}
+          className="btn-icon absolute top-5 right-5 w-9 h-9 rounded-full"
+          aria-label="Toggle dark mode"
+        >
+          <span className="material-symbols-outlined" aria-hidden="true">
+            {isDark ? 'light_mode' : 'dark_mode'}
+          </span>
+        </button>
+
+        <div className="w-full max-w-[400px]">
+          {/* Mobile logo */}
+          <div className="flex justify-center mb-8 lg:hidden">
+            <img
+              src={isDark ? uiConfig().brand.logoDark : uiConfig().brand.logoLight}
+              alt={uiConfig().brand.name}
+              style={{ height: '32px', objectFit: 'contain' }}
+            />
+          </div>
+
+          <div
+            className="rounded-[20px] px-6 py-8 md:px-9 md:pt-9 md:pb-8"
+            style={{
+              background: 'var(--m3-surface-container-lowest)',
+              border: '1px solid var(--m3-outline-variant)',
+              boxShadow: '0 1px 2px rgba(19,27,46,0.04), 0 16px 40px rgba(19,27,46,0.06)',
+            }}
+          >
+
+            <div className="mb-8">
+              <h1 className="font-headline font-bold text-2xl" style={{ color: 'var(--m3-on-surface)' }}>
+                Welcome back
+              </h1>
+              <p className="text-sm font-sans mt-1.5" style={{ color: 'var(--m3-secondary)' }}>
+                Sign in to your admin panel
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {(error || ssoError) && <Alert tone="error">{error || ssoError}</Alert>}
+
+              {authConfig.oidc && !codeStep && (
+                <a href={authConfig.oidc.loginUrl ?? '/api/v1/auth/oidc/login'} className="btn btn-primary w-full h-12 font-headline font-bold text-[15px]">
+                  <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '20px' }}>key</span>
+                  {authConfig.oidc.label}
+                </a>
+              )}
+              {authConfig.oidc && authConfig.passwordLogin && !codeStep && (
+                <div className="flex items-center gap-3 text-xs font-sans" style={{ color: 'var(--m3-secondary)' }}>
+                  <span className="flex-1 h-px" style={{ background: 'var(--m3-outline-variant)' }} />
+                  or with email
+                  <span className="flex-1 h-px" style={{ background: 'var(--m3-outline-variant)' }} />
+                </div>
+              )}
+
+              {(authConfig.passwordLogin || codeStep) && <>
+
+              {!codeStep && <div>
+                <label htmlFor="login-email" className="block text-[13px] font-sans font-semibold mb-1.5" style={{ color: 'var(--m3-on-surface-variant)' }}>
+                  Email
+                </label>
+                <input
+                  id="login-email"
+                  type="email"
+                  autoComplete="username"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="input-m3"
+                  placeholder="name@company.com"
+                />
+              </div>}
+
+              {!codeStep && <div>
+                <label htmlFor="login-password" className="block text-[13px] font-sans font-semibold mb-1.5" style={{ color: 'var(--m3-on-surface-variant)' }}>
+                  Password
+                </label>
+                <div className="relative">
+                  <input
+                    id="login-password"
+                    type={showPassword ? 'text' : 'password'}
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    className="input-m3"
+                    style={{ paddingRight: '44px' }}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((shown) => !shown)}
+                    className="btn-icon absolute right-1 top-1/2 -translate-y-1/2 w-9 h-9 rounded-lg"
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    aria-pressed={showPassword}
+                  >
+                    <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '20px' }}>{showPassword ? 'visibility_off' : 'visibility'}</span>
+                  </button>
+                </div>
+              </div>}
+
+              {codeStep && (
+                <div>
+                  <label htmlFor="login-two-factor-code" className="block text-[13px] font-sans font-semibold mb-1.5" style={{ color: 'var(--m3-on-surface-variant)' }}>
+                    Authentication code
+                  </label>
+                  <input
+                    id="login-two-factor-code"
+                    type="text"
+                    autoComplete="one-time-code"
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                    required
+                    autoFocus
+                    className="input-m3"
+                    placeholder="6-digit code or recovery code"
+                  />
+                  <button
+                    type="button"
+                    className="text-xs mt-2 rounded focus-ring hover:underline"
+                    style={{ color: 'var(--m3-secondary)' }}
+                    onClick={() => { setChallengeToken(''); setSsoChallenge(false); setCode('') }}
+                  >
+                    Back to sign-in
+                  </button>
+                </div>
+              )}
+
+              {/* One filled button per screen: next to SSO the password form's button is outlined. */}
+              <button
+                type="submit"
+                disabled={loading}
+                className={`btn ${authConfig.oidc && !codeStep ? 'btn-secondary h-11' : 'btn-primary h-12'} w-full mt-2 font-headline font-bold`}
+              >
+                {loading ? 'Signing in…' : codeStep ? 'Verify & sign in' : 'Sign in'}
+              </button>
+              </>}
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/Settings.tsx

@@ -0,0 +1,264 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { api, clearSession, getCurrentUser, setSession, type AuthUser } from '../api/client'
+import { uiConfig } from '../config'
+import { ConfirmModal } from '../components/ConfirmModal'
+import { CopyButton } from '../components/CopyButton'
+import { SsoConfirmationNote, isSsoSession, useSsoConfirmation } from '../components/SsoConfirmation'
+import { Alert, PageContainer, PageHeader } from '../components/ui'
+import { DATE_FORMATS, TIME_FORMATS, formatDateTime, setDatePrefs, useDatePrefs, type DateFormat, type TimeFormat } from '../lib/dateFormat'
+
+interface TwoFactorSetup {
+  secret: string
+  uri: string
+  qrDataUrl: string
+  setupToken: string
+}
+
+export default function SettingsPage() {
+  const datePrefs = useDatePrefs()
+  const navigate = useNavigate()
+  const currentUser = getCurrentUser()
+  // An SSO session confirms these actions at the identity provider instead of with a password.
+  const sso = isSsoSession()
+  const confirmation = useSsoConfirmation()
+  const [current, setCurrent] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [securityPassword, setSecurityPassword] = useState('')
+  const [code, setCode] = useState('')
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(!!currentUser?.twoFactorEnabled)
+  const [setup, setSetup] = useState<TwoFactorSetup | null>(null)
+  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [message, setMessage] = useState('')
+  const [confirmLogoutAll, setConfirmLogoutAll] = useState(false)
+
+  function resetFeedback() {
+    setError('')
+    setMessage('')
+  }
+
+  function fail(err: unknown, fallback: string) {
+    setError(err instanceof Error ? err.message : fallback)
+  }
+
+  async function changePassword() {
+    if (password !== confirm) { setError('Passwords do not match'); return }
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return }
+    resetFeedback()
+    setLoading(true)
+    try {
+      const user = await confirmation.run(() => api.post<AuthUser>('/auth/change-password', sso ? { newPassword: password } : { currentPassword: current, newPassword: password }))
+      setSession(user)
+      setCurrent('')
+      setPassword('')
+      setConfirm('')
+      setMessage('Password changed. Other active sessions were signed out.')
+    } catch (err) {
+      fail(err, 'Failed to change password')
+    } finally { setLoading(false) }
+  }
+
+  async function beginTwoFactorSetup() {
+    resetFeedback()
+    setLoading(true)
+    try {
+      const result = await confirmation.run(() => api.post<TwoFactorSetup>('/auth/2fa/setup', sso ? {} : { currentPassword: securityPassword }))
+      setSetup(result)
+      setCode('')
+    } catch (err) {
+      fail(err, 'Failed to start two-factor setup')
+    } finally { setLoading(false) }
+  }
+
+  async function enableTwoFactor() {
+    if (!setup) return
+    resetFeedback()
+    setLoading(true)
+    try {
+      const result = await api.post<{ recoveryCodes: string[] }>('/auth/2fa/enable', { setupToken: setup.setupToken, code })
+      setRecoveryCodes(result.recoveryCodes)
+      setTwoFactorEnabled(true)
+      if (currentUser) setSession({ ...currentUser, twoFactorEnabled: true })
+      setSetup(null)
+      setSecurityPassword('')
+      setCode('')
+      setMessage('Two-factor authentication is enabled. Save the recovery codes now.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to enable two-factor authentication')
+    } finally { setLoading(false) }
+  }
+
+  async function disableTwoFactor() {
+    resetFeedback()
+    setLoading(true)
+    try {
+      await confirmation.run(() => api.post('/auth/2fa/disable', sso ? { code } : { currentPassword: securityPassword, code }))
+      setTwoFactorEnabled(false)
+      if (currentUser) setSession({ ...currentUser, twoFactorEnabled: false })
+      setSecurityPassword('')
+      setCode('')
+      setRecoveryCodes([])
+      setMessage('Two-factor authentication is disabled.')
+    } catch (err) {
+      fail(err, 'Failed to disable two-factor authentication')
+    } finally { setLoading(false) }
+  }
+
+  async function logoutEverywhere() {
+    resetFeedback()
+    setLoading(true)
+    try { await api.post('/auth/logout-all') }
+    finally {
+      clearSession()
+      navigate(`${uiConfig().basePath}/login`)
+    }
+  }
+
+  return (
+    <PageContainer>
+      <PageHeader title="Settings" subtitle="Manage your account and sign-in security" />
+
+      {(error || message) && (
+        <Alert tone={error ? 'error' : 'success'} className="max-w-2xl">{error || message}</Alert>
+      )}
+
+      <div className="grid gap-6 xl:grid-cols-3 max-w-7xl">
+        <section className="rounded-2xl p-6" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+          <h2 className="font-headline font-semibold text-lg mb-1">Change password</h2>
+          <p className="text-sm mb-5" style={{ color: 'var(--m3-secondary)' }}>Changing your password signs out every other active session.</p>
+          <form onSubmit={(event) => { event.preventDefault(); void changePassword() }} className="space-y-4">
+            {sso
+              ? <SsoConfirmationNote confirmation={confirmation} />
+              : <PasswordField label="Current password" value={current} onChange={setCurrent} placeholder="Enter current password" />}
+            <PasswordField label="New password" value={password} onChange={setPassword} placeholder="Minimum 8 characters" minLength={8} />
+            <PasswordField label="Confirm new password" value={confirm} onChange={setConfirm} placeholder="Repeat the new password" />
+            <button type="submit" disabled={loading} className="btn btn-primary">
+              {loading ? 'Saving…' : 'Update password'}
+            </button>
+          </form>
+        </section>
+        <section className="rounded-2xl p-6" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+          <div className="flex items-center justify-between gap-3 mb-1">
+            <h2 className="font-headline font-semibold text-lg">Two-factor authentication</h2>
+            <span className="text-xs font-semibold px-2.5 py-1 rounded-full" style={{
+              background: twoFactorEnabled ? 'var(--m3-up-bg)' : 'var(--m3-surface-container-high)',
+              color: twoFactorEnabled ? 'var(--m3-up)' : 'var(--m3-secondary)',
+            }}>{twoFactorEnabled ? 'Enabled' : 'Disabled'}</span>
+          </div>
+          <p className="text-sm mb-5" style={{ color: 'var(--m3-secondary)' }}>Use any TOTP authenticator application. Recovery codes work once each.</p>
+
+          {!twoFactorEnabled && !setup && recoveryCodes.length === 0 && (
+            <form className="space-y-4" onSubmit={(event) => { event.preventDefault(); void beginTwoFactorSetup() }}>
+              {sso
+                ? <SsoConfirmationNote confirmation={confirmation} />
+                : <PasswordField label="Current password" value={securityPassword} onChange={setSecurityPassword} placeholder="Confirm your password" />}
+              <button type="submit" disabled={loading || (!sso && !securityPassword)} className="btn btn-primary">Set up 2FA</button>
+            </form>
+          )}
+
+          {setup && (
+            <form className="space-y-4" onSubmit={(event) => { event.preventDefault(); void enableTwoFactor() }}>
+              <div className="rounded-xl p-5 flex flex-col items-center text-center" style={{ background: 'var(--m3-surface-container)' }}>
+                <p className="text-sm font-semibold mb-3">Scan this QR code with your authenticator app</p>
+                <img
+                  src={setup.qrDataUrl}
+                  alt="QR code for two-factor authentication setup"
+                  width={240}
+                  height={240}
+                  className="rounded-xl"
+                  style={{ background: '#ffffff' }}
+                />
+                <details className="w-full mt-4 text-left">
+                  <summary className="text-sm cursor-pointer" style={{ color: 'var(--m3-secondary)' }}>Cannot scan the QR code?</summary>
+                  <p className="text-xs mt-3 mb-2" style={{ color: 'var(--m3-secondary)' }}>Enter this setup key manually:</p>
+                  <code className="block text-sm break-all select-all">{setup.secret}</code>
+                  <a href={setup.uri} className="inline-block text-sm mt-3 underline">Open in authenticator app</a>
+                </details>
+              </div>
+              <TextField label="Authentication code" value={code} onChange={setCode} placeholder="123456" autoComplete="one-time-code" inputMode="numeric" />
+              <button type="submit" disabled={loading || !code} className="btn btn-primary">Verify and enable</button>
+            </form>
+          )}
+
+          {recoveryCodes.length > 0 && (
+            <div className="space-y-4">
+              <div className="rounded-xl p-4" style={{ background: 'var(--m3-surface-container)' }}>
+                <p className="text-sm font-semibold mb-3">Recovery codes — store them somewhere safe</p>
+                <div className="grid grid-cols-2 gap-2 font-mono text-sm select-all">
+                  {recoveryCodes.map((recoveryCode) => <code key={recoveryCode}>{recoveryCode}</code>)}
+                </div>
+              </div>
+              <CopyButton value={recoveryCodes.join('\n')} label="Copy codes" />
+            </div>
+          )}
+
+          {twoFactorEnabled && recoveryCodes.length === 0 && (
+            <form className="space-y-4" onSubmit={(event) => { event.preventDefault(); void disableTwoFactor() }}>
+              {sso
+                ? <SsoConfirmationNote confirmation={confirmation} />
+                : <PasswordField label="Current password" value={securityPassword} onChange={setSecurityPassword} placeholder="Confirm your password" />}
+              <TextField label="Authentication or recovery code" value={code} onChange={setCode} placeholder="Code" autoComplete="one-time-code" />
+              <button type="submit" disabled={loading || (!sso && !securityPassword) || !code} className="btn btn-danger-outline">Disable 2FA</button>
+            </form>
+          )}
+        </section>
+        <section className="rounded-2xl p-6" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+          <h2 className="font-headline font-semibold text-lg">Date and time format</h2>
+          <p className="text-sm mt-1 mb-4" style={{ color: 'var(--m3-secondary)' }}>Applies to this browser only. Now: {formatDateTime(Date.now())}</p>
+          <div className="space-y-4">
+            <div className="flex flex-col gap-1">
+              <label htmlFor="date-format" className="text-sm font-medium">Date</label>
+              <select id="date-format" className="input-sig" value={datePrefs.date} onChange={(e) => setDatePrefs({ ...datePrefs, date: e.target.value as DateFormat })}>
+                {DATE_FORMATS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
+              </select>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label htmlFor="time-format" className="text-sm font-medium">Time</label>
+              <select id="time-format" className="input-sig" value={datePrefs.time} onChange={(e) => setDatePrefs({ ...datePrefs, time: e.target.value as TimeFormat })}>
+                {TIME_FORMATS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
+              </select>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <section className="rounded-2xl p-6 max-w-5xl" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+        <h2 className="font-headline font-semibold text-lg">Active sessions</h2>
+        <p className="text-sm mt-1 mb-4" style={{ color: 'var(--m3-secondary)' }}>Sign out this browser and every other active session for your account.</p>
+        <button type="button" disabled={loading} onClick={() => setConfirmLogoutAll(true)} className="btn btn-danger-outline">Sign out everywhere</button>
+      </section>
+      {confirmLogoutAll && (
+        <ConfirmModal
+          title="Sign out everywhere"
+          message="Sign out this browser and every other active session for your account? You will need to sign in again."
+          confirmLabel="Sign out everywhere"
+          pending={loading}
+          pendingLabel="Signing out…"
+          onConfirm={() => void logoutEverywhere()}
+          onCancel={() => setConfirmLogoutAll(false)}
+        />
+      )}
+    </PageContainer>
+  )
+}
+
+function PasswordField({ label, value, onChange, placeholder, minLength }: { label: string; value: string; onChange: (value: string) => void; placeholder: string; minLength?: number }) {
+  return (
+    <label className="block">
+      <span className="block font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>{label}</span>
+      <input type="password" value={value} onChange={(event) => onChange(event.target.value)} required minLength={minLength} className="input-sig w-full" placeholder={placeholder} />
+    </label>
+  )
+}
+
+function TextField({ label, value, onChange, placeholder, autoComplete, inputMode }: { label: string; value: string; onChange: (value: string) => void; placeholder: string; autoComplete?: string; inputMode?: 'numeric' }) {
+  return (
+    <label className="block">
+      <span className="block font-mono text-xs uppercase tracking-wider mb-2" style={{ color: 'var(--m3-secondary)' }}>{label}</span>
+      <input type="text" inputMode={inputMode} value={value} onChange={(event) => onChange(event.target.value)} required className="input-sig w-full" placeholder={placeholder} autoComplete={autoComplete} />
+    </label>
+  )
+}