@proveanything/smartlinks-auth-ui
Version:
Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration
21 lines (20 loc) • 2.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import './AuthForm.css';
export const PhoneAuthForm = ({ onSubmit, onBack, loading, error, }) => {
const [phoneNumber, setPhoneNumber] = useState('');
const [verificationCode, setVerificationCode] = useState('');
const [codeSent, setCodeSent] = useState(false);
const handleSendCode = async (e) => {
e.preventDefault();
await onSubmit(phoneNumber);
setCodeSent(true);
};
const handleVerifyCode = async (e) => {
e.preventDefault();
await onSubmit(phoneNumber, verificationCode);
};
return (_jsxs("form", { className: "auth-form", onSubmit: codeSent ? handleVerifyCode : handleSendCode, children: [_jsxs("div", { className: "auth-form-header", children: [_jsx("h2", { className: "auth-form-title", children: "Phone Authentication" }), _jsx("p", { className: "auth-form-subtitle", children: codeSent
? 'Enter the verification code sent to your phone.'
: 'Enter your phone number to receive a verification code.' })] }), error && (_jsxs("div", { className: "auth-error", role: "alert", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), !codeSent ? (_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "phoneNumber", className: "auth-label", children: "Phone Number" }), _jsx("input", { type: "tel", id: "phoneNumber", className: "auth-input", value: phoneNumber, onChange: (e) => setPhoneNumber(e.target.value), required: true, disabled: loading, placeholder: "+1 (555) 123-4567" })] })) : (_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "verificationCode", className: "auth-label", children: "Verification Code" }), _jsx("input", { type: "text", id: "verificationCode", className: "auth-input", value: verificationCode, onChange: (e) => setVerificationCode(e.target.value), required: true, disabled: loading, placeholder: "123456", maxLength: 6, pattern: "[0-9]{6}" })] })), _jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (_jsx("span", { className: "auth-spinner" })) : codeSent ? ('Verify Code') : ('Send Code') }), _jsx("div", { className: "auth-divider", children: _jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to login" }) })] }));
};