frontend finished

frontend/src/components/forms/TotpForm.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+
+const TotpForm = ({ onSubmit, isLoading, onBack }) => {
+  const [totpCode, setTotpCode] = useState('')
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    onSubmit(totpCode.replace(/\s+/g, ''))
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="d-flex flex-column gap-3">
+      <div>
+        <label htmlFor="totpCode" className="form-label">Codigo TOTP</label>
+        <input
+          id="totpCode"
+          name="totpCode"
+          type="text"
+          pattern="[0-9]{6}"
+          inputMode="numeric"
+          className="form-control"
+          value={totpCode}
+          onChange={(event) => setTotpCode(event.target.value)}
+          placeholder="123456"
+          required
+        />
+        <div className="form-text">Introduce el codigo de tu app de autenticacion</div>
+      </div>
+      <div className="d-flex gap-2">
+        {onBack && (
+          <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={onBack}
+            disabled={isLoading}
+          >
+            Configurar 2FA
+          </button>
+        )}
+        <button type="submit" className="btn btn-success ms-auto" disabled={isLoading}>
+          {isLoading ? 'Validando...' : 'Validar codigo'}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default TotpForm