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

회원가입 로그인

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