| import { X } from 'lucide-react' |
|
|
| export default function AddAccountModal({ |
| show, |
| t, |
| newAccount, |
| setNewAccount, |
| loading, |
| onClose, |
| onAdd, |
| }) { |
| if (!show) { |
| return null |
| } |
|
|
| return ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in"> |
| <div className="bg-card w-full max-w-md rounded-xl border border-border shadow-2xl overflow-hidden animate-in zoom-in-95"> |
| <div className="p-4 border-b border-border flex justify-between items-center"> |
| <h3 className="font-semibold">{t('accountManager.modalAddAccountTitle')}</h3> |
| <button onClick={onClose} className="text-muted-foreground hover:text-foreground"> |
| <X className="w-5 h-5" /> |
| </button> |
| </div> |
| <div className="p-6 space-y-4"> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.accountTypeLabel')}</label> |
| <div className="flex gap-3"> |
| <label className={`flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${ |
| (newAccount.role || 'normal') === 'normal' |
| ? 'border-primary bg-primary/10 text-primary' |
| : 'border-border hover:border-primary/50' |
| }`}> |
| <input |
| type="radio" |
| name="account-role" |
| value="normal" |
| checked={(newAccount.role || 'normal') === 'normal'} |
| onChange={() => setNewAccount({ ...newAccount, role: 'normal' })} |
| className="sr-only" |
| /> |
| <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${ |
| (newAccount.role || 'normal') === 'normal' ? 'border-primary' : 'border-muted-foreground' |
| }`}> |
| {(newAccount.role || 'normal') === 'normal' && <div className="w-2 h-2 rounded-full bg-primary" />} |
| </div> |
| <div> |
| <div className="text-sm font-medium">{t('accountManager.roleNormal')}</div> |
| <div className="text-xs text-muted-foreground">{t('accountManager.roleNormalDesc')}</div> |
| </div> |
| </label> |
| <label className={`flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${ |
| newAccount.role === 'standby' |
| ? 'border-amber-500 bg-amber-500/10 text-amber-500' |
| : 'border-border hover:border-amber-500/50' |
| }`}> |
| <input |
| type="radio" |
| name="account-role" |
| value="standby" |
| checked={newAccount.role === 'standby'} |
| onChange={() => setNewAccount({ ...newAccount, role: 'standby' })} |
| className="sr-only" |
| /> |
| <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${ |
| newAccount.role === 'standby' ? 'border-amber-500' : 'border-muted-foreground' |
| }`}> |
| {newAccount.role === 'standby' && <div className="w-2 h-2 rounded-full bg-amber-500" />} |
| </div> |
| <div> |
| <div className="text-sm font-medium">{t('accountManager.roleStandby')}</div> |
| <div className="text-xs text-muted-foreground">{t('accountManager.roleStandbyDesc')}</div> |
| </div> |
| </label> |
| </div> |
| </div> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.nameOptional')}</label> |
| <input |
| type="text" |
| className="input-field" |
| placeholder={t('accountManager.namePlaceholder')} |
| value={newAccount.name} |
| onChange={e => setNewAccount({ ...newAccount, name: e.target.value })} |
| /> |
| </div> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.remarkOptional')}</label> |
| <input |
| type="text" |
| className="input-field" |
| placeholder={t('accountManager.remarkPlaceholder')} |
| value={newAccount.remark} |
| onChange={e => setNewAccount({ ...newAccount, remark: e.target.value })} |
| /> |
| </div> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.emailOptional')}</label> |
| <input |
| type="email" |
| className="input-field" |
| placeholder="user@example.com" |
| value={newAccount.email} |
| onChange={e => setNewAccount({ ...newAccount, email: e.target.value })} |
| /> |
| </div> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.mobileOptional')}</label> |
| <input |
| type="text" |
| className="input-field" |
| placeholder="+86..." |
| value={newAccount.mobile} |
| onChange={e => setNewAccount({ ...newAccount, mobile: e.target.value })} |
| /> |
| </div> |
| <div> |
| <label className="block text-sm font-medium mb-1.5">{t('accountManager.passwordLabel')} <span className="text-destructive">*</span></label> |
| <input |
| type="password" |
| className="input-field bg-[#09090b]" |
| placeholder={t('accountManager.passwordPlaceholder')} |
| value={newAccount.password} |
| onChange={e => setNewAccount({ ...newAccount, password: e.target.value })} |
| /> |
| </div> |
| <div className="flex justify-end gap-2 pt-2"> |
| <button onClick={onClose} className="px-4 py-2 rounded-lg border border-border hover:bg-secondary transition-colors text-sm font-medium">{t('actions.cancel')}</button> |
| <button onClick={onAdd} disabled={loading} className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50"> |
| {loading ? t('accountManager.addAccountLoading') : t('accountManager.addAccountAction')} |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| ) |
| } |
|
|
