2021-10-02 03:45:08 +09:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-10-26 09:32:52 +09:00
|
|
|
import { useHistory } from 'react-router';
|
2021-10-02 03:45:08 +09:00
|
|
|
import { LoadingButton } from '@material-ui/lab';
|
|
|
|
import axios from 'axios';
|
|
|
|
|
2021-10-07 03:28:26 +09:00
|
|
|
import IconButton from "@material-ui/core/IconButton";
|
2021-10-26 09:32:52 +09:00
|
|
|
import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
|
2021-10-02 03:45:08 +09:00
|
|
|
|
2021-11-09 17:15:04 +09:00
|
|
|
const ChildSignUp = (props) => {
|
2021-10-26 09:32:52 +09:00
|
|
|
|
|
|
|
const history = useHistory();
|
|
|
|
const [submit, setSubmit] = useState(false);
|
|
|
|
|
2021-10-02 20:49:05 +09:00
|
|
|
const [first_name, setFirstName] = useState('');
|
|
|
|
const [last_name, setLastName] = useState('');
|
2021-11-05 00:39:40 +09:00
|
|
|
const [identity, setIdentity] = useState('');
|
2021-10-02 03:45:08 +09:00
|
|
|
const [email, setEmail] = useState('');
|
|
|
|
const [password, setPassword] = useState('');
|
2021-11-23 18:50:55 +09:00
|
|
|
const [password_confirmation, setPasswordConfirmation] = useState('');
|
2021-10-02 20:49:05 +09:00
|
|
|
const [company, setCompany] = useState('');
|
2021-11-10 12:38:57 +09:00
|
|
|
const [image, setImage] = useState(null);
|
2021-10-02 20:49:05 +09:00
|
|
|
|
2021-10-26 09:32:52 +09:00
|
|
|
const [_422errors, set422Errors] = useState({
|
2021-10-02 20:49:05 +09:00
|
|
|
first_name:'',
|
|
|
|
last_name:'',
|
2021-11-05 00:39:40 +09:00
|
|
|
identity:'',
|
2021-10-02 20:49:05 +09:00
|
|
|
email:'',
|
|
|
|
password:'',
|
2021-11-23 18:50:55 +09:00
|
|
|
password_confirmation: '',
|
2021-10-02 20:49:05 +09:00
|
|
|
image:'',
|
|
|
|
company:''
|
2021-10-26 09:32:52 +09:00
|
|
|
});
|
2021-10-02 03:45:08 +09:00
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
2021-10-03 02:49:31 +09:00
|
|
|
|
2021-10-26 09:32:52 +09:00
|
|
|
e.preventDefault();
|
|
|
|
set422Errors({
|
|
|
|
first_name:'',
|
|
|
|
last_name:'',
|
2021-11-05 00:39:40 +09:00
|
|
|
identity:'',
|
2021-10-26 09:32:52 +09:00
|
|
|
email:'',
|
|
|
|
password:'',
|
2021-11-23 18:50:55 +09:00
|
|
|
password_confirmation: '',
|
2021-10-26 09:32:52 +09:00
|
|
|
image:'',
|
|
|
|
company:''
|
|
|
|
});
|
|
|
|
setSubmit(true);
|
2021-10-02 03:45:08 +09:00
|
|
|
const formdata = new FormData();
|
2021-10-02 20:49:05 +09:00
|
|
|
formdata.append('first_name', first_name);
|
|
|
|
formdata.append('last_name', last_name);
|
2021-11-05 00:39:40 +09:00
|
|
|
formdata.append('identity', identity);
|
2021-10-02 03:45:08 +09:00
|
|
|
formdata.append('email', email);
|
|
|
|
formdata.append('password', password);
|
2021-11-23 18:50:55 +09:00
|
|
|
formdata.append('password_confirmation', password_confirmation);
|
2021-10-02 20:49:05 +09:00
|
|
|
formdata.append('company', company);
|
|
|
|
formdata.append('image', image);
|
2021-11-09 17:15:04 +09:00
|
|
|
formdata.append('token', props.match.params.token);
|
2021-10-26 09:32:52 +09:00
|
|
|
axios.post('/api/children/registerMain', formdata)
|
|
|
|
.then(response => {
|
|
|
|
setSubmit(false);
|
|
|
|
switch(response.data.status_code){
|
2021-11-18 20:42:53 +09:00
|
|
|
case 200: history.push({pathname: '/c-account/register/complete/'+props.match.params.token, state: response.data.success_messages}); break;
|
2021-10-26 09:32:52 +09:00
|
|
|
case 422: set422Errors(response.data.error_messages); break;
|
2021-11-18 20:42:53 +09:00
|
|
|
case 400: history.push({pathname: '/c-account/register/error/'+props.match.params.token, state: response.data.error_messages}); break;
|
2021-10-26 09:32:52 +09:00
|
|
|
};
|
|
|
|
})
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-10-02 12:19:28 +09:00
|
|
|
const handleImageChange = (e) => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
let reader = new FileReader();
|
|
|
|
let _file = e.target.files[0];
|
|
|
|
|
|
|
|
reader.readAsDataURL(_file);
|
|
|
|
|
|
|
|
reader.onloadend = () => {
|
2021-10-02 20:49:05 +09:00
|
|
|
setImage(reader.result);
|
2021-10-02 12:19:28 +09:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2021-10-02 03:45:08 +09:00
|
|
|
return (
|
2021-11-18 20:42:53 +09:00
|
|
|
<form onSubmit={handleSubmit} className="edit-form">
|
2021-10-26 09:32:52 +09:00
|
|
|
<p className="text-center font-weight-bold ft-25">本登録</p>
|
2021-10-02 12:19:28 +09:00
|
|
|
<div className="mt-25-px">
|
|
|
|
<input type="file" id="avatar" name="avatar" className="d-none" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)}/>
|
2021-10-26 09:32:52 +09:00
|
|
|
<div className={`avatar-wrapper ${ _422errors.image && "is-invalid c-input__target" }` }>
|
2021-10-02 17:21:23 +09:00
|
|
|
<label htmlFor="avatar" className='avatar-label'>
|
2021-11-09 01:46:20 +09:00
|
|
|
<IconButton color="primary" aria-label="upload picture" component="span" className="bg-yellow shadow-sm w-50-px h-50-px">
|
|
|
|
<PhotoCameraOutlinedIcon style={{width:'25px', height:'25px', color:'black'}}/>
|
2021-10-02 17:21:23 +09:00
|
|
|
</IconButton>
|
|
|
|
</label>
|
|
|
|
{
|
2021-11-09 01:46:20 +09:00
|
|
|
image && <img src={image} className="avatar-img" alt="avatar-img"/>
|
2021-10-02 17:21:23 +09:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
{
|
2021-10-26 09:32:52 +09:00
|
|
|
_422errors.image &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-10-26 09:32:52 +09:00
|
|
|
{ _422errors.image }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 12:19:28 +09:00
|
|
|
}
|
|
|
|
</div>
|
2021-10-02 03:45:08 +09:00
|
|
|
|
2021-10-03 15:26:02 +09:00
|
|
|
<div className="edit-set">
|
2021-11-30 08:06:29 +09:00
|
|
|
<label htmlFor="last_name" className="control-label ft-12"> 姓 </label>
|
|
|
|
<input type="text" name="last_name" id="last_name" className={`input-default input-nameSei input-h60 ${ _422errors.last_name && "is-invalid c-input__target" }`} value={last_name} onChange={e=>setLastName(e.target.value)}/>
|
2021-10-02 03:45:08 +09:00
|
|
|
{
|
2021-11-30 08:06:29 +09:00
|
|
|
_422errors.last_name &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-30 08:06:29 +09:00
|
|
|
{ _422errors.last_name }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
2021-10-03 15:26:02 +09:00
|
|
|
<div className="edit-set">
|
2021-11-30 08:06:29 +09:00
|
|
|
<label htmlFor="first_name" className="control-label ft-12"> 名 </label>
|
|
|
|
<input type="text" name="first_name" id="first_name" className={`input-default input-nameSei input-h60 ${ _422errors.first_name && "is-invalid c-input__target" }`} value={first_name} onChange={e=>setFirstName(e.target.value)}/>
|
2021-10-02 03:45:08 +09:00
|
|
|
{
|
2021-11-30 08:06:29 +09:00
|
|
|
_422errors.first_name &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-30 08:06:29 +09:00
|
|
|
{ _422errors.first_name }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
2021-10-10 05:51:00 +09:00
|
|
|
<div className="edit-set">
|
2021-11-05 00:39:40 +09:00
|
|
|
<label htmlFor="identity" className="control-label"> ID </label>
|
|
|
|
<input type="text" name="identity" id="identity" className={`input-default input-nameSei input-h60 input-w480 ${ _422errors.identity && "is-invalid c-input__target" }`} value={identity} onChange={e=>setIdentity(e.target.value)}/>
|
2021-10-10 05:51:00 +09:00
|
|
|
{
|
2021-11-05 00:39:40 +09:00
|
|
|
_422errors.identity &&
|
2021-10-10 05:51:00 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-05 00:39:40 +09:00
|
|
|
{ _422errors.identity }
|
2021-10-10 05:51:00 +09:00
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
2021-10-03 15:26:02 +09:00
|
|
|
<div className="edit-set">
|
2021-10-26 09:32:52 +09:00
|
|
|
<label htmlFor="email" className="control-label"> メールアドレス </label>
|
|
|
|
<input type="email" name="email" id="email" className = {`input-default input-nameSei input-h60 input-w480 ${ _422errors.email && "is-invalid c-input__target" }`} value={email} onChange={e=>setEmail(e.target.value)}/>
|
2021-10-02 03:45:08 +09:00
|
|
|
{
|
2021-10-26 09:32:52 +09:00
|
|
|
_422errors.email &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-10-26 09:32:52 +09:00
|
|
|
{ _422errors.email }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
2021-10-03 15:26:02 +09:00
|
|
|
<div className="edit-set">
|
2021-10-26 09:32:52 +09:00
|
|
|
<label htmlFor="password" className="control-label"> パスワード </label>
|
|
|
|
<input type="password" name="password" id="password" className = {`input-default input-nameSei input-h60 input-w480 ${ _422errors.password && "is-invalid c-input__target" }`} value={password} onChange={e=>setPassword(e.target.value)}/>
|
2021-10-02 03:45:08 +09:00
|
|
|
{
|
2021-10-26 09:32:52 +09:00
|
|
|
_422errors.password &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-10-26 09:32:52 +09:00
|
|
|
{ _422errors.password }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
</div>
|
2021-11-23 18:50:55 +09:00
|
|
|
|
|
|
|
<div className="edit-set">
|
|
|
|
<label htmlFor="password_confirmation" className="control-label"> 確認用パスワード </label>
|
|
|
|
<input type="password" name="password_confirmation" id="password_confirmation" className = {`input-default input-nameSei input-h60 input-w480 ${ _422errors.password_confirmation && "is-invalid c-input__target" }`} value={password_confirmation} onChange={e=>setPasswordConfirmation(e.target.value)}/>
|
|
|
|
{
|
|
|
|
_422errors.password_confirmation &&
|
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
|
|
|
{ _422errors.password_confirmation }
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</div>
|
2021-10-02 03:45:08 +09:00
|
|
|
|
2021-10-03 15:26:02 +09:00
|
|
|
<div className="edit-set">
|
2021-10-26 09:32:52 +09:00
|
|
|
<label htmlFor="company" className="control-label"> 所屈している会社名を記載 </label>
|
|
|
|
<input type="text" name="company" id="company" className = {`input-default input-nameSei input-h60 input-w480 ${ _422errors.company && "is-invalid c-input__target" }`} value={company} onChange={e=>setCompany(e.target.value)}/>
|
2021-10-02 03:45:08 +09:00
|
|
|
{
|
2021-10-26 09:32:52 +09:00
|
|
|
_422errors.company &&
|
2021-10-03 15:26:02 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-10-26 09:32:52 +09:00
|
|
|
{ _422errors.company }
|
2021-10-03 15:26:02 +09:00
|
|
|
</span>
|
2021-10-02 03:45:08 +09:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
2021-11-18 20:42:53 +09:00
|
|
|
<LoadingButton type="submit" fullWidth
|
|
|
|
className="btn-edit btn-default btn-h75 bg-yellow rounded-20"
|
|
|
|
loading={submit}>
|
|
|
|
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>本登録</span>
|
|
|
|
</LoadingButton>
|
2021-10-02 03:45:08 +09:00
|
|
|
</form>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-10-06 03:23:58 +09:00
|
|
|
|
2021-11-04 15:38:36 +09:00
|
|
|
export default ChildSignUp;
|