completed p_account profile
このコミットが含まれているのは:
dragon1211
コミット
e128a1dc6f
ファイル差分が大きすぎるため省略します
差分を読み込み
|
|
@ -17,7 +17,7 @@ const Profile = () => {
|
|||
const [loaded, setLoaded] = useState(false);
|
||||
const [_400error, set400Error] = useState('');
|
||||
const [_422errors, set422Errors] = useState({ image: '' });
|
||||
const [_success_update_image, setSuccessUpdateImage] = useState('');
|
||||
const [_success, setSuccess] = useState('');
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -52,7 +52,7 @@ const Profile = () => {
|
|||
switch(response.data.status_code){
|
||||
case 200: {
|
||||
// setImage(reader.result);
|
||||
setSuccessUpdateImage(response.data.success_messages);
|
||||
setSuccess(response.data.success_messages);
|
||||
window.location.reload(true);
|
||||
break;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ const Profile = () => {
|
|||
<p className="profile-info__icon">
|
||||
<img src="/assets/img/icon/building.svg" alt="会社名"/>
|
||||
</p>
|
||||
<p className="txt">{profile.company ? profile.company: '-'}</p>
|
||||
<p className="txt">{profile.company ? profile.company: '未入力'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -163,9 +163,9 @@ const Profile = () => {
|
|||
{
|
||||
_400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
|
||||
}
|
||||
{ _success_update_image &&
|
||||
<Alert type="success" hide={()=>setSuccessUpdateImage('')}>
|
||||
{_success_update_image}
|
||||
{ _success &&
|
||||
<Alert type="success" hide={()=>setSuccess('')}>
|
||||
{_success}
|
||||
</Alert>
|
||||
}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -56,10 +56,7 @@ const ProfileWithdrawal = () => {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
_400error &&
|
||||
<Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
|
||||
}
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ import Profile from '../parent/profile';
|
|||
import ProfileEdit from '../parent/profile/edit';
|
||||
import ProfilePasswordEdit from '../parent/profile/password_edit';
|
||||
import ProfileWithdrawal from '../parent/profile/withdrawal';
|
||||
import ProfileWithdrawalComplete from '../parent/profile/withdrawal_complete';
|
||||
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom'
|
||||
export const App = ({app}) => {
|
||||
|
|
@ -47,7 +46,6 @@ export const App = ({app}) => {
|
|||
<Route exact path='/p-account/profile/edit/:father_id' component={ProfileEdit} />
|
||||
<Route exact path='/p-account/profile/edit/password/:father_id' component={ProfilePasswordEdit} />
|
||||
<Route exact path='/p-account/profile/withdrawal' component={ProfileWithdrawal} />
|
||||
<Route exact path='/p-account/profile/withdrawal/complete' component={ProfileWithdrawalComplete} />
|
||||
</Switch>
|
||||
<Side />
|
||||
</BrowserRouter>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const ChildDetail = (props) => {
|
|||
const [submit, setSubmit] = useState(false);
|
||||
const [child, setChild] = useState({});
|
||||
const [_400error, set400Error] = useState('');
|
||||
const [_success, setSuccess] = useState(props.history.location.state);
|
||||
|
||||
const father_id = document.getElementById('father_id').value;
|
||||
const child_id = props.match.params.child_id;
|
||||
|
|
@ -140,6 +141,7 @@ const ChildDetail = (props) => {
|
|||
}
|
||||
</div>
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
{ _success && <Alert type="success" hide={()=>setSuccess('')}>{_success}</Alert> }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ import moment from 'moment';
|
|||
import { LoadingButton } from '@material-ui/lab';
|
||||
import Notification from '../notification';
|
||||
import Alert from '../../component/alert';
|
||||
import { useHistory } from 'react-router';
|
||||
import { CircularProgress } from '@material-ui/core';
|
||||
|
||||
const ChildEdit = (props) => {
|
||||
|
||||
const history = useHistory();
|
||||
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
||||
const [_success, setSuccess] = useState('');
|
||||
const [_400error, set400Error] = useState('');
|
||||
|
|
@ -18,14 +21,17 @@ const ChildEdit = (props) => {
|
|||
|
||||
const [hire_at, setHireAt] = useState(null);
|
||||
const [submit, setSubmit] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const father_id = document.getElementById('father_id').value;
|
||||
const child_id = props.match.params.child_id;
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
axios.get('/api/fathers/children/detail/'+child_id, {params:{father_id: father_id}})
|
||||
.then(response => {
|
||||
setNotice(response.data.notice);
|
||||
setLoaded(true);
|
||||
if(response.data.status_code==200){
|
||||
let hire_at = moment(response.data.params.father_relations?.hire_at).toDate();
|
||||
setHireAt(hire_at);
|
||||
|
|
@ -46,7 +52,13 @@ const ChildEdit = (props) => {
|
|||
setSubmit(false);
|
||||
setNotice(response.data.notice);
|
||||
switch(response.data.status_code){
|
||||
case 200: setSuccess(response.data.success_messages); break;
|
||||
case 200:{
|
||||
history.push({
|
||||
pathname: '/p-account/child/detail/'+child_id,
|
||||
state: response.data.success_messages
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 400: set400Error(response.data.error_messages); break;
|
||||
case 422: set422Errors(response.data.error_messages); break;
|
||||
}
|
||||
|
|
@ -65,41 +77,44 @@ const ChildEdit = (props) => {
|
|||
|
||||
<div className="l-content-wrap">
|
||||
<section className="edit-container">
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
|
||||
<form className="edit-form" onSubmit={handleSubmit}>
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="hire_at">入社日</label>
|
||||
<div>
|
||||
<label htmlFor="hire_at"><i className="icon icon-calendar"></i></label>
|
||||
<DatePicker
|
||||
id="hire_at"
|
||||
selected={hire_at}
|
||||
className={`input-default input-hire_at input-h60 input-w480 ${ _422errors.hire_at && 'is-invalid c-input__target'} `}
|
||||
onChange={date => setHireAt(date)}
|
||||
dateFormat="yyyy/MM/dd"
|
||||
locale="ja"
|
||||
/>
|
||||
{
|
||||
_422errors.hire_at &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{_422errors.hire_at}
|
||||
</span>
|
||||
}
|
||||
{ !loaded &&
|
||||
<CircularProgress className="css-loader"/> }
|
||||
{
|
||||
loaded &&
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
<form className="edit-form" onSubmit={handleSubmit}>
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="hire_at">入社日</label>
|
||||
<div>
|
||||
<label htmlFor="hire_at"><i className="icon icon-calendar"></i></label>
|
||||
<DatePicker
|
||||
id="hire_at"
|
||||
selected={hire_at}
|
||||
className={`input-default input-hire_at input-h60 input-w480 ${ _422errors.hire_at && 'is-invalid c-input__target'} `}
|
||||
onChange={date => setHireAt(date)}
|
||||
dateFormat="yyyy/MM/dd"
|
||||
locale="ja"
|
||||
/>
|
||||
{
|
||||
_422errors.hire_at &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{_422errors.hire_at}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LoadingButton
|
||||
type="submit" fullWidth
|
||||
loading={submit}
|
||||
className="btn-edit btn-default btn-h75 bg-yellow rounded-20"
|
||||
style={{marginTop:'50px'}}>
|
||||
<span className={`ft-20 ft-xs-16 font-weight-bold ${!submit && 'text-black'}`}>変更内容を保存する</span>
|
||||
</LoadingButton>
|
||||
</form>
|
||||
|
||||
<LoadingButton
|
||||
type="submit" fullWidth
|
||||
loading={submit}
|
||||
className="btn-edit btn-default btn-h75 bg-yellow rounded-20"
|
||||
style={{marginTop:'50px'}}>
|
||||
<span className={`ft-20 ft-xs-16 font-weight-bold ${!submit && 'text-black'}`}>変更内容を保存する</span>
|
||||
</LoadingButton>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,11 +127,11 @@ useEffect(()=>{
|
|||
case 200: {
|
||||
history.push({
|
||||
pathname: `/p-account/meeting/detail/${props.match.params?.meeting_id}`,
|
||||
state: "更新成功しました!"
|
||||
state: "編集が完了しました!"
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 400: set400Error("更新失敗しました。"); break;
|
||||
case 400: set400Error("編集が失敗しました。"); break;
|
||||
case 422: set422Errors(response.data.error_messages); break;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,78 +1,75 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CircularProgress } from '@material-ui/core';
|
||||
import { LoadingButton } from '@material-ui/lab';
|
||||
import Notification from '../notification';
|
||||
import Alert from '../../component/alert';
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
const ProfileEdit = () => {
|
||||
const [father, setFather] = useState(null);
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
|
||||
const history = useHistory();
|
||||
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
||||
const father_id = document.getElementById('father_id').value;
|
||||
|
||||
const [company, setCompany] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [tel, setTel] = useState('');
|
||||
const [profile, setProfile] = useState('');
|
||||
const fatherId = document.getElementById('father_id').value;
|
||||
const [showAlert, setShowAlert] = useState(false);
|
||||
const [messageAlert, setMessageAlert] = useState(null);
|
||||
const [textColor, setTextColor] = useState(null);
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
firstName:'',
|
||||
lastName:'',
|
||||
email:'',
|
||||
tel:'',
|
||||
profile:''
|
||||
const [_success, setSuccess] = useState('');
|
||||
const [_400error, set400Error] = useState('');
|
||||
const [_422errors, set422Errors] = useState({
|
||||
company: '',
|
||||
email:'',
|
||||
tel:'',
|
||||
profile:''
|
||||
})
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [submit, setSubmit] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/api/fathers/detail/${fatherId}`).then((response) => {
|
||||
setLoaded(false);
|
||||
axios.get(`/api/fathers/detail/${father_id}`)
|
||||
.then(response => {
|
||||
setLoaded(true);
|
||||
setNotice(response.data.notice);
|
||||
if(response.data.status_code==200) {
|
||||
console.log(response.data.params[0]);
|
||||
setFather(response.data.params[0]);
|
||||
setEmail(response.data.params[0]?.email);
|
||||
setTel(response.data.params[0]?.tel);
|
||||
setProfile(response.data.params[0]?.profile);
|
||||
} else if(response.data.status_code==400){
|
||||
//TODO
|
||||
}
|
||||
|
||||
setCompany(response.data.params?.company);
|
||||
setEmail(response.data.params?.email);
|
||||
setTel(response.data.params?.tel);
|
||||
setProfile(response.data.params?.profile);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
async function handleClick() {
|
||||
setErrors({
|
||||
firstName:'',
|
||||
lastName:'',
|
||||
email: email ? '' : 'error',
|
||||
tel: tel ? '' : 'error',
|
||||
profile:''
|
||||
});
|
||||
|
||||
if(email && tel) {
|
||||
try {
|
||||
const formdata = new FormData();
|
||||
formdata.append('father_id', fatherId);
|
||||
formdata.append('first_name', firstName);
|
||||
formdata.append('last_name', lastName);
|
||||
formdata.append('email', email);
|
||||
formdata.append('tel', tel);
|
||||
formdata.append('profile', profile);
|
||||
axios.put(`/api/fathers/updateProfile/${fatherId}`, formdata)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200){
|
||||
setMessageAlert(response.data.success_messages);
|
||||
setTextColor("black");
|
||||
} else {
|
||||
setMessageAlert(response.data.success_messages);
|
||||
}
|
||||
setShowAlert(true);
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
set422Errors({ company:'', email: '', tel: '', profile:'' });
|
||||
const request = {
|
||||
company: company,
|
||||
email: email,
|
||||
tel: tel,
|
||||
profile: profile
|
||||
}
|
||||
setSubmit(true);
|
||||
axios.put(`/api/fathers/updateProfile/${father_id}`, request)
|
||||
.then(response => {
|
||||
setNotice(response.data.notice);
|
||||
setSubmit(false);
|
||||
switch(response.data.status_code){
|
||||
case 200:{
|
||||
history.push({
|
||||
pathname: '/p-account/profile',
|
||||
state: response.data.success_messages
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 400: set400Error(response.data.error_messages); break;
|
||||
case 422: set422Errors(response.data.error_messages); break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleCloseAlert() {
|
||||
setShowAlert(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="l-content">
|
||||
|
|
@ -81,53 +78,85 @@ const ProfileEdit = () => {
|
|||
<div className="l-content__ttl__left">
|
||||
<h2>プロフィール編集</h2>
|
||||
</div>
|
||||
<Notification />
|
||||
<Notification notice={notice}/>
|
||||
</div>
|
||||
|
||||
<div className="l-content-wrap">
|
||||
<div className="edit-container">
|
||||
<section className="edit-container">
|
||||
{
|
||||
!loaded &&
|
||||
<CircularProgress className="css-loader"/>
|
||||
}
|
||||
{
|
||||
loaded &&
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
<form className="edit-form" onSubmit={handleSubmit}>
|
||||
|
||||
<form action="" className="edit-form">
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="nameSei">姓</label>
|
||||
<input type="text" name="nameSei" value={ lastName } onChange={e=>setLastName(e.target.value)}
|
||||
className={`input-default input-nameSei input-h60 input-w480 ${ errors['firstName'] != '' && "validation_error"}`} id="nameSei" />
|
||||
</div>
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="nameMei">名</label>
|
||||
<input type="text" name="nameMei" value={ firstName } onChange={e=>setFirstName(e.target.value)}
|
||||
className={`input-default input-nameMei input-h60 input-w480 ${ errors['lastName'] != '' && "validation_error"}`} id="nameMei" />
|
||||
<label className="control-label" htmlFor="nameSei">会社名</label>
|
||||
<input type="text" name="nameSei" value={ company } onChange={e=>setCompany(e.target.value)}
|
||||
className={`input-default input-nameSei input-h60 input-w480 ${ _422errors.company && "is-invalid c-input__target" }`} id="company" />
|
||||
{
|
||||
_422errors.company &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.company }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="mail">メールアドレス</label>
|
||||
<input type="email" name="mail" value={ email } onChange={e=>setEmail(e.target.value)}
|
||||
className={`input-default input-mail input-h60 input-w480 ${ errors['email'] != '' && "validation_error"}`} id="mail" />
|
||||
className={`input-default input-mail input-h60 input-w480 ${ _422errors.email && "is-invalid c-input__target" } `} id="mail" />
|
||||
{
|
||||
_422errors.email &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.email }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="tel">電話番号</label>
|
||||
<input type="tel" name="tel" value={ tel } onChange={e=>setTel(e.target.value)}
|
||||
className={`input-default input-tel input-h60 input-w480 ${ errors['tel'] != '' && "validation_error"}`} id="tel" />
|
||||
className={`input-default input-tel input-h60 input-w480 ${ _422errors.tel && "is-invalid c-input__target" } `} id="tel" />
|
||||
{
|
||||
_422errors.tel &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.tel }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="profile_textarea">プロフィール</label>
|
||||
<textarea name="profile" value={ profile } onChange={e=>setProfile(e.target.value)} rows="8"
|
||||
className={`textarea-default ${ errors['profile'] != '' && "validation_error"}`} id="profile_textarea" />
|
||||
className={`textarea-default ${ _422errors.profile && "is-invalid c-input__target" } `} id="profile_textarea" />
|
||||
{
|
||||
_422errors.profile &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.profile }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}}
|
||||
className="btn-edit btn-default btn-h70 btn-r14 btn-yellow">プロフィール更新</button>
|
||||
</form>
|
||||
<LoadingButton type="submit"
|
||||
loading={submit}
|
||||
fullWidth
|
||||
className="btn-edit btn-default btn-h75 bg-yellow rounded-20">
|
||||
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>
|
||||
プロフィールを更新
|
||||
</span>
|
||||
</LoadingButton>
|
||||
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
{ _success && <Alert type="success" hide={()=>setSuccess('') }>{_success}</Alert> }
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
|
|||
import Alert from '../../component/alert';
|
||||
import Notification from '../notification';
|
||||
|
||||
const Profile = () => {
|
||||
const Profile = (props) => {
|
||||
|
||||
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ const Profile = () => {
|
|||
const [loaded, setLoaded] = useState(false);
|
||||
const [_400error, set400Error] = useState('');
|
||||
const [_422errors, set422Errors] = useState({ image: '' });
|
||||
const [_success_update_image, setSuccessUpdateImage] = useState('');
|
||||
const [_success, setSuccess] = useState(props.history.location.state);
|
||||
|
||||
const father_id = document.getElementById('father_id').value;
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ const Profile = () => {
|
|||
setNotice(response.data.notice);
|
||||
switch(response.data.status_code){
|
||||
case 200: {
|
||||
setSuccessUpdateImage(response.data.success_messages);
|
||||
setSuccess(response.data.success_messages);
|
||||
window.location.reload(true);
|
||||
break;
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ const Profile = () => {
|
|||
</a>
|
||||
</div>
|
||||
<div className="profile-info__item">
|
||||
<p className="txt">{profile.profile}</p>
|
||||
<p className="txt">{profile.profile ? profile.profile: '未入力'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ const Profile = () => {
|
|||
</div>
|
||||
|
||||
<div className="p-profile-btn">
|
||||
<Link to={`/p-account/profile/password-edit/${father_id}`}
|
||||
<Link to={`/p-account/profile/edit/password/${father_id}`}
|
||||
className="btn-default btn-yellow btn-password btn-r8 btn-h52 h-xs-60-px">
|
||||
<span className="ft-xs-16">パスワードを変更する</span>
|
||||
</Link>
|
||||
|
|
@ -150,14 +150,8 @@ const Profile = () => {
|
|||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
_400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
|
||||
}
|
||||
{ _success_update_image &&
|
||||
<Alert type="success" hide={()=>setSuccessUpdateImage('')}>
|
||||
{_success_update_image}
|
||||
</Alert>
|
||||
}
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
{ _success && <Alert type="success" hide={()=>setSuccess('') }>{_success}</Alert> }
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,118 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Notification from '../../component/notification';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { LoadingButton } from '@material-ui/lab';
|
||||
import Notification from '../notification';
|
||||
import Alert from '../../component/alert';
|
||||
|
||||
|
||||
const ProfilePasswordEdit = () => {
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const fatherId = document.getElementById('father_id').value;
|
||||
const [showAlert, setShowAlert] = useState(false);
|
||||
const [messageAlert, setMessageAlert] = useState(null);
|
||||
const [textColor, setTextColor] = useState(null);
|
||||
const history = useHistory();
|
||||
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
||||
const father_id = document.getElementById('father_id').value;
|
||||
const [password, setPassword] = useState('');
|
||||
const [password_confirmation, setConfirmPassword] = useState('');
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
confirmPassword:'',
|
||||
newPassword:'',
|
||||
})
|
||||
async function handleClick() {
|
||||
setErrors({
|
||||
confirmPassword: confirmPassword ? '' : 'error',
|
||||
newPassword: newPassword ? '' : 'error',
|
||||
const [_422errors, set422Errors] = useState({
|
||||
password:'',
|
||||
password_confirmation:''
|
||||
});
|
||||
const [_400error, set400Error] = useState('');
|
||||
const [_success, setSuccess] = useState('');
|
||||
const [submit, setSubmit] = useState(false);
|
||||
|
||||
if(confirmPassword && newPassword) {
|
||||
try {
|
||||
const formdata = new FormData();
|
||||
formdata.append('father_id', fatherId);
|
||||
formdata.append('password', newPassword);
|
||||
formdata.append('password_confirmation', confirmPassword);
|
||||
axios.put(`/api/fathers/updatePassword/${fatherId}`, formdata)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200){
|
||||
setMessageAlert(response.data.success_messages);
|
||||
setTextColor("black");
|
||||
} else {
|
||||
setMessageAlert(response.data.success_messages);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
set422Errors({
|
||||
password:'',
|
||||
password_confirmation:''
|
||||
});
|
||||
setSubmit(true);
|
||||
const post = {
|
||||
password: password,
|
||||
password_confirmation: password_confirmation
|
||||
}
|
||||
axios.put(`/api/fathers/updatePassword/${father_id}`, post)
|
||||
.then(response => {
|
||||
setSubmit(false);
|
||||
setNotice(response.data.notice);
|
||||
switch(response.data.status_code){
|
||||
case 200:{
|
||||
history.push({
|
||||
pathname: '/p-account/profile',
|
||||
state: response.data.success_messages
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 400: set400Error(response.data.error_messages); break;
|
||||
case 422: set422Errors(response.data.error_messages); break;
|
||||
}
|
||||
setShowAlert(true);
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCloseAlert() {
|
||||
setShowAlert(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="l-content">
|
||||
<div className="l-content-w560">
|
||||
<div className="l-content__ttl">
|
||||
<div className="l-content__ttl__left">
|
||||
<h2>パスワード編集</h2>
|
||||
</div>
|
||||
<Notification />
|
||||
</div>
|
||||
<div className="l-content">
|
||||
<div className="l-content-w560">
|
||||
<div className="l-content__ttl">
|
||||
<div className="l-content__ttl__left">
|
||||
<h2>パスワード編集</h2>
|
||||
</div>
|
||||
<Notification notice={notice}/>
|
||||
</div>
|
||||
|
||||
<div className="l-content-wrap">
|
||||
<section className="edit-container">
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
<div className="l-content-wrap">
|
||||
<section className="profile-container">
|
||||
<div className="profile-wrap">
|
||||
<div className="profile-content">
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
|
||||
<div className="edit-set">
|
||||
<label htmlFor="password" className="control-label ft-14 ft-md-12">
|
||||
新しいパスワード
|
||||
</label>
|
||||
<input type="password" name="password" id="password" className={`input-default input-h60 ${ _422errors.password && "is-invalid c-input__target" }`}
|
||||
value={password} onChange={e=>setPassword(e.target.value)} autoFocus/>
|
||||
{
|
||||
_422errors.password &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.password }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<form action="" className="edit-form">
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="new_password">パスワード</label>
|
||||
<input type="password" name="new_password" value={ newPassword } onChange={e=>setNewPassword(e.target.value)}
|
||||
className={`input-default input-new-password input-h60 input-w480 ${ errors['newPassword'] != '' && "validation_error"}`} id="new_password" />
|
||||
</div>
|
||||
<div className="edit-set">
|
||||
<label className="control-label" htmlFor="confirm_password">確認用 新しいパスワード</label>
|
||||
<input type="password" name="confirm_password" value={ confirmPassword } onChange={e=>setConfirmPassword(e.target.value)}
|
||||
className={`input-default input-confirm-password input-h60 input-w480 ${ errors['newPassword'] != '' && "validation_error"}`} id="confirm_password" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}}
|
||||
className="btn-edit btn-default btn-h70 btn-r14 btn-yellow">パスワード更新</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div className="edit-set">
|
||||
<label htmlFor="password_confirmation" className="control-label ft-14 ft-md-12">
|
||||
確認用新しいパスワード
|
||||
</label>
|
||||
<input type="password" name="password_confirmation" id="password_confirmation" className={`input-default input-h60 ${ _422errors.password_confirmation && "is-invalid c-input__target" }`}
|
||||
value={password_confirmation} onChange={e=>setConfirmPassword(e.target.value)}/>
|
||||
{
|
||||
_422errors.password_confirmation &&
|
||||
<span className="l-alert__text--error ft-16 ft-md-14">
|
||||
{ _422errors.password_confirmation }
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<LoadingButton type="submit" fullWidth
|
||||
loading = {submit}
|
||||
className="btn-edit btn-default btn-h75 bg-yellow rounded-20">
|
||||
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>パスワードを更新</span>
|
||||
</LoadingButton>
|
||||
</div>
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
{ _success && <Alert type="success" hide={()=>setSuccess('') }>{_success}</Alert> }
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default ProfilePasswordEdit;
|
||||
|
|
@ -1,82 +1,62 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Notification from '../../component/notification';
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import React, { useState } from 'react';
|
||||
import { LoadingButton } from '@material-ui/lab';
|
||||
import Notification from '../notification';
|
||||
|
||||
const ProfileWithdrawal = () => {
|
||||
const history = useHistory();
|
||||
const fatherId = document.getElementById('father_id').value;
|
||||
async function handleClick() {
|
||||
try {
|
||||
axios.delete(`/api/fathers/delete/${fatherId}`)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200) {
|
||||
axios.delete(`/api/email-activations/deleteRelationFather/${fatherId}`)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200) {
|
||||
} else {
|
||||
}
|
||||
});
|
||||
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
||||
const father_id = document.getElementById("father_id").value;
|
||||
const [submit, setSubmit] = useState(false);
|
||||
const [_400error, set400Error] = useState('');
|
||||
|
||||
axios.delete(`/api/father-relations/deleteRelationFather/${fatherId}`)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200){
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
||||
axios.delete(`/api/meetings/deleteRelationFather/${fatherId}`)
|
||||
.then(response => {
|
||||
if(response.data.status_code == 200){
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
history.push({
|
||||
pathname: '/p-account/profile/withdrawal/complete',
|
||||
state: {}
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setSubmit(true);
|
||||
axios.delete('/api/fathers/withdrawal', {params:{father_id: father_id}})
|
||||
.then(response => {
|
||||
setSubmit(false);
|
||||
setNotice(response.data.notice);
|
||||
switch(response.data.status_code){
|
||||
case 200: window.location.href = "/p-account/withdrawal/complete"; break;
|
||||
case 400: set400Error("失敗しました。"); break;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="l-content">
|
||||
<div className="l-content-w560">
|
||||
<div className="l-content__ttl">
|
||||
<div className="l-content__ttl__left">
|
||||
<h2>退会確認</h2>
|
||||
</div>
|
||||
<Notification />
|
||||
</div>
|
||||
|
||||
<div className="l-content-wrap">
|
||||
<section className="edit-container">
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
|
||||
<form action="" className="edit-form">
|
||||
<div className="edit-set-bg">
|
||||
<p>本当に退会してもよろしいでしょうか？</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
|
||||
}}
|
||||
type="button" className="btn-edit btn-default btn-h70 btn-r14 btn-yellow">退会する</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div className="l-content-w560">
|
||||
<div className="l-content__ttl">
|
||||
<div className="l-content__ttl__left">
|
||||
<h2>退会確認</h2>
|
||||
</div>
|
||||
<Notification notice={notice}/>
|
||||
</div>
|
||||
|
||||
<div className="l-content-wrap">
|
||||
<section className="edit-container">
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
<form className="edit-form" onSubmit={handleSubmit} noValidate>
|
||||
<div className="edit-set-bg ft-xs-16">
|
||||
<p>本当に退会してもよろしいでしょうか？</p>
|
||||
</div>
|
||||
<div>
|
||||
<LoadingButton type="submit" fullWidth
|
||||
loading = {submit}
|
||||
className="btn-edit btn-default btn-h75 bg-yellow rounded-20">
|
||||
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>退会する</span>
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default ProfileWithdrawal;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import Notification from '../../component/notification';
|
||||
|
||||
const ProfileWithdrawalComplete = () => {
|
||||
return (
|
||||
<div className="l-content">
|
||||
<div className="l-content-w560">
|
||||
<div className="l-content__ttl">
|
||||
<div className="l-content__ttl__left">
|
||||
<h2>退会完了</h2>
|
||||
</div>
|
||||
<Notification />
|
||||
</div>
|
||||
|
||||
<div className="l-content-wrap">
|
||||
<section className="edit-container">
|
||||
<div className="edit-wrap">
|
||||
<div className="edit-content">
|
||||
|
||||
<div className="edit-set-bg">
|
||||
<p>退会完了しました。<br />今後とも、危機管理をよろしくお願いいたします。</p>
|
||||
</div>
|
||||
|
||||
<div className="edit-txtLink">
|
||||
<a href="/p-account">
|
||||
<button type="button" className="a-icon txt-link">トップページへ戻る</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfileWithdrawalComplete;
|
||||
新しいイシューから参照