suwako
/
kikikan
アーカイブ
1
0
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース Wiki アクティビティ

add p-account auth

このコミットが含まれているのは:
dragon1211 2021-11-10 04:34:59 +09:00
親 15c0466cc0
コミット 79e43a9b1c
11個のファイルの変更、1829行の追加、1行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

1211
backend/public/js/app.js vendored
ファイルの表示

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

1
backend/resources/js/app.js vendored
ファイルの表示

@ -1,6 +1,7 @@
require('./bootstrap');
require('./parent/app');
require('./parent/auth');
// require('./pages/contact');
// require('./pages/contact/complete');
// require('./pages/contact/unknown');

33
backend/resources/js/parent/auth/forgot_password/complete.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,33 @@
import React, { useEffect, useState } from 'react';
import { Button } from '@material-ui/core';
import { useHistory } from 'react-router';
const ParentForgotPasswordComplete = () => {
const history = useHistory();
const gotoLogin = () => {
history.push({pathname: '/p-account/login', state: {}});
}
return (
<div>
<p className="text-center font-weight-bold ft-25">登録完了</p>
<span className="mt-80-px ft-18 ft-xs-16 l-alert__text--success">
パスワードの更新が完了しました。<br/>
ログイン画面に遷移して、新しいパスワードをご利用ください。
</span>
<div className="mt-5">
<Button type="submit" fullWidth
className="btn-edit btn-default btn-h75 bg-yellow rounded-20"
onClick={gotoLogin}>
<span className="ft-16 font-weight-bold text-black">ログイン画面へ</span>
</Button>
</div>
</div>
)
}
export default ParentForgotPasswordComplete;

72
backend/resources/js/parent/auth/forgot_password/index.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,72 @@
import React, { useState } from 'react';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';
import Alert from '../../../component/alert';
const ParentForgotPassword = () => {
const [tel, setTel] = useState('');
const [submit, setSubmit] = useState(false);
const [_422errors, set422Errors] = useState({tel: ''})
const [_400error, set400Error] = useState('')
const [_success, setSuccess] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
set422Errors({tel: ''});
setSubmit(true);
const formdata = new FormData();
formdata.append('tel', tel);
axios.post('/api/children/requestPassword', formdata)
.then(response => {
setSubmit(false)
switch(response.data.status_code){
case 200: setSuccess(response.data.success_messages); break;
case 422: set422Errors(response.data.error_messages); break;
case 400: set400Error(response.data.error_messages); break;
case 401: set400Error(response.data.error_messages); break;
case 402: set400Error(response.data.error_messages); break;
}
})
}
return (
<form onSubmit={handleSubmit} noValidate>
<p className="pb-60-px text-center font-weight-bold ft-25">パスワードを忘れた方</p>
<div className="edit-set">
<label htmlFor="tel" className="control-label"> 電話番号 </label>
<input type="text" name="tel" id="tel" className={`input-default input-h60 input-w480 ${ _422errors.tel && "is-invalid c-input__target" }`} value={tel} onChange={e=>setTel(e.target.value)} autoFocus/>
{
_422errors.tel &&
<span className="l-alert__text--error ft-16 ft-md-14">
{_422errors.tel}
</span>
}
</div>
<div className="mt-5">
<LoadingButton type="submit"
loading={submit}
fullWidth
className="btn-edit btn-default btn-h60 bg-yellow rounded-20 py-5">
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>
パスワード再設定URLを送信
</span>
</LoadingButton>
</div>
{
_400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
}
{
_success && <Alert type="success" hide={()=>setSucess('')}> {_success}</Alert>
}
</form>
)
}
export default ParentForgotPassword;

93
backend/resources/js/parent/auth/forgot_password/reset.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,93 @@
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';
const ParentForgotPasswordReset = (props) => {
const history = useHistory();
const [submit, setSubmit] = useState(false);
const [password, setPassword] = useState('');
const [password_confirmation, setPasswordConfirmation] = useState('');
const [_422errors, set422Errors] = useState({password:'', password_confirmation:''})
const [_400error, set400Error] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
set422Errors({password:'', password_confirmation:''});
setSubmit(true);
let req = {
password: password,
password_confirmation: password,
token: props.match.params?.token
}
axios.put('/api/children/updatePassword', req)
.then(response => {
setSubmit(false);
switch(response.data.status_code){
case 200: {
history.push({pathname: '/c-account/forgot-password/complete', state: {}});
break;
}
case 422: set422Errors(response.data.error_messages); break;
case 400: set400Error(response.data.error_messages); break;
}
})
}
return (
<form onSubmit={handleSubmit} noValidate>
<p className="pb-60-px text-center font-weight-bold ft-25">パスワード再登録</p>
<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 input-w480 ${ _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>
<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 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>
<div className="mt-5">
<LoadingButton type="submit"
loading={submit}
fullWidth
className="btn-edit btn-default btn-h60 bg-yellow rounded-20 py-5">
<span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>
パスワードを更新する
</span>
</LoadingButton>
</div>
{
_400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
}
</form>
)
}
export default ParentForgotPasswordReset

