completed register
このコミットが含まれているのは:
dragon1211
コミット
61299cd86f
|
|
@ -10517,6 +10517,10 @@ input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide
|
|||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
.mt-25-px {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
.pointer:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -10660,6 +10664,25 @@ input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide
|
|||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin: auto;
|
||||
border-radius: 50% 50%;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.avatar-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
}
|
||||
.avatar-label span {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
モーダルエラー
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24.095" height="19.987" viewBox="0 0 24.095 19.987"><g fill="none" stroke="#080808" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-name="Icon feather-camera" transform="translate(0.75 0.75)"><path d="M24.095,20.933a2.054,2.054,0,0,1-2.054,2.054H3.554A2.054,2.054,0,0,1,1.5,20.933V9.635A2.054,2.054,0,0,1,3.554,7.581H7.662L9.716,4.5h6.162l2.054,3.081h4.108a2.054,2.054,0,0,1,2.054,2.054Z" data-name="パス 1" transform="translate(-1.5 -4.5)"/><path d="M20.216,17.608A4.108,4.108,0,1,1,16.108,13.5,4.108,4.108,0,0,1,20.216,17.608Z" data-name="パス 2" transform="translate(-4.811 -7.338)"/></g></svg>
|
||||
|
変更後 幅: | 高さ: | サイズ: 671 B |
ファイル差分が大きすぎるため省略します
差分を読み込み
|
|
@ -5,3 +5,5 @@ require('./pages/contact/complete');
|
|||
require('./pages/contact/unknown');
|
||||
|
||||
require('./child/register');
|
||||
require('./child/register/complete');
|
||||
require('./child/register/error');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Button } from '@material-ui/core';
|
||||
import Alert from '../../component/alert';
|
||||
|
||||
|
||||
const SignUp_Complete = () => {
|
||||
|
||||
const gotoLogin = () => {
|
||||
window.location.href = "/login/c-account/";
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center font-weight-bold ft-20">本登録完了</p>
|
||||
<p className="p-2 mt-80-px mb-0 ft-16 ft-md-13 bg-color-1">
|
||||
本登録が完了しました。<br/>
|
||||
ログイン画面より、ログインを行ってください。
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" fullWidth className="p-3 rounded-20 ft-16 ft-md-13 font-weight-bold text-black bg-color-2" onClick={gotoLogin}>ログイン画面へ</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if(document.getElementById('signup-complete')){
|
||||
ReactDOM.render(
|
||||
<SignUp_Complete />,
|
||||
document.getElementById('signup-complete')
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Button } from '@material-ui/core';
|
||||
import Alert from '../../component/alert';
|
||||
|
||||
|
||||
const SignUp_Error = () => {
|
||||
|
||||
const gotoLogin = () => {
|
||||
window.location.href = "/login/c-account/";
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center font-weight-bold ft-20">本登録エラー</p>
|
||||
<span className="mt-80-px l-alert__text--red ft-16 ft-md-13">
|
||||
登録の経過時間が過ぎております。<br/>
|
||||
お手数ですが再度招待ユーザーに連絡し、再登録 の手続きをお願いいたします。
|
||||
</span>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" fullWidth className="p-3 rounded-20 ft-16 ft-md-13 font-weight-bold text-black bg-color-2" onClick={gotoLogin}>ログイン画面へ</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if(document.getElementById('signup-error')){
|
||||
ReactDOM.render(
|
||||
<SignUp_Error />,
|
||||
document.getElementById('signup-error')
|
||||
)
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@ import { Button } from '@material-ui/core';
|
|||
import { LoadingButton } from '@material-ui/lab';
|
||||
import axios from 'axios';
|
||||
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import PhotoCamera from '@mui/icons-material/PhotoCamera';
|
||||
|
||||
|
||||
const Register = () => {
|
||||
|
|
@ -12,6 +14,7 @@ const Register = () => {
|
|||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [agent, setAgent] = useState('');
|
||||
const [imgUri, setImageUri] = useState('');
|
||||
|
||||
const [errors, setErrors] = useState({})
|
||||
const [err_400, setErr400] = useState(false)
|
||||
|
|
@ -56,6 +59,9 @@ const Register = () => {
|
|||
}
|
||||
}
|
||||
|
||||
if(!imgUri){ formIsValid = false; errors['avatar'] = true; }
|
||||
else errors['avatar'] = false;
|
||||
|
||||
if(firstName.length == 0){ formIsValid = false; errors['firstName'] = true; }
|
||||
else errors['firstName'] = false;
|
||||
|
||||
|
|
@ -72,17 +78,63 @@ const Register = () => {
|
|||
return formIsValid;
|
||||
}
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
|
||||
e.preventDefault();
|
||||
let reader = new FileReader();
|
||||
let _file = e.target.files[0];
|
||||
|
||||
reader.readAsDataURL(_file);
|
||||
|
||||
reader.onloadend = () => {
|
||||
setImageUri(reader.result);
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<p className="text-center font-weight-bold ft-20">本登録</p>
|
||||
|
||||
<div className="mt-25-px">
|
||||
<input type="file" id="avatar" name="avatar" className="d-none" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)}/>
|
||||
{
|
||||
errors['avatar'] ?
|
||||
<>
|
||||
<div className="avatar-wrapper is-invalid c-input__target">
|
||||
<label htmlFor="avatar" className='avatar-label'>
|
||||
<IconButton color="primary" aria-label="upload picture" component="span" className="bg-color-2 shadow-sm">
|
||||
<img src="/images/camera.svg" width="16" height="16"/>
|
||||
</IconButton>
|
||||
</label>
|
||||
{
|
||||
imgUri && <img src={imgUri} alt="" width ="100%" height="100%" style={{borderRadius:'50%'}}/>
|
||||
}
|
||||
</div>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">Required.</span>
|
||||
</>
|
||||
:
|
||||
<div className="avatar-wrapper">
|
||||
<label htmlFor="avatar" className='avatar-label'>
|
||||
<IconButton color="primary" aria-label="upload picture" component="span" className="bg-color-2 shadow-sm">
|
||||
<img src="/images/camera.svg" width="16" height="16"/>
|
||||
</IconButton>
|
||||
</label>
|
||||
{
|
||||
imgUri && <img src={imgUri} alt="" width ="100%" height="100%" style={{borderRadius:'50%'}}/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="c-input mt-40-px">
|
||||
<div className="c-input mt-25-px">
|
||||
<label htmlFor="firstname" className="c-input__label ft-12"> 姓 </label>
|
||||
{
|
||||
errors['firstName'] ?
|
||||
<>
|
||||
<input type="text" name="firstname" id="firstname" className="w-100 c-input__edit is-invalid c-input__target" value={firstName} onChange={e=>setFirstName(e.target.value)}/>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">required.</span>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">Required.</span>
|
||||
</>
|
||||
:<input type="text" name="firstname" id="firstname" className="w-100 c-input__edit c-input__target" value={firstName} onChange={e=>setFirstName(e.target.value)}/>
|
||||
}
|
||||
|
|
@ -94,7 +146,7 @@ const Register = () => {
|
|||
errors['lastName'] ?
|
||||
<>
|
||||
<input type="text" name="lastname" id="lastname" className="w-100 c-input__edit is-invalid c-input__target" value={lastName} onChange={e=>setLastName(e.target.value)}/>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">required.</span>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">Required.</span>
|
||||
</>
|
||||
:<input type="text" name="lastname" id="lastname" className="w-100 c-input__edit c-input__target" value={lastName} onChange={e=>setLastName(e.target.value)}/>
|
||||
}
|
||||
|
|
@ -106,7 +158,7 @@ const Register = () => {
|
|||
errors['email'] ?
|
||||
<>
|
||||
<input type="email" name="email" id="email" className="w-100 c-input__edit is-invalid c-input__target" value={email} onChange={e=>setEmail(e.target.value)}/>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">required.</span>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">Required.</span>
|
||||
</>
|
||||
:<input type="email" name="email" id="email" className="w-100 c-input__edit c-input__target" value={email} onChange={e=>setEmail(e.target.value)}/>
|
||||
}
|
||||
|
|
@ -134,7 +186,7 @@ const Register = () => {
|
|||
errors['agent'] ?
|
||||
<>
|
||||
<input type="agent" name="agent" id="agent" className="w-100 c-input__edit is-invalid c-input__target" value={agent} onChange={e=>setAgent(e.target.value)}/>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">required.</span>
|
||||
<span className="l-alert__text--red ft-16 ft-md-14">Required.</span>
|
||||
</>
|
||||
:<input type="agent" name="agent" id="agent" className="w-100 c-input__edit c-input__target" value={agent} onChange={e=>setAgent(e.target.value)}/>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,14 +44,7 @@
|
|||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
.mt-80-px{
|
||||
margin-top: 80px !important;
|
||||
}
|
||||
|
||||
.mt-50-px{
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.mt-40-px{
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
.mt-80-px{ margin-top: 80px !important; }
|
||||
.mt-50-px{ margin-top: 50px !important; }
|
||||
.mt-40-px{ margin-top: 40px !important; }
|
||||
.mt-25-px{ margin-top: 25px !important; }
|
||||
|
|
@ -125,3 +125,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.avatar-wrapper{
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin: auto;
|
||||
border-radius: 50% 50%;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.avatar-label{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
span{
|
||||
box-shadow: 0 0 8px rgb(0 0 0 / 18%) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
@extends('c_account.register.layout')
|
||||
|
||||
@section('title', '登録')
|
||||
|
||||
@section('content')
|
||||
<div id="signup-complete"></div>
|
||||
@endsection
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@extends('c_account.register.layout')
|
||||
|
||||
@section('title', '登録')
|
||||
|
||||
@section('content')
|
||||
<div id="signup-error"></div>
|
||||
@endsection
|
||||
|
||||
|
||||
|
|
@ -22,3 +22,5 @@ Route::get('/contact-us/complete/', function () { return view('pages.contact.com
|
|||
Route::get('/unknown-error ', function () { return view('pages.contact.unknown_error'); });
|
||||
|
||||
Route::get('/register/c-account ', function () { return view('c_account.register.index'); });
|
||||
Route::get('/register/c-account/complete ', function () { return view('c_account.register.complete'); });
|
||||
Route::get('/register/c-account/error ', function () { return view('c_account.register.error'); });
|
||||
|
|
|
|||
新しいイシューから参照