Skip to content

GitLab

Commit 48ba15b7 authored by seoyeon's avatar seoyeon
Browse files

회원가입 로그인

parent 6903b3c1
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 48ba15b7
...@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage"; ...@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage"; import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage"; import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage"; import InvitePage from "./pages/InvitePage";
import SingupPage from "./components/SignUp";
import LoginPage from "./components/Login"
function App() { function App() {
return ( return (
...@@ -14,6 +16,8 @@ function App() { ...@@ -14,6 +16,8 @@ function App() {
<Switch> <Switch>
<Route exact path="/" component={HomeGuestPage} /> <Route exact path="/" component={HomeGuestPage} />
<Route exact path="/user" component={HomeUserPage} /> <Route exact path="/user" component={HomeUserPage} />
<Route exact path="/signup" component={SingupPage} />
<Route exact path="/login" component={LoginPage} />
<Route path="/profile/:id/update" component={InfoUpdatePage} /> <Route path="/profile/:id/update" component={InfoUpdatePage} />
<Route path="/profile/:id" component={ProfilePage} /> <Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/:channelId" component={RoomPage}> <Route path="/room/:roomId/:channelId" component={RoomPage}>
......
client/src/components/Login.js
View file @ 48ba15b7
import { useEffect, useState, useRef } from 'react' import { useEffect, useState, useRef } from 'react'
import { Redirect } from 'react-router-dom' import { Link, Redirect } from 'react-router-dom'
import userApi from '../apis/user.api' import userApi from '../apis/user.api'
import catchErrors from '../context/catchError' import catchErrors from '../context/catchError'
import { handleLogin } from '../context/auth' import { handleLogin } from '../context/auth'
...@@ -63,56 +63,52 @@ const Login = () => { ...@@ -63,56 +63,52 @@ const Login = () => {
const { email, password } = user const { email, password } = user
return ( return (
<div className="modal-content"> <div className="container">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="modal-header"> <div className="m-3 d-flex justify-content-center">
<h5 className="modal-title" id="loginModalLabel"> <Link to="/">
로그인 <img src="/BORA.png" style={{ width: '160px' }} />
</h5> </Link>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
{error && <div className="alert alert-danger">{error}</div>} <div className="row mt-5 d-flex align-items-center">
<div className="modal-body"> <h2 style={{ textAlign: 'center' }}>로그인</h2>
<div> {error && <div className="alert alert-danger">{error}</div>}
<label>아이디</label> <div className="form-group">
<input <div className="mt-5">
className="form-control" <label>아이디</label>
id="email" <input
type="text" className="form-control"
name="email" id="email"
placeholder="아이디를 입력하세요" type="text"
value={email} name="email"
onChange={handleChange} placeholder="아이디를 입력하세요"
/> value={email}
onChange={handleChange}
/>
</div>
<div className="mt-3">
<label>비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
</div> </div>
<div> <div className="mt-4 d-flex justify-content-center">
<label>비밀번호</label> <button
<input type="submit"
className="form-control" className="btn btn-primary"
id="password" disabled={disabled}
type="password" >
name="password" 로그인
placeholder="비밀번호를 입력하세요" </button>
value={password}
onChange={handleChange}
/>
</div> </div>
</div> </div>
<div className="modal-footer">
<button
type="submit"
className="btn btn-primary"
disabled={disabled}
data-bs-dismiss="modal"
>
로그인
</button>
</div>
</form> </form>
</div> </div>
) )
......
client/src/components/SignUp.js
View file @ 48ba15b7
import axios from "axios"; import axios from 'axios'
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
import { Redirect } from "react-router-dom"; import { Link, Redirect } from 'react-router-dom'
import userApi from "../apis/user.api"; import userApi from '../apis/user.api'
import catchErrors from "../context/catchError"; import catchErrors from '../context/catchError'
const INIT_USER = { const INIT_USER = {
name: "", name: '',
email: "", email: '',
password: "", password: '',
checkpw: "", checkpw: '',
phone: "", phone: '',
}; }
const Signup = () => { const Signup = () => {
const [user, setUser] = useState(INIT_USER); const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState(""); const [error, setError] = useState('')
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false)
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false)
useEffect(() => { useEffect(() => {
setDisabled( setDisabled(!(user.name && user.email && user.password && user.checkpw))
!( }, [user])
user.name &&
user.email &&
user.password &&
user.checkpw
)
);
}, [user]);
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target; const { name, value } = event.target
setUser({ ...user, [name]: value }); setUser({ ...user, [name]: value })
} }
async function handleSubmit() { async function handleSubmit(e) {
e.preventDefault()
console.log('회원가입') console.log('회원가입')
try { try {
const data = await userApi.signup(user); if (!checkPassword()) {
return
}
const data = await userApi.signup(user)
console.log(data) console.log(data)
setSuccess(true); setSuccess(true)
setError(""); setError('')
} catch (error) { } catch (error) {
catchErrors(error, setError); console.log('error')
catchErrors(error, setError)
} finally { } finally {
// setLoading(false); // setLoading(false);
} }
} }
function checkPassword(event) { function checkPassword(event) {
const p1 = user.password; const p1 = user.password
const p2 = user.checkpw; const p2 = user.checkpw
if (p1 !== p2) { if (p1 !== p2) {
event.preventDefault(); // event.preventDefault()
alert("비밀번호가 일치하지 않습니다."); alert('비밀번호가 일치하지 않습니다.')
return false; return false
} else { } else {
setSuccess(true); alert('회원가입 되었습니다.')
return true; window.location.href = '/'
return true
} }
} }
if (success) {
alert("회원가입 되었습니다.");
<Redirect to="/" />;
}
const { name, id, password, checkpw, phone } = user; const { name, id, password, checkpw, phone } = user
return ( return (
<div className="modal-content"> <div className="container">
{error && <div className="alert alert-danger">{error}</div>} {error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="modal-header"> <div className="m-3 d-flex justify-content-center">
<h5 className="modal-title" id="loginModalLabel"> <Link to="/">
회원가입 <img src="/BORA.png" style={{ width: '160px' }} />
</h5> </Link>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div className="modal-body"> <div className="row mt-4">
<h5 style={{ textAlign: 'center' }}>회원가입</h5>
</div>
<div className="form-group">
<div className="p-2"> <div className="p-2">
<label className="p-1">이름</label> <label className="p-1">이름</label>
<input <input
...@@ -140,21 +133,21 @@ const Signup = () => { ...@@ -140,21 +133,21 @@ const Signup = () => {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> {/* {console.log(disabled)} */}
{console.log(disabled)} <div className="mt-3 d-flex justify-content-center">
<div className="modal-footer">
<button <button
type="submit" type="submit"
className="btn btn-primary" className="btn btn-primary"
onClick={checkPassword} onClick={handleSubmit}
disabled={disabled} disabled={disabled}
> >
회원가입 회원가입
</button> </button>
</div> </div>
</form> </div>
</form>
</div> </div>
); )
}; }
export default Signup; export default Signup
client/src/pages/HomeGuestPage.js
View file @ 48ba15b7
import { Link } from "react-router-dom";
import Login from "../components/Login"; import Login from "../components/Login";
import SignUp from "../components/SignUp"; import SignUp from "../components/SignUp";
...@@ -6,44 +7,22 @@ const HomeGuestPage = () => { ...@@ -6,44 +7,22 @@ const HomeGuestPage = () => {
<div className="d-flex flex-column justify-content-center h-100 font-weight-bold"> <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
<img src="BORA.PNG" className="w-100 p-4" /> <img src="BORA.PNG" className="w-100 p-4" />
<div className="d-flex flex-column align-items-center"> <div className="d-flex flex-column align-items-center">
<Link to="/login">
<button <button
type="button" type="button"
className="col-4 btn btn-info" className="row-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#loginModal"
> >
로그인 로그인
</button> </button>
<div </Link>
className="modal fade" <Link to="/signup">
id="loginModal"
tabIndex="-1"
aria-labelledby="loginModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<Login />
</div>
</div>
<button <button
type="button" type="button"
className="col-4 btn btn-info" className="row-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#signupModal"
> >
회원가입 회원가입
</button> </button>
</div> </Link>
<div
className="modal fade"
id="signupModal"
tabIndex="-1"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<SignUp />
</div>
</div> </div>
</div> </div>
); );
......
controllers/user.controller.js
View file @ 48ba15b7
...@@ -70,7 +70,7 @@ const login = async (req, res) => { ...@@ -70,7 +70,7 @@ const login = async (req, res) => {
const signup = async (req, res) => { const signup = async (req, res) => {
try { try {
// console.log('sign up= ', req.body) console.log('sign up= ', req.body)
const { name, email, password, gender, phone } = req.body const { name, email, password, gender, phone } = req.body
const id = Math.floor(Math.random() * (9999 - 1000) + 1000) const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
// console.log('id:', id) // console.log('id:', id)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment