98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
import { Alert } from '@/components';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from '@/components/ui/select';
|
|
|
|
interface MemberCredentials {
|
|
accessType: string | null;
|
|
username: string;
|
|
credential: string;
|
|
confirmCredential: string;
|
|
}
|
|
|
|
interface Props {
|
|
form: MemberCredentials;
|
|
error: string | null;
|
|
onChange: (key: keyof MemberCredentials, value: string) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
const MemberCredentialsForm = ({ form, error, onChange, onSubmit }: Props) => {
|
|
return (
|
|
<div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
|
|
<h2 className="text-xl font-bold mb-4">Create Member Credentials</h2>
|
|
|
|
{error && (
|
|
<Alert variant="danger" className="mb-5">
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
{/* Access Type */}
|
|
<div>
|
|
<label>
|
|
<span className="text-red-500">*</span>Access Type
|
|
</label>
|
|
<Select onValueChange={(value) => onChange('accessType', value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select Access Type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Pin Credentials">Pin Credentials</SelectItem>
|
|
<SelectItem value="Secret Auth">Secret Auth</SelectItem>
|
|
<SelectItem value="APIkey">APIkey</SelectItem>
|
|
<SelectItem value="Web Credentials">Web Credentials</SelectItem>
|
|
<SelectItem value="OTM Tpay">OTM Tpay</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Username */}
|
|
<div>
|
|
<label>
|
|
<span className="text-red-500">*</span>Username
|
|
</label>
|
|
<Input value={form.username} onChange={(e) => onChange('username', e.target.value)} />
|
|
</div>
|
|
|
|
{/* Credentials */}
|
|
<div>
|
|
<label>
|
|
<span className="text-red-500">*</span>Credentials
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
value={form.credential}
|
|
onChange={(e) => onChange('credential', e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Confirm Credentials */}
|
|
<div>
|
|
<label>
|
|
<span className="text-red-500">*</span>Confirm Credentials
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
value={form.confirmCredential}
|
|
onChange={(e) => onChange('confirmCredential', e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<Button className="w-full" onClick={onSubmit}>
|
|
Create Account
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MemberCredentialsForm;
|