2021-11-10 04:34:59 +09:00
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import { useHistory } from 'react-router';
|
|
|
|
import { LoadingButton } from '@material-ui/lab';
|
|
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
|
|
import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
|
2021-11-11 00:03:05 +09:00
|
|
|
import axios from 'axios';
|
|
|
|
|
|
|
|
import Alert from '../../../component/alert';
|
|
|
|
|
2021-11-10 04:34:59 +09:00
|
|
|
|
|
|
|
const ParentSignUp = (props) => {
|
|
|
|
|
|
|
|
const history = useHistory();
|
|
|
|
const [submit, setSubmit] = useState(false);
|
|
|
|
|
2021-11-11 18:03:02 +09:00
|
|
|
const [image, setImage] = useState(null);
|
2021-11-11 00:03:05 +09:00
|
|
|
const [company, setCompany] = useState('');
|
|
|
|
const [password, setPassword] = useState('');
|
2021-11-23 18:50:55 +09:00
|
|
|
const [password_confirmation, setPasswordConfirmation] = useState('');
|
2021-11-11 00:03:05 +09:00
|
|
|
const [tel, setTel] = useState('');
|
|
|
|
const [profile, setProfile] = useState('');
|
2021-11-10 04:34:59 +09:00
|
|
|
|
|
|
|
const [_422errors, set422Errors] = useState({
|
|
|
|
image:'',
|
2021-11-11 00:03:05 +09:00
|
|
|
company:'',
|
|
|
|
password:'',
|
2021-11-23 18:50:55 +09:00
|
|
|
password_confirmation: '',
|
2021-11-11 00:03:05 +09:00
|
|
|
tel:'',
|
|
|
|
profile:'',
|
2021-11-10 04:34:59 +09:00
|
|
|
});
|
2021-11-11 00:03:05 +09:00
|
|
|
const [_400error, set400Error] = useState('');
|
2021-11-10 04:34:59 +09:00
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
set422Errors({
|
|
|
|
image:'',
|
2021-11-11 00:03:05 +09:00
|
|
|
company:'',
|
|
|
|
password:'',
|
2021-11-23 18:50:55 +09:00
|
|
|
password_confirmation: '',
|
2021-11-11 00:03:05 +09:00
|
|
|
tel:'',
|
|
|
|
profile:'',
|
2021-11-10 04:34:59 +09:00
|
|
|
});
|
|
|
|
setSubmit(true);
|
|
|
|
const formdata = new FormData();
|
|
|
|
formdata.append('image', image);
|
2021-11-11 00:03:05 +09:00
|
|
|
formdata.append('company', company);
|
|
|
|
formdata.append('password', password);
|
2021-11-23 18:50:55 +09:00
|
|
|
formdata.append('password_confirmation', password_confirmation);
|
2021-11-11 00:03:05 +09:00
|
|
|
formdata.append('tel', tel);
|
|
|
|
formdata.append('profile', profile);
|
2021-11-10 04:34:59 +09:00
|
|
|
formdata.append('token', props.match.params.token);
|
2021-11-11 00:03:05 +09:00
|
|
|
axios.post('/api/fathers/registerMain', formdata)
|
2021-11-10 04:34:59 +09:00
|
|
|
.then(response => {
|
|
|
|
setSubmit(false);
|
|
|
|
switch(response.data.status_code){
|
2021-11-18 20:42:53 +09:00
|
|
|
case 200: history.push({pathname: '/p-account/register/complete/'+props.match.params.token, state: response.data.success_messages}); break;
|
2021-11-10 04:34:59 +09:00
|
|
|
case 422: set422Errors(response.data.error_messages); break;
|
2021-11-11 00:03:05 +09:00
|
|
|
case 400: set400Error(response.data.error_messages); break;
|
2021-11-18 20:42:53 +09:00
|
|
|
case 401: history.push({pathname: '/p-account/register/error/'+props.match.params.token, state: response.data.error_messages}); break;
|
2021-11-10 04:34:59 +09:00
|
|
|
};
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const handleImageChange = (e) => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
let reader = new FileReader();
|
|
|
|
let _file = e.target.files[0];
|
|
|
|
|
|
|
|
reader.readAsDataURL(_file);
|
|
|
|
|
|
|
|
reader.onloadend = () => {
|
|
|
|
setImage(reader.result);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2021-11-18 20:42:53 +09:00
|
|
|
<form onSubmit={handleSubmit} className="edit-form">
|
2021-11-10 04:34:59 +09:00
|
|
|
<p className="text-center font-weight-bold ft-25">本登録</p>
|
|
|
|
<div className="mt-25-px">
|
|
|
|
<input type="file" id="avatar" name="avatar" className="d-none" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)}/>
|
|
|
|
<div className={`avatar-wrapper ${ _422errors.image && "is-invalid c-input__target" }` }>
|
|
|
|
<label htmlFor="avatar" className='avatar-label'>
|
|
|
|
<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'}}/>
|
|
|
|
</IconButton>
|
|
|
|
</label>
|
|
|
|
{
|
|
|
|
image && <img src={image} className="avatar-img" alt="avatar-img"/>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
_422errors.image &&
|
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
|
|
|
{ _422errors.image }
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="edit-set">
|
2021-11-11 00:03:05 +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-11-10 04:34:59 +09:00
|
|
|
{
|
2021-11-11 00:03:05 +09:00
|
|
|
_422errors.company &&
|
2021-11-10 04:34:59 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-11 00:03:05 +09:00
|
|
|
{ _422errors.company }
|
2021-11-10 04:34:59 +09:00
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="edit-set">
|
2021-11-11 00:03:05 +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-11-10 04:34:59 +09:00
|
|
|
{
|
2021-11-11 00:03:05 +09:00
|
|
|
_422errors.password &&
|
2021-11-10 04:34:59 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-11 00:03:05 +09:00
|
|
|
{ _422errors.password }
|
2021-11-10 04:34:59 +09:00
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</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-11-11 00:03:05 +09:00
|
|
|
|
2021-11-10 04:34:59 +09:00
|
|
|
<div className="edit-set">
|
2021-11-11 00:03:05 +09:00
|
|
|
<label htmlFor="tel" className="control-label"> 電話番号 </label>
|
|
|
|
<input type="text" name="tel" id="tel" className={`input-default input-nameSei input-h60 input-w480 ${ _422errors.tel && "is-invalid c-input__target" }`} value={tel} onChange={e=>setTel(e.target.value)}/>
|
2021-11-10 04:34:59 +09:00
|
|
|
{
|
2021-11-11 00:03:05 +09:00
|
|
|
_422errors.tel &&
|
2021-11-10 04:34:59 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-11 00:03:05 +09:00
|
|
|
{ _422errors.tel }
|
2021-11-10 04:34:59 +09:00
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="edit-set">
|
2021-11-11 00:03:05 +09:00
|
|
|
<label className="control-label" htmlFor="profile"> プロフィール </label>
|
|
|
|
<textarea id="profile" value={ profile } onChange={e=>setProfile(e.target.value)} rows="8" className={`textarea-default rounded-20 ${ _422errors.profile && 'is-invalid c-input__target'} `}/>
|
2021-11-10 04:34:59 +09:00
|
|
|
{
|
2021-11-11 00:03:05 +09:00
|
|
|
_422errors.profile &&
|
2021-11-10 04:34:59 +09:00
|
|
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
2021-11-11 00:03:05 +09:00
|
|
|
{_422errors.profile}
|
|
|
|
</span>
|
2021-11-10 04:34:59 +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>
|
|
|
|
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
2021-11-10 04:34:59 +09:00
|
|
|
</form>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default ParentSignUp;
|