112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
|
|
|
|
const CreateClerk = ({ shopId }) => {
|
|
const [email, setEmail] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setMessage('');
|
|
|
|
// Basic validation
|
|
if (!email || !username || !password) {
|
|
setMessage('All fields are required');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const create = await createClerks(shopId, email, username, password);
|
|
|
|
if(create) setMessage('Clerk created successfully');
|
|
else setMessage('failed')
|
|
} catch (error) {
|
|
setMessage('Error creating clerk');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<h2 style={styles.header}>Create Clerk</h2>
|
|
<form onSubmit={handleSubmit} style={styles.form}>
|
|
<input
|
|
type="email"
|
|
placeholder="Email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<button type="submit" style={styles.button} disabled={loading}>
|
|
{loading ? 'Creating...' : 'Create Clerk'}
|
|
</button>
|
|
{message && <p style={styles.message}>{message}</p>}
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Basic styling to make it mobile-friendly
|
|
const styles = {
|
|
container: {
|
|
width: '100%',
|
|
maxWidth: '400px',
|
|
margin: '0 auto',
|
|
padding: '20px',
|
|
boxSizing: 'border-box',
|
|
},
|
|
header: {
|
|
textAlign: 'center',
|
|
marginBottom: '20px',
|
|
},
|
|
form: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '15px',
|
|
},
|
|
input: {
|
|
padding: '10px',
|
|
fontSize: '16px',
|
|
borderRadius: '5px',
|
|
border: '1px solid #ccc',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
},
|
|
button: {
|
|
padding: '10px',
|
|
fontSize: '16px',
|
|
borderRadius: '5px',
|
|
border: 'none',
|
|
backgroundColor: '#28a745',
|
|
color: 'white',
|
|
cursor: 'pointer',
|
|
},
|
|
message: {
|
|
textAlign: 'center',
|
|
color: 'red',
|
|
marginTop: '10px',
|
|
},
|
|
};
|
|
|
|
export default CreateClerk;
|