55
backend/resources/js/parent/auth/index.js vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,55 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ParentForgotPassword from './forgot_password';
import ParentForgotPasswordComplete from './forgot_password/complete';
import ParentForgotPasswordReset from './forgot_password/reset';
import ParentLogin from './login';
import ParentSignUp from './register';
import ParentSignUpComplete from './register/complete';
import ParentSignUpError from './register/error';
import ParentWithdrawalComplete from './withdrawal_complete';
export default class ParentAuth extends Component {
render() {
return (
<main className="l-single-main">
<div className="l-centeringbox">
<div className="l-centeringbox-wrap">
<div className="l-single-container">
<div className="l-single-inner">
<BrowserRouter>
<Switch>
<Route exact path='/p-account/register/:token' component={ParentSignUp} />
<Route exact path='/p-account/register/complete/:token' component={ParentSignUpComplete} />
<Route exact path='/p-account/register/error/:token' component={ParentSignUpError} />
<Route exact path="/p-account/forgot-password" component = {ParentForgotPassword} />
<Route exact path="/p-account/forgot-password/reset/:token" component = {ParentForgotPasswordReset} />
<Route exact path="/p-account/forgot-password/complete" component = {ParentForgotPasswordComplete} />
<Route exact path="/p-account/login" component = {ParentLogin} />
<Route exact path="/p-account/withdrawal/complete" component = {ParentWithdrawalComplete} />
</Switch>
</BrowserRouter>
</div>
</div>
</div>
</div>
</main>
);
}
}
// ----------------------------------------------------------------------
if(document.getElementById('p-auth')){
ReactDOM.render(
<ParentAuth />,
document.getElementById('p-auth')
)
}

106
backend/resources/js/parent/auth/login/index.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,106 @@
import React, { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';
import Alert from '../../../component/alert';
const ParentLogin = () => {
const [submit, setSubmit] = useState(false);
const [tel, setTel] = useState('');
const [password, setPassword] = useState('');
const [_422errors, set422Errors] = useState({tel: '', password: ''});
const [_400error, set400Error] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
setSubmit(true);
set422Errors({tel:'', password:''});
const formdata = new FormData();
formdata.append('tel', tel);
formdata.append('password', password);
axios.post('/api/children/login/', formdata)
.then(response => {
setSubmit(false)
switch(response.data.status_code){
case 200:{
localStorage.setItem("from_login", true);
window.location.href = '/c-account/meeting';
break;
}
case 422: set422Errors(response.data.error_messages); break;
case 400: set400Error(response.data.error_message[0]); break;
}
})
.catch(err=>console.log(err))
}
return (
<form onSubmit={handleSubmit} noValidate>
<p className="text-center font-weight-bold ft-25 pb-60-px">ログイン</p>
<div className="edit-set">
<label htmlFor="tel" className="control-label ft-14 ft-md-12"> 電話番号 </label>
<input type="text" name="tel" id="tel" className={`input-default input-h60 ${ _422errors.tel && "is-invalid c-input__target" }`} value={tel} onChange={e=>setTel(e.target.value)} autoFocus/>
{
_422errors.tel &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.tel }
</span>
}
</div>
<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)}/>
{
_422errors.password &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.password }
</span>
}
</div>
<div className="edit-set mt-5">
<div className="c-input__checkbox text-center">
<label htmlFor="remember_me" className="m-0 ft-18 ft-md-16">
<span>ログイン情報を保持する</span>
<input id="remember_me" name="remember" type="checkbox" value="remember"/>
<div className="color-box"></div>
</label>
</div>
</div>
<div className="mt-5">
<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>
</div>
<div className="mt-5 text-center">
<Link to="/c-account/forgot-password"
className="ft-16 text-black text-decoration-none">
パスワード紛失の方はコチラ
</Link>
</div>
{
_400error && <Alert type="fail" hide={()=>set400Error(null)}>{_400error}</Alert>
}
</form>
)
}
export default ParentLogin;

33
backend/resources/js/parent/auth/register/complete.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,33 @@
import React, { useEffect, useState } from 'react';
import { Button } from '@material-ui/core';
import { useHistory } from 'react-router';
const ParentSignUpComplete = () => {
const history = useHistory();
const gotoLogin = () => {
history.push({pathname: '/c-account/login', state: {}});
}
return (
<div>
<p className="text-center font-weight-bold ft-25">本登録完了</p>
<span className="mt-80-px ft-18 ft-md-16 l-alert__text--success">
本登録が完了しました。<br/>
ログイン画面より、ログインを行ってください。
</span>
<div className="mt-5">
<Button type="submit" fullWidth
className="btn-edit btn-default btn-h60 bg-yellow rounded-20 py-5"
onClick={gotoLogin}>
<span className="ft-16 font-weight-bold text-black">ログイン画面へ</span>
</Button>
</div>
</div>
)
}
export default ParentSignUpComplete;

