Skip to content

GitLab

Commit 00e7f876 authored by 우지원's avatar 우지원
Browse files

01_06

parent f6928d0a
Hide whitespace changes
Inline Side-by-side
client/src/Hello.js
View file @ 00e7f876
import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
import { Button, Navbar, Nav } from 'react-bootstrap';
import React from 'react'
const userName = "정연우";
......
client/src/Pages/LogInPage.js
View file @ 00e7f876
import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { Button, Form, Container, Navbar, Spinner, Alert } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors'
import { Link, Redirect } from 'react-router-dom'
import { handleLogin } from '../utils/auth'
const INIT_USER = {
email: '',
password: '',
}
function LogIn() {
const [validated, setValidated] = useState(false);
const [user, setUser] = useState(INIT_USER)
//로딩, 에러, diserved 상태 넣어야됨.
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSucces] = useState(false)
const [loading, setLoading] = useState(false)
useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el))
//Boolean : 참거짓 판별
//every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
//empty string때만 false로 나옴.
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
function handleChange(event) {
const { name, value } = event.target
// console.log(name, value)
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault()
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
try {
setLoading(true)
setError('')
await axios.post('/auth/login', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음.
handleLogin()
setSucces(true)
} catch (error) {
catchErrors(error, setError)
//setError(error.response.data)
//error객체가 들어감.
} finally {
setLoading(false)
}
//server쪽에서 json형식으로 보낼것임
}
//success시 링크이동
if (success) {
console.log('success', success)
return <Redirect to='/' />
}
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
{/* <Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar> */}
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form noValidate validated={validated} onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
......@@ -32,6 +83,9 @@ function LogIn() {
<Form.Control
required
type="email"
name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
......@@ -43,19 +97,31 @@ function LogIn() {
<Form.Control
required
type="password"
name="password"
onChange={handleChange}
value={user.password}
placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Link to="./home">
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button>
</Link>
<Button
disabled={disabled || loading}
type="submit"
variant="outline-success"
size="lg"
className="mr-4"
block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인
</Button>
<Link to="./signup">
<h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
</Link>
{error && <Alert variant='danger'>
{error}
</Alert>}
</div>
</Container>
</Form>
......
client/src/Pages/ProfilePage.js
View file @ 00e7f876
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Menu from '../Components/Menu';
import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
import { Image, Button, Container, Form } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
import userdefault from './KakaoTalk_20201230_153151693.png'
......
client/src/Pages/SignUpPage.js
View file @ 00e7f876
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { Button, Form, Container, Navbar, Alert } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import catchErrors from '../utils/catchErrors';
//import { Redirect } from 'react-router-dom';
const INIT_USER = {
username: '',
......@@ -32,6 +34,7 @@ function SingUp() {
async function handleSubmit(event) {
event.preventDefault();
//빈문자열 입력 시 오류 문자 출력
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
......@@ -42,108 +45,114 @@ function SingUp() {
try {
setError('')
const response = await fetch('/api/users/signup', {
//post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
const data = await response.json()
console.log(data)
// const response = await fetch('/api/users/signup', {
// //post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(user)
// })
// const data = await response.json()
await axios.post('/users/signup', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음.
// console.log(response.data)
console.log(user)
// setUser(INIT_USER)
} catch (error) {
console.log(error)
setError('오류가 발생했습니다!')
catchErrors(error, setError)
}
}
// if (success) {
// console.log('success', success)
// return <Redirect to='/login'/>
// }
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<div>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">회원가입</h2>
<Form.Group controlId="formGroupUsername">
<Form.Label>이름</Form.Label>
<Form.Control
required
type="text"
name="username"
onChange={handleChange}
value={user.username}
placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요!
{/* <Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar> */}
<Form noValidate validated={validated} onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">회원가입</h2>
<Form.Group controlId="formGroupUsername">
<Form.Label>이름</Form.Label>
<Form.Control
required
type="text"
name="username"
onChange={handleChange}
value={user.username}
placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupNickname">
<Form.Label>별명</Form.Label>
<Form.Control
required
type="text"
name="nickname"
onChange={handleChange}
value={user.nickname}
placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요!
</Form.Group>
<Form.Group controlId="formGroupNickname">
<Form.Label>별명</Form.Label>
<Form.Control
required
type="text"
name="nickname"
onChange={handleChange}
value={user.nickname}
placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="email"
name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
</Form.Group>
<Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label>
<Form.Control
required
type="email"
name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="password"
name="password"
onChange={handleChange}
value={user.password}
placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label>
<Form.Control
required
type="password"
name="password"
onChange={handleChange}
value={user.password}
placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback>
</Form.Group>
{/* <Link to="./login"> */}
<Button
disabled={disabled}
type='submit'
variant="outline-success"
size="lg"
className="mr-4"
block>가입</Button>
{/* </Link> */}
{error && <Alert variant='danger'>
{error}
</Alert>}
</div>
</Container>
</Form>
</div >
</Form.Group>
<Button
disabled={disabled}
type='submit'
variant="outline-success"
size="lg"
className="mr-4"
block>가입</Button>
{error && <Alert variant='danger'>
{error}
</Alert>}
</div>
</Container>
</Form>
</>
)
}
......
client/src/utils/auth.js 0 → 100644
View file @ 00e7f876
import axios from "axios"
//자동으로 localstorage에 login이 생성됨
export function handleLogin() {
localStorage.setItem('loginStatus', 'true')
}
export async function handleLogout() {
localStorage.removeItem('loginStatus')
await axios.get('/api/auth/logout')
}
\ No newline at end of file
client/src/utils/catchErrors.js 0 → 100644
View file @ 00e7f876
function catchErrors(error, displayError) {
let errorMsg
if (error.response) {
errorMsg = error.response.data
console.log(errorMsg)
} else if (error.request) {
errorMsg = error.request
console.log(errorMsg)
} else {
errorMsg = error.message
console.log(errorMsg)
}
displayError(errorMsg)
}
export default catchErrors
\ No newline at end of file
package.json
View file @ 00e7f876
......@@ -6,7 +6,7 @@
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "nodemon server/server.js"
"dev": "nodemon server/server.js"
},
"repository": {
"type": "git",
......@@ -16,7 +16,10 @@
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.9",
"nodemon": "^2.0.6",
"validator": "^13.5.2"
......
server/config.js
View file @ 00e7f876
......@@ -2,7 +2,9 @@ const config = {
env: process.env.NODE_ENV || 'development',
port: process.env.PORT || 3030,
jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger'
mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger',
cookieMaxAge: 60 * 60 * 24 * 7 * 1000
//1000이 1초 이므로 7일
}
export default config
\ No newline at end of file
server/controllers/auth.controller.js 0 → 100644
View file @ 00e7f876
import User from "../models/User.js"
import bcrypt from 'bcryptjs'
import jwt from 'jsonwebtoken'
import config from "../config.js"
//꼭 js붙여주기!!
//isEmail
//sign validation해야됨
const login = async (req, res) => {
const { email, password } = req.body
//req.body를 구조분해하여 각각 보이게함 -> 모든정보들이 한줄에 보임
console.log(email, password)
try {
// 1) 사용자 확인
const user = await User.findOne({ email }).select('+password')
// 2) 이메일 사용자가 없으면 에러 반환
if (!user) {
return res.status(404).send(`${email}이 없습니다`)
}
// 3) 비밀번호 일치 확인
const passwordMatch = await bcrypt.compare(password, user.password)
// 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장
if (passwordMatch) {
//토큰 생성
const token = jwt.sign({ userId: user._id }, config.jwtSecret, {
//jwtSecret : 노출되면 안됨. 문자열
expiresIn: '7d'
//만기날짜 : 만든 7일후 만기
})
//쿠키에 저장
//res : client로 넘어가는 객체 cookie('이름', value)
res.cookie('token', token, {
maxAge: config.cookieMaxAge,
//생성일로부터 어느정도까지 살아있을 것인가
httpOnly: true,
//client에서 javascript로 접근할 수 없음
secure: config.env === 'production'
//secure가 true이면 http로 접근하면 cookie가 들어가지 않음.
})
res.send('Login Successful')
} else {
// 5) 비밀번호가 틀리면 에러 반환
res.status(401).send('비밀번호가 일치하지 않습니다')
}
} catch (error) {
//알수없는 모든 에러발생시 처리
console.log(error)
res.status(500).send('로그인 에러')
}
}
const logout = (req, res) => {
res.clearCookie('token')
res.send('Logout Successful')
}
export default { login, logout }
// {} : 객체로 return함
server/controllers/user.controller.js
View file @ 00e7f876
import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js'
//import isEmail from 'validator/lib/isEmail.js'
import isEmail from 'validator/lib/isEmail.js'
import bcrypt from 'bcryptjs'
//꼭 js붙여주기!!
//sign validation해야됨
......@@ -11,23 +12,38 @@ const signup = async (req, res) => {
console.log(username, nickname, email, password)
try {
if (!isLength(username, { min: 3, max: 10 })) {
if (!isLength(username, {min: 3, max: 10})){
//이범위를 벗어나면 error발생
return res.status(422).json({message: 'Name must be 3-10 characters'})
return res.status(422).send('이름은 3-10자 사이입니다')
//422 : 형식이 잘못되었다는 error발생
} else if (!isLength(nickname, {min: 2, max: 10})) {
return res.status(422).send('별명은 2-10자 사이입니다.')
} else if (!isLength(password, {min: 6})) {
return res.status(422).send('비밀번호는 6자 이상입니다.')
} else if (!isEmail(email)) {
return res.status(422).send('유효하지 않은 이메일 형식입니다')
}
else if (!isLength(nickname, { min: 3, max: 10 })) {
return res.status(422).send('Nickname must be 3-10 characters')
} else if (!isEmail(email, {
allow_display_name: true,
require_display_name: true,
allow_utf8_local_part: false,
})) {
return res.status(422).send('Email does not fit the format')
} else if (!isLength(password, { min: 6, max: 25 })) {
return res.status(422).send('Nickname must be 6-25 characters')
// else if (!isLength(nickname, { min: 3, max: 10 })) {
// return res.status(422).send('Nickname must be 3-10 characters')
// } else if (!isEmail(email, {
// allow_display_name: true,
// require_display_name: true,
// allow_utf8_local_part: false,
// })) {
// return res.status(422).send('Email does not fit the format')
// } else if (!isLength(password, { min: 6, max: 25 })) {
// return res.status(422).send('Nickname must be 6-25 characters')
// }
// 기존의 email이 있으면 나오는 error (unique)
const user = await User.findOne({email})
if(user) {
return res.status(422).send(`${email}이 이미 사용중입니다.`)
}
const hash = await bcrypt.hash(password, 10)
//promise이므로 await사용함
const newUser = await new User({
username,
nickname,
......
server/routes/auth.routes.js 0 → 100644
View file @ 00e7f876
import express from 'express'
import authCtrl from '../controllers/auth.controller.js'
const router = express.Router()
//router의 역할 : './주소'부분을 처리하는 역할함.
router.route('/auth/login')
.post(authCtrl.login)
router.route('/auth/logout')
.get(authCtrl.logout)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export default router
\ No newline at end of file
server/routes/user.routes.js
View file @ 00e7f876
......@@ -4,7 +4,7 @@ import userCtrl from '../controllers/user.controller.js'
const router = express.Router()
//router의 역할 : './주소'부분을 처리하는 역할함.
router.route('/api/users/signup')
router.route('/users/signup')
.post(userCtrl.signup)
.get(userCtrl.hello)
......
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