add withdrawal and profile

このコミットが含まれているのは:
dragon1211 2021-11-08 00:25:42 +09:00
コミット 8e64360357
11個のファイルの変更1105行の追加975行の削除

ファイルの表示

@ -12316,6 +12316,7 @@ a {
color: green !important;
position: fixed;
left: calc(50vw - 22px);
z-index: 10;
}
@media screen and (min-width: 1068px) {
.css-loader {

ファイル差分が大きすぎるため省略します 差分を読み込み

ファイルの表示

@ -1,18 +1,15 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ChildForgotPassword from './forgot_password';
import ChildForgotPasswordComplete from './forgot_password/complete';
import ChildForgotPasswordReset from './forgot_password/reset';
import ChildLogin from './login';
import ChildSignUpTemporary from './register/temporary';
import ChildSignUp from './register';
import ChildSignUpComplete from './register/complete';
import ChildSignUpError from './register/error';
import ChildWithdrawal from './withdrawal_complete';
export default class ChildAuth extends Component {
render() {
return (
@ -34,6 +31,7 @@ export default class ChildAuth extends Component {
<Route exact path="/c-account/forgot-password/complete" component = {ChildForgotPasswordComplete} />
<Route exact path="/c-account/login" component = {ChildLogin} />
<Route exact path="/c-account/withdrawal/complete" component = {ChildWithdrawal} />
</Switch>
</BrowserRouter>

ファイルの表示

@ -0,0 +1,22 @@
import React from 'react';
import { useHistory } from 'react-router';
const ChildWithdrawal = () => {
const history = useHistory();
return (
<div>
<p className="text-center font-weight-bold ft-25">退会完了</p>
<span className="mt-80-px ft-18 ft-md-15 l-alert__text--success">
退会完了しました<br/>
今後とも危機管理をよろしくお願いいたします
</span>
<div class="text-center">
<a class="ft-xs-16">トップページへ戻る</a>
</div>
</div>
)
}
export default ChildWithdrawal;

ファイルの表示

@ -113,39 +113,88 @@ const Meeting = () => {
<label className={`tab-label ${ tab_status && 'is-active'} `} htmlFor="tab-02" onClick={()=>setTabStatus(true)}><span>承知済み</span></label>
</div>
</div>
</div>
{
!loaded &&
<CircularProgress color="secondary" className="css-loader"/>
}
{
loaded &&
<div className="meeting-content">
{
!loaded &&
<CircularProgress color="secondary" className="css-loader"/>
!tab_status &&
<div className="meeting-content-wrap is-active" id="item01">
<InfiniteScroll
dataLength={fetch_meeting_list_non_approval.length}
next={fetchMoreListNonApproval}
hasMore={fetch_meeting_list_non_approval.length != meeting_list_non_approval.length}
loader={
<div id="dots3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
}
style={{overflow:'none', position:'relative'}}
>
{
fetch_meeting_list_non_approval.length > 0 ?
fetch_meeting_list_non_approval?.map((item, id) =>
<div className="meeting-item" key={id}>
<div className="user-wrap user-sm">
<Link to={{
pathname: `/c-account/parent/detail/${item.father_id}`,
state: { tab_status: true}
}}>
<div className="user-avatar">
<img alt="name" className="father-img" src={item.father.image}/>
</div>
<p className="user-name">{item.father.company}</p>
</Link>
</div>
<Link to={`/c-account/meeting/detail/${item.id}`} className="meeting-link">
<h3 className="meeting-ttl">{item.title}</h3>
<p className="meeting-txt">{item.text}</p>
</Link>
<div className="user-date">
<time dateTime="2021-07-30" className="user-updated-time">
<span className="user-updated">最終更新日<span className="date">{moment(item.updated_at).format('YYYY/MM/DD')}</span></span>
</time>
<time dateTime="2021-07-30" className="user-awareness-time">
<span className="user-awareness">承知日<span className="date"></span></span>
</time>
</div>
</div>
)
: <p className="text-center py-5 ft-xs-17">データはありません</p>
}
</InfiniteScroll>
</div>
}
{
loaded &&
<div className="meeting-content">
{
!tab_status &&
<div className="meeting-content-wrap is-active" id="item01">
<InfiniteScroll
dataLength={fetch_meeting_list_non_approval.length}
next={fetchMoreListNonApproval}
hasMore={fetch_meeting_list_non_approval.length != meeting_list_non_approval.length}
loader={
<div id="dots3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
}
style={{overflow:'none', position:'relative'}}
>
{
fetch_meeting_list_non_approval.length > 0 ?
fetch_meeting_list_non_approval?.map((item, id) =>
tab_status &&
<div className="meeting-content-wrap is-active" id="item02">
<InfiniteScroll
dataLength={fetch_meeting_list_approval.length}
next={fetchMoreListApproval}
hasMore={fetch_meeting_list_approval.length != meeting_list_approval.length}
loader={
<div id="dots3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
}
style={{overflow:'none', position:'relative'}}
>
{
fetch_meeting_list_approval.length > 0 ?
fetch_meeting_list_approval?.map((item, id) =>
<div className="meeting-item" key={id}>
<div className="user-wrap user-sm">
<Link to={{
pathname: `/c-account/parent/detail/${item.father_id}`,
state: { tab_status: true}
}}>
<Link to = {`/c-account/parent/detail/${item.father_id}`}>
<div className="user-avatar">
<img alt="name" className="father-img" src={item.father.image}/>
</div>
@ -158,81 +207,28 @@ const Meeting = () => {
</Link>
<div className="user-date">
<time dateTime="2021-07-30" className="user-updated-time">
<span className="user-updated">最終更新日<span className="date">{moment(item.updated_at).format('YYYY/MM/DD')}</span></span>
<span className="user-updated">最終更新日
<span className="date">
{moment(item.updated_at).format('YYYY/MM/DD')}
</span>
</span>
</time>
<time dateTime="2021-07-30" className="user-awareness-time">
<span className="user-awareness">承知日<span className="date"></span></span>
<span className="user-awareness">承知日
<span className="date">
{ moment(item.approval.approval_at).format('YYYY/MM/DD') }
</span>
</span>
</time>
</div>
</div>
)
: <p className="text-center py-5 ft-xs-17">検索されたデータはありません</p>
}
</InfiniteScroll>
</div>
}
{
tab_status &&
<div className="meeting-content-wrap is-active" id="item02">
<InfiniteScroll
dataLength={fetch_meeting_list_approval.length}
next={fetchMoreListApproval}
hasMore={fetch_meeting_list_approval.length != meeting_list_approval.length}
loader={
<div id="dots3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
}
style={{overflow:'none', position:'relative'}}
>
{
fetch_meeting_list_approval.length > 0 ?
fetch_meeting_list_approval?.map((item, id) =>
<div className="meeting-item" key={id}>
<div className="user-wrap user-sm">
<Link to = {`/c-account/parent/detail/${item.father_id}`}>
<div className="user-avatar">
<img alt="name" className="father-img" src={item.father.image}/>
</div>
<p className="user-name">{item.father.company}</p>
</Link>
</div>
<Link to={`/c-account/meeting/detail/${item.id}`} className="meeting-link">
<h3 className="meeting-ttl">{item.title}</h3>
<p className="meeting-txt">{item.text}</p>
</Link>
<div className="user-date">
<time dateTime="2021-07-30" className="user-updated-time">
<span className="user-updated">最終更新日
<span className="date">
{moment(item.updated_at).format('YYYY/MM/DD')}
</span>
</span>
</time>
<time dateTime="2021-07-30" className="user-awareness-time">
<span className="user-awareness">承知日
<span className="date">
{ moment(item.approval.approval_at).format('YYYY/MM/DD') }
</span>
</span>
</time>
</div>
</div>
)
: <p className="text-center py-5 ft-xs-17">検索されたデータはありません</p>
}
</InfiniteScroll>
</div>
}
: <p className="text-center py-5 ft-xs-17">データはありません</p>
}
</InfiniteScroll>
</div>
}
</div>
{
loaded && ((meeting_list_non_approval.length == 0 && !tab_status) || (meeting_list_approval.length == 0 && tab_status)) &&
<p className="text-center py-5 ft-xs-17">データが存在しません</p>
</div>
}
</section>
</div>

ファイルの表示

@ -5,6 +5,7 @@ import { LoadingButton } from '@material-ui/lab';
import Notification from '../../component/notification';
import Alert from '../../component/alert';
import { CircularProgress } from '@material-ui/core';
const ProfileEdit = () => {
@ -13,90 +14,84 @@ const ProfileEdit = () => {
const [first_name, setFirstName] = useState('');
const [last_name, setLastName] = useState('');
const [identify, setIdentify] = useState('');
const [identity, setIdentity] = useState('');
const [email, setEmail] = useState('');
const [tel, setTel] = useState('');
const [company, setCompany] = useState('');
const [image, setImage] = useState('');
const [errors, setErrors] = useState({
const [_422errors, set422Errors] = useState({
first_name:'',
last_name:'',
identify:'',
identity:'',
email:'',
tel:'',
image:'',
company:''
})
const [err_msg, setErrMsg] = useState({status:'', msg:''})
const [_400error, set400Error] = useState('');
const [_success, setSuccess] = useState('');
const [submitStatus, setSubmitStatus] = useState('')
const [submit, setSubmit] = useState(false);
const [loaded, setLoaded] = useState(false);
const validateForm = () => {
let errors = {};
let formIsValid = true;
if (email.length == 0) { formIsValid = false; errors["email"] = 'Required'; }
else {
//regular expression for email validation
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (!pattern.test(email)) {
formIsValid = false;
errors["email"] = 'Required';
useEffect(() => {
setLoaded(false);
let child_id = document.getElementById('child_id').value;
axios.get('/api/children/detail/'+child_id)
.then(response => {
setLoaded(true);
if(response.data.status_code==200){
let params = response.data.params;
setFirstName(params.first_name);
setLastName(params.last_name);
setEmail(params.email);
setTel(params.tel);
setIdentity(params.identity);
if(params.company)setCompany(params.company);
}
else {
errors['email'] = '';
}
}
if(!image){ formIsValid = false; errors['image'] = 'Required'; }
else errors['image'] = '';
if(first_name.length == 0){ formIsValid = false; errors['first_name'] = 'Required'; }
else errors['first_name'] = '';
if(identify.length == 0){ formIsValid = false; errors['identify'] = 'Required'; }
else errors['identify'] = '';
if(last_name.length == 0){ formIsValid = false; errors['last_name'] = 'Required'; }
else errors['last_name'] = '';
if(tel.length == 0){ formIsValid = false; errors['tel'] = 'Required'; }
else errors['tel'] = '';
if(company.length == 0){ formIsValid = false; errors['company'] = 'Required'; }
else errors['company'] = '';
setErrors(errors);
return formIsValid;
}
})
.catch(err=>console.log(err))
},[]);
const handleSubmit = (e) => {
e.preventDefault();
setErrMsg({status:'', msg:''});
if(!validateForm()) return;
set422Errors({
first_name:'',
last_name:'',
identity:'',
email:'',
tel:'',
company:''
});
const formdata = new FormData();
formdata.append('first_name', first_name);
formdata.append('last_name', last_name);
formdata.append('identify', identify);
formdata.append('identity', identity);
formdata.append('email', email);
formdata.append('tel', tel);
formdata.append('company', company);
formdata.append('image', image);
// axios.post('/api/children/updateProfile/{identify}', formdata)
// .then(response => {
// if(response.data.status_code==200){
// setSubmitStatus('success);
// }
// else if(response.data.status_code==400){
// setSubmitStatus('failed);
// }
// })
// .catch(err=>console.log(err))
const post = {
first_name: first_name,
last_name: last_name,
identity: identity,
email: email,
tel: tel,
company: company
}
setSubmit(true);
let child_id =document.getElementById('child_id').value;
axios.put('/api/children/updateProfile/'+child_id, post)
.then(response => {
setSubmit(false);
switch(response.data.status_code){
case 200: setSuccess(response.data.success_messages); break;
case 400: set400Error(response.data.error_messages); break;
case 422: set422Errors(response.data.error_messages); break;
}
})
}
@ -113,89 +108,104 @@ const ProfileEdit = () => {
<div className="l-content-wrap">
<section className="profile-container">
{
!loaded &&
<CircularProgress color="secondary" className="css-loader"/>
}
<div className="profile-wrap">
<div className="profile-content">
<form onSubmit={handleSubmit} noValidate>
<div className="edit-set">
<label htmlFor="first_name" className="control-label ft-12"> </label>
<input type="text" name="first_name" id="first_name" className={`input-default input-nameSei ${ errors['first_name'].length != 0 && "is-invalid c-input__target" }`} value={first_name} onChange={e=>setFirstName(e.target.value)}/>
<input type="text" name="first_name" id="first_name" className={`input-default input-nameSei ${ _422errors.first_name && "is-invalid c-input__target" }`} value={first_name} onChange={e=>setFirstName(e.target.value)}/>
{
errors['first_name'].length != 0 &&
_422errors.first_name &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['first_name']}
{ _422errors.first_name }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="last_name" className="control-label ft-12"> </label>
<input type="text" name="last_name" id="last_name" className={`input-default input-nameSei ${ errors['last_name'].length != 0 && "is-invalid c-input__target" }`} value={last_name} onChange={e=>setLastName(e.target.value)}/>
<input type="text" name="last_name" id="last_name" className={`input-default input-nameSei ${ _422errors.last_name && "is-invalid c-input__target" }`} value={last_name} onChange={e=>setLastName(e.target.value)}/>
{
errors['last_name'].length != 0 &&
_422errors.last_name &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['last_name']}
{ _422errors.last_name }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="identify" className="control-label ft-12"> ID </label>
<input type="text" name="identify" id="identify" className={`input-default input-nameSei ${ errors['identify'].length != 0 && "is-invalid c-input__target" }`} value={identify} onChange={e=>setIdentify(e.target.value)}/>
<label htmlFor="identity" className="control-label ft-12"> ID </label>
<input type="text" name="identity" id="identity" className={`input-default input-nameSei ${ _422errors.identity && "is-invalid c-input__target" }`} value={identity} onChange={e=>setIdentity(e.target.value)}/>
{
errors['identify'].length != 0 &&
_422errors.identity &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['identify']}
{ _422errors.identity }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="email" className="control-label ft-12"> メールアドレス </label>
<input type="email" name="email" id="email" className = {`input-default input-nameSei ${ errors['email'].length != 0 && "is-invalid c-input__target" }`} value={email} onChange={e=>setEmail(e.target.value)}/>
<input type="email" name="email" id="email" className = {`input-default input-nameSei ${ _422errors.email && "is-invalid c-input__target" }`} value={email} onChange={e=>setEmail(e.target.value)}/>
{
errors['email'].length != 0 &&
_422errors.email &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['email']}
{_422errors.email}
</span>
}
</div>
<div className="edit-set">
<label htmlFor="tel" className="control-label ft-12"> 電話番号 </label>
<input type="text" name="tel" id="tel" className = {`input-default input-nameSei ${ errors['tel'].length != 0 && "is-invalid c-input__target" }`} value={tel} onChange={e=>setTel(e.target.value)}/>
<input type="text" name="tel" id="tel" className = {`input-default input-nameSei ${ _422errors.tel && "is-invalid c-input__target" }`} value={tel} onChange={e=>setTel(e.target.value)}/>
{
errors['tel'].length != 0 &&
_422errors.tel &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['tel']}
{ _422errors.tel }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="company" className="control-label ft-12"> 会社名下請けの場合のみ </label>
<input type="text" name="company" id="company" className = {`input-default input-nameSei ${ errors['company'].length != 0 && "is-invalid c-input__target" }`} value={company} onChange={e=>setCompany(e.target.value)}/>
<input type="text" name="company" id="company" className = {`input-default input-nameSei ${ _422errors.company && "is-invalid c-input__target" }`} value={company} onChange={e=>setCompany(e.target.value)}/>
{
errors['company'].length != 0 &&
_422errors.company &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['company']}
{ _422errors.company }
</span>
}
</div>
<div className="mt-5">
<LoadingButton type="submit" fullWidth className="p-4 rounded-20 ft-15 font-weight-bold text-black bg-yellow">
<span>プロフィールを更新</span>
<LoadingButton type="submit"
loading={submit}
fullWidth
className="btn-edit btn-default btn-h70 bg-yellow rounded-20">
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>
プロフィールを更新
</span>
</LoadingButton>
</div>
{
submitStatus == 'success' && <Alert type="success">Submit Success!</Alert>
}
_400error &&
<Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
}
{
submitStatus == 'failed' && <Alert type="fail">Submit Failed!</Alert>
_success &&
<Alert type="success"
hide={()=>
history.push({
pathname: `/c-account/profile`,
state: {}
})}>{_success}</Alert>
}
</form>
</div>
</div>
</section>

ファイルの表示

@ -1,64 +1,67 @@
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useHistory, Link } from 'react-router-dom';
import IconButton from "@material-ui/core/IconButton";
import axios from 'axios';
import { CircularProgress } from '@material-ui/core';
import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
import Alert from '../../component/alert';
import Notification from '../../component/notification';
const Profile = () => {
const [image, setImage] = useState('/assets/img/avatar/avatar-sample03@2x.png');
const history = useHistory();
const [image, setImage] = useState('');
const [profile, setProfile] = useState({email:'', tel:'', first_name:'', last_name:'', identity:'', company:'', image:''})
const [loaded, setLoaded] = useState(false);
const [_400error, set400Error] = useState('');
const [_422errors, set422Errors] = useState({ image: '' });
const [_success_delete, setSuccessDelete] = useState('');
const [_success_update_image, setSuccessUpdateImage] = useState('');
const profile = {
id: 1,
name: '田中 達也',
username:'chankan',
tel:'08012927104',
email:'chankan07@gmail.com',
company:'株式会社ZOTMAN',
image:'/assets/img/avatar/avatar-sample03@2x.png'
useEffect(() => {
setLoaded(false);
let child_id = document.getElementById('child_id').value;
axios.get('/api/children/detail/'+child_id)
.then(response => {
setLoaded(true);
if(response.data.status_code==200){
setProfile(response.data.params);
setImage(response.data.params.image);
}
})
.catch(err=>console.log(err))
},[]);
const handleLogout = () => {
axios.get('/c-account/logout')
.then(() => location.href = '/c-account/login')
}
useEffect(
() => {
const formdata = new FormData();
let child_id = 1;
// axios.get('/api/meetings/listOfNonApprovalOfChild', {child_id: child_id})
// .then(response => {
// if(response.data.status_code==200){
// // window.location.href = '/register/c-account/complete';
// }
// else if(response.data.status_code==400){
// // window.location.href = '/register/c-account/error';
// }
// else if(response.data.status_code==500){
// // window.location.href = '/unknown-error';
// }
// })
// .catch(err=>console.log(err))
},[]
);
const handleImageChange = (e) => {
e.preventDefault();
set422Errors({image: ''});
let reader = new FileReader();
let _file = e.target.files[0];
reader.readAsDataURL(_file);
reader.onloadend = () => {
setImage(reader.result);
axios.put(`/api/children/updateImage/${document.getElementById('child_id').value}`, {image: reader.result})
.then(response => {
switch(response.data.status_code){
case 200: {
setImage(reader.result);
setSuccessUpdateImage(response.data.success_messages);
break;
}
case 400: set400Error(response.data.error_messages); break;
case 422: set422Errors(response.data.error_messages); break;
}
});
};
};
return (
<div className="l-content">
<div className="l-content-w560">
<div className="l-content__ttl">
<div className="l-content__ttl__left">
@ -66,111 +69,104 @@ const Profile = () => {
</div>
<Notification/>
</div>
<div className="l-content-wrap">
<section className="profile-container">
<div className="profile-wrap">
<div className="profile-content">
<div>
<input type="file" id="avatar" name="avatar" className="d-none" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)}/>
<div className="avatar-wrapper">
<label htmlFor="avatar" className='avatar-label'>
<IconButton color="primary" aria-label="upload picture" component="span" className="bg-yellow shadow-sm">
<img src="/assets/img/icon/camera.svg" width="16" height="16"/>
</IconButton>
</label>
{
image &&
<img src={image} alt="" width ="100%" height="100%" style={{borderRadius:'50%'}}/>
{
!loaded &&
<CircularProgress color="secondary" className="css-loader"/>
}
{
loaded &&
<div className="profile-wrap">
<div className="profile-content">
<div>
<input type="file" id="avatar" name="avatar" className="d-none" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)}/>
<div className="avatar-wrapper">
<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>
<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>
<p className="profile-name ft-xs-14">{profile.name}</p>
<div className="profile-info ft-xs-14">
<div className="profile-info__item">
<p className="profile-info__icon">
<img src="/assets/img/icon/mail.svg" alt="メール"/>
</p>
<p className="txt">{profile.username}</p>
</div>
<div className="profile-info__item">
<a href={`mailto:${profile.email}`}>
<p className="profile-name ft-xs-17">{`${profile.first_name} ${profile.last_name}`}</p>
<div className="profile-info ft-xs-16">
<div className="profile-info__item">
<p className="profile-info__icon">
<img src="/assets/img/icon/mail.svg" alt="メール"/>
<img src="/assets/img/icon/person-pin.svg" alt="person"/>
</p>
<p className="txt">{profile.email}</p>
</a>
</div>
<div className="profile-info__item">
<a href={`tel:${profile.tel}`}>
<p className="txt">{profile.identity}</p>
</div>
<div className="profile-info__item">
<a href={`mailto:${profile.email}`}>
<p className="profile-info__icon">
<img src="/assets/img/icon/mail.svg" alt="メール"/>
</p>
<p className="txt">{profile.email}</p>
</a>
</div>
<div className="profile-info__item">
<a href={`tel:${profile.tel}`}>
<p className="profile-info__icon">
<img src="/assets/img/icon/phone.svg" alt="電話" />
</p>
<p className="txt">{profile.tel}</p>
</a>
</div>
<div className="profile-info__item">
<p className="profile-info__icon">
<img src="/assets/img/icon/phone.svg" alt="電話" />
<img src="/assets/img/icon/building.svg" alt="会社名"/>
</p>
<p className="txt">{profile.tel}</p>
</a>
<p className="txt">{profile.company ? profile.company: '-'}</p>
</div>
</div>
<div className="profile-info__item">
<p className="profile-info__icon">
<img src="/assets/img/icon/building.svg" alt="会社名"/>
</p>
<p className="txt">{profile.company}</p>
</div>
</div>
<div className="p-profile-btn">
<a className="btn-default btn-yellow btn-profile btn-r8 btn-h52 h-xs-45-px"
onClick={e => {
e.preventDefault();
history.push({
pathname: `/c-account/profile/edit/${profile.id}`,
state: {}
});
}}
>
<span className="ft-xs-14">プロフィールを変更する</span>
</a>
</div>
<div className="p-profile-btn">
<a className="btn-default btn-yellow btn-password btn-r8 btn-h52 h-xs-45-px"
onClick={e => {
e.preventDefault();
history.push({
pathname: `/c-account/profile/password-edit/${profile.id}`,
state: {}
});
}}
>
<span className="ft-xs-14">パスワードを変更する</span>
</a>
</div>
<div className="p-profile-txtLink">
<a href="/login/c-account">
<span className="ft-xs-14">ログアウト</span>
</a>
</div>
<div className="p-profile-txtLink">
<a onClick={e => {
e.preventDefault();
history.push({
pathname: `/c-account/profile/withdrawal`,
state: {}
});
}}
>
<span className="ft-xs-14">退会する</span>
</a>
<div className="p-profile-btn">
<Link to={`/c-account/profile/edit/${document.getElementById('child_id').value}`}
className="btn-default btn-yellow btn-profile btn-r8 btn-h52 h-xs-60-px">
<span className="ft-xs-16">プロフィールを変更する</span>
</Link>
</div>
<div className="p-profile-btn">
<Link to={`/c-account/profile/password-edit/${document.getElementById('child_id').value}`}
className="btn-default btn-yellow btn-password btn-r8 btn-h52 h-xs-60-px">
<span className="ft-xs-16">パスワードを変更する</span>
</Link>
</div>
<div className="p-profile-txtLink">
<a onClick={handleLogout}>
<span className="ft-xs-16">ログアウト</span>
</a>
</div>
<div className="p-profile-txtLink">
<Link to={`/c-account/profile/withdrawal`}>
<span className="ft-xs-16">退会する</span>
</Link>
</div>
</div>
</div>
</div>
}
{
_400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
}
{ _success_update_image &&
<Alert type="success" hide={()=>setSuccessUpdateImage('')}>
{_success_update_image}
</Alert>
}
</section>
</div>
</div>
</div>
)
}

ファイルの表示

@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';
import Notification from '../../component/notification';
@ -9,57 +8,42 @@ import Alert from '../../component/alert';
const ProfilePasswordEdit = () => {
const history = useHistory();
const [pwd, setPwd] = useState('');
const [confirm_pwd, setConfirmPwd] = useState('');
const [errors, setErrors] = useState({pwd:'', confirm_pwd:''})
const [err_msg, setErrMsg] = useState({status:'', msg:''})
const [submitStatus, setSubmitStatus] = useState('')
const validateForm = () => {
let errors = {};
let formIsValid = true;
if(pwd.length == 0){ formIsValid = false; errors['pwd'] = 'Required'; }
else errors['pwd'] = '';
const history = useHistory();
const [password, setPassword] = useState('');
const [password_confirmation, setConfirmPassword] = useState('');
if(confirm_pwd.length == 0){ formIsValid = false; errors['confirm_pwd'] = 'Required'; }
else errors['confirm_pwd'] = '';
setErrors(errors);
return formIsValid;
}
const [_422errors, set422Errors] = useState({
password:'',
password_confirmation:''
});
const [_400error, set400Error] = useState('');
const [_success, setSuccess] = useState('');
const [submit, setSubmit] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
setErrMsg({status:'', msg:''});
if(!validateForm()) return;
const formdata = new FormData();
formdata.append('first_name', first_name);
formdata.append('last_name', last_name);
formdata.append('email', email);
formdata.append('password', password);
formdata.append('company', company);
formdata.append('image', image);
// axios.post('/api/children/profile/edit/password/{child_id}', formdata)
// .then(response => {
// if(response.data.status_code==200){
// setSubmitStatus('success);
// }
// else if(response.data.status_code==400){
// setSubmitStatus('failed);
// }
// })
// .catch(err=>console.log(err))
set422Errors({
password:'',
password_confirmation:''
});
setSubmit(true);
const post = {
password: password,
password_confirmation: password_confirmation
}
axios.put(`/api/children/updatePassword/${document.getElementById('child_id').value}`, post)
.then(response => {
setSubmit(false);
switch(response.data.status_code){
case 200: setSuccess(response.data.success_messages); break;
case 400: set400Error(response.data.error_messages); break;
case 422: set422Errors(response.data.error_messages); break;
}
})
.catch(err=>console.log(err))
}
@ -81,43 +65,52 @@ const ProfilePasswordEdit = () => {
<form onSubmit={handleSubmit} noValidate>
<div className="edit-set">
<label htmlFor="pwd" className="control-label ft-14 ft-md-12">
<label htmlFor="password" className="control-label ft-14 ft-md-12">
新しいパスワード
</label>
<input type="password" name="pwd" id="pwd" className={`input-default input-h60 input-w480 ${ errors['pwd'].length != 0 && "is-invalid c-input__target" }`}
value={pwd} onChange={e=>setPwd(e.target.value)} autoFocus/>
<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/>
{
errors['pwd'].length != 0 &&
_422errors.password &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['pwd']}
{ _422errors.password }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="confirm_pwd" className="control-label ft-14 ft-md-12">
<label htmlFor="password_confirmation" className="control-label ft-14 ft-md-12">
確認用新しいパスワード
</label>
<input type="password" name="confirm_pwd" id="confirm_pwd" className={`input-default input-h60 input-w480 ${ errors['confirm_pwd'].length != 0 && "is-invalid c-input__target" }`}
value={confirm_pwd} onChange={e=>setConfirmPwd(e.target.value)}/>
<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)}/>
{
errors['confirm_pwd'].length != 0 &&
_422errors.password_confirmation &&
<span className="l-alert__text--error ft-16 ft-md-14">
{errors['confirm_pwd']}
{ _422errors.password_confirmation }
</span>
}
</div>
<div className="mt-5">
<LoadingButton type="submit" fullWidth className="p-4 rounded-20 ft-15 ft-xs-13 font-weight-bold text-black bg-yellow">
<span>パスワードを更新</span>
<LoadingButton type="submit" fullWidth
loading = {submit}
className="btn-edit btn-default btn-h70 bg-yellow rounded-20">
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>パスワードを更新</span>
</LoadingButton>
</div>
{
submitStatus == 'success' && <Alert type="success">Submit Success!</Alert>
}
_400error &&
<Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
}
{
submitStatus == 'fail' && <Alert type="fail">Submit Failed!</Alert>
_success &&
<Alert type="success"
hide={()=>
history.push({
pathname: `/c-account/profile/`,
state: {}
})}>{_success}</Alert>
}
</form>

ファイルの表示

@ -1,24 +1,26 @@
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { LoadingButton } from '@material-ui/lab';
import Notification from '../../component/notification';
const ProfileWithdrawal = () => {
const [submit, setSubmit] = useState(false);
const [_400error, set400Error] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// axios.delete('/api/children/delete/1')
// .then(response => {
// if(response.data.status_code==200){
// }
// else if(response.data.status_code==400){
// }
// })
// .catch(err=>console.log(err))
setSubmit(true);
let child_id = document.getElementById("child_id").value;
axios.delete('/api/children/withdrawal', {params:{child_id: child_id}})
.then(response => {
setSubmit(false);
switch(response.data.status_code){
case 200: window.location.href = "/c-account/withdrawal/complete"; break;
case 400: set400Error("失敗しました。"); break;
}
})
}
return (
@ -37,15 +39,24 @@ const ProfileWithdrawal = () => {
<div className="edit-content">
<form className="edit-form" onSubmit={handleSubmit} noValidate>
<div className="edit-set-bg ft-xs-14">
<div className="edit-set-bg ft-xs-16">
<p>本当に退会してもよろしいでしょうか</p>
</div>
<button type="submit" className="btn-edit btn-default btn-h70 btn-r20 btn-yellow ft-xs-15">退会する</button>
<div>
<LoadingButton type="submit" fullWidth
loading = {submit}
className="btn-edit btn-default btn-h70 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>
</div>

ファイルの表示

@ -204,6 +204,7 @@ a{
color: green !important;
position: fixed;
left: calc(50vw - 22px);
z-index: 10;
@media screen and (min-width:1068px){
left: calc( 50vw + 240px / 2 - 22px);
}

ファイルの表示

@ -1,63 +1,7 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@extends('c_account.layout')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('title', '子')
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name=”robots” content=”noindex” />
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="faviconのパスが入ります" />
<!-- Android アドレスバーの色 -->
<meta name="theme-color" content="#ffffff" />
<!-- iOS ホーム画面 -->
<link rel="apple-touch-icon" href="Web http://dummydummydummydummydummydummydummy" />
<meta name="apple-mobile-web-app-title" content="ほげほげ" />
<!-- Windows ピン留め時の見た目 -->
<meta name="msapplication-config" content="/config/browserconfig.xml" />
<title>退会完了</title>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}" />
</head>
<body class="">
<main class="l-single-main l-sign-up">
<div class="l-centeringbox">
<div class="l-centeringbox-wrap">
<div class="l-single-container login-panel">
<div class="l-single-inner">
<h1 class="ft-xs-20">退会完了</h1>
<div class="edit-set-bg u-mb30-lose u-mb25-gain ft-xs-13">
退会完了しました。<br/>
今後とも、危機管理をよろしくお願いいたします。
</div>
<div class="text-center">
<a class="ft-xs-13">トップページへ戻る</a>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
@section('content')
<div id="c-auth"></div>
@endsection