26
backend/resources/js/parent/auth/register/error.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,26 @@
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
const ParentSignUpError = () => {
const history = useHistory();
const gotoLogin = () => {
history.push({pathname: '/c-account/login', state: {}});
}
return (
<div>
<p className="text-center font-weight-bold ft-25">本登録エラー</p>
<span className="mt-80-px l-alert__text--error ft-18 ft-xs-16">
登録の経過時間が過ぎております。<br/>
お手数ですが再度招待ユーザーに連絡し、再登録 の手続きをお願いいたします。
</span>
</div>
)
}
export default ParentSignUpError;

181
backend/resources/js/parent/auth/register/index.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,181 @@
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import { LoadingButton } from '@material-ui/lab';
import axios from 'axios';
import IconButton from "@material-ui/core/IconButton";
import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
const ParentSignUp = (props) => {
const history = useHistory();
const [submit, setSubmit] = useState(false);
const [first_name, setFirstName] = useState('');
const [last_name, setLastName] = useState('');
const [identity, setIdentity] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [company, setCompany] = useState('');
const [image, setImage] = useState('');
const [_422errors, set422Errors] = useState({
first_name:'',
last_name:'',
identity:'',
email:'',
password:'',
image:'',
company:''
});
const handleSubmit = (e) => {
e.preventDefault();
set422Errors({
first_name:'',
last_name:'',
identity:'',
email:'',
password:'',
image:'',
company:''
});
setSubmit(true);
const formdata = new FormData();
formdata.append('first_name', first_name);
formdata.append('last_name', last_name);
formdata.append('identity', identity);
formdata.append('email', email);
formdata.append('password', password);
formdata.append('company', company);
formdata.append('image', image);
formdata.append('token', props.match.params.token);
axios.post('/api/children/registerMain', formdata)
.then(response => {
setSubmit(false);
switch(response.data.status_code){
case 200: history.push({pathname: '/c-account/register/complete/'+props.match.params.token, state: {}}); break;
case 422: set422Errors(response.data.error_messages); break;
case 400: history.push({pathname: '/c-account/register/error/'+props.match.params.token, state: {}}); break;
};
})
}
const handleImageChange = (e) => {
e.preventDefault();
let reader = new FileReader();
let _file = e.target.files[0];
reader.readAsDataURL(_file);
reader.onloadend = () => {
setImage(reader.result);
};
};
return (
<form onSubmit={handleSubmit} noValidate>
<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">
<label htmlFor="first_name" className="control-label"> 姓 </label>
<input type="text" name="first_name" id="first_name" className={`input-default input-nameSei input-h60 input-w480 ${ _422errors.first_name && "is-invalid c-input__target" }`} value={first_name} onChange={e=>setFirstName(e.target.value)}/>
{
_422errors.first_name &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.first_name }
</span>
}
</div>
<div className="edit-set">
<label htmlFor="last_name" className="control-label"> 名 </label>
<input type="text" name="last_name" id="last_name" className={`input-default input-nameSei input-h60 input-w480 ${ _422errors.last_name && "is-invalid c-input__target" }`} value={last_name} onChange={e=>setLastName(e.target.value)}/>
{
_422errors.last_name &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.last_name }
</span>
}
</div>
<div className="edit-set">
<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)}/>
{
_422errors.identity &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.identity }
</span>
}
</div>
<div className="edit-set">
<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)}/>
{
_422errors.email &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.email }
</span>
}
</div>
<div className="edit-set">
<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)}/>
{
_422errors.password &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.password }
</span>
}
</div>
<div className="edit-set">
<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)}/>
{
_422errors.company &&
<span className="l-alert__text--error ft-16 ft-md-14">
{ _422errors.company }
</span>
}
</div>
<div className="mt-5">
<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>
</div>
</form>
)
}
export default ParentSignUp;

19
backend/resources/js/parent/auth/withdrawal_complete.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,19 @@
import React from 'react';
import { Link } from 'react-router-dom';
const ParentWithdrawalComplete = () => {
return (
<div>
<p className="text-center font-weight-bold ft-25">退会完了</p>
<div className="edit-set-bg u-mb30-lose u-mb25-gain ft-xs-16 mt-5">
退会完了しました。<br/>
今後とも、KIKI管理をよろしくお願いいたします。
</div>
<div className="text-center">
<Link to="/p-account/login" className="ft-xs-16">トップページへ戻る</Link>
</div>
</div>
)
}
export default ParentWithdrawalComplete;