react_admin_layout
This commit is contained in:
162
src/pages/home/auth/Auth.tsx
Normal file
162
src/pages/home/auth/Auth.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React, { useEffect, useRef, type FormEvent } from 'react'
|
||||
import './auth.scss'
|
||||
import { UserRole, UserStatus, type User } from '../../../types/user.type'
|
||||
import { Apis } from '../../../apis'
|
||||
import { message, Modal } from 'antd'
|
||||
import { FormUtil } from '../../../utils/form.util'
|
||||
import type { UserSignInDTO } from '../../../apis/core/user.api'
|
||||
import { useSelector } from 'react-redux'
|
||||
import type { StoreType } from '../../../stores'
|
||||
export default function Auth() {
|
||||
const containerRef = useRef(null)
|
||||
|
||||
|
||||
async function handleSignup(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
let newUser = {
|
||||
id: String(Date.now()),
|
||||
userName: (e.target as any).userName.value,
|
||||
password: (e.target as any).password.value,
|
||||
role: UserRole.USER,
|
||||
displayName: (e.target as any).displayName.value,
|
||||
email: (e.target as any).email.value,
|
||||
phoneNumber: (e.target as any).phoneNumber.value,
|
||||
status: UserStatus.ACTIVE,
|
||||
banReason: ""
|
||||
}
|
||||
let newUserResult = (await Apis.user.signUp(newUser)) as User
|
||||
Modal.confirm({
|
||||
title: "Thông báo",
|
||||
content: `Bạn đã đăng ký thành công với tên đăng nhập là: ${newUserResult.userName}, id của bạn là: ${newUserResult.id}`,
|
||||
onOk: () => {
|
||||
FormUtil.resetForm(e)
|
||||
containerRef.current.classList.remove("right-panel-active");
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
message.error(err.mes)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSignin(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
let loginData: UserSignInDTO = {
|
||||
emailOrUserName: (e.target as any).emailOrUserName.value,
|
||||
password: (e.target as any).password.value
|
||||
}
|
||||
console.log("loginData", loginData)
|
||||
try {
|
||||
let data = await Apis.user.signIn(loginData)
|
||||
localStorage.setItem("userLogin", data.data.id)
|
||||
Modal.confirm({
|
||||
title: `Chào mừng ${data.data.userName} đã quay trở lại`,
|
||||
content: ``,
|
||||
onOk: () => {
|
||||
window.location.href = "/"
|
||||
},
|
||||
onCancel: () => {
|
||||
window.location.href = "/"
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
message.error(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
const userStore = useSelector((store: StoreType) => {
|
||||
return store.user
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!userStore.loading && userStore.data) {
|
||||
window.location.href = "/"
|
||||
}
|
||||
}, [userStore.data, userStore.loading])
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
userStore.data ? <>Đã đăng nhập</> : (
|
||||
<div className='auth_page'>
|
||||
<div ref={containerRef} className="container" id="container">
|
||||
{/* Form Đăng Ký */}
|
||||
<div className="form-container sign-up-container">
|
||||
<form onSubmit={(e) => {
|
||||
handleSignup(e)
|
||||
}}>
|
||||
<h1>Tạo tài khoản</h1>
|
||||
<div className="social-container">
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-google-plus-g" />
|
||||
</a>
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-linkedin-in" />
|
||||
</a>
|
||||
</div>
|
||||
<input type="text" placeholder="userName" name='userName' />
|
||||
<input type="password" placeholder="Password" name='password' />
|
||||
<input type="text" placeholder="displayName" name='displayName' />
|
||||
<input type="email" placeholder="email" name='email' />
|
||||
<input type="text" placeholder="phoneNumber" name='phoneNumber' />
|
||||
<button className='cursor-pointer'>Đăng Ký</button>
|
||||
</form>
|
||||
</div>
|
||||
{/* Form Đăng Nhập */}
|
||||
<div className="form-container sign-in-container">
|
||||
<form onSubmit={(e) => {
|
||||
handleSignin(e)
|
||||
}}>
|
||||
<h1>Sign in</h1>
|
||||
<div className="social-container">
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-google-plus-g" />
|
||||
</a>
|
||||
<a href="#" className="social">
|
||||
<i className="fab fa-linkedin-in" />
|
||||
</a>
|
||||
</div>
|
||||
<span>or use your account</span>
|
||||
<input type="text" placeholder="Email or Username" name='emailOrUserName' />
|
||||
<input type="password" placeholder="Password" name='password' />
|
||||
<a href="#">Forgot your password?</a>
|
||||
<button>Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
{/* Control */}
|
||||
<div className="overlay-container">
|
||||
<div className="overlay">
|
||||
<div className="overlay-panel overlay-left">
|
||||
<h1>Welcome Back!</h1>
|
||||
<p>To keep connected with us please login with your personal info</p>
|
||||
<button onClick={() => {
|
||||
containerRef.current.classList.remove("right-panel-active");
|
||||
}} className="ghost" id="signIn">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div className="overlay-panel overlay-right">
|
||||
<h1>Hello, Friend!</h1>
|
||||
<p>Enter your personal details and start journey with us</p>
|
||||
<button onClick={() => {
|
||||
containerRef.current.classList.add("right-panel-active")
|
||||
}} className="ghost" id="signUp">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user