Commit 146d7798 authored by KangMin An's avatar KangMin An
Browse files

Merge branch 'who' into premaster

parents 358a25fe 8c1c74f5
...@@ -57,5 +57,6 @@ ...@@ -57,5 +57,6 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} },
"proxy": "http://localhost:4500"
} }
import React from 'react'
import { Swal } from 'sweetalert2';
export function checkCookies() {
const acctoken_cookies = document.cookie.split('=')[1];
return acctoken_cookies;
}
export function deleteCookie (name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
}
\ No newline at end of file
import React from 'react'; import React from 'react';
import { Redirect, Route } from 'react-router-dom'; import { Redirect, Route } from 'react-router-dom';
import { isLogined } from '../utils/Auth'; import { isLogined } from './Auth';
function PrivateRoute({ path, children }) { function PrivateRoute({ path, children }) {
if (isLogined()) { if (isLogined()) {
......
...@@ -2,6 +2,7 @@ import React, { useState } from 'react'; ...@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
function LoginComp() { function LoginComp() {
...@@ -53,9 +54,17 @@ function LoginComp() { ...@@ -53,9 +54,17 @@ function LoginComp() {
function handleChange(event) { function handleChange(event) {
setEmailAddress(event.target.value) setEmailAddress(event.target.value)
}
console.log(emailAddress) console.log(emailAddress)
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post("/api/login", { email: emailAddress })
console.log(res)
} }
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
...@@ -89,7 +98,7 @@ function LoginComp() { ...@@ -89,7 +98,7 @@ function LoginComp() {
} }
</Row> </Row>
<Form style={inboxstyled}> <Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel <FloatingLabel
controlId="floatingInput" controlId="floatingInput"
label="Email" label="Email"
...@@ -97,7 +106,7 @@ function LoginComp() { ...@@ -97,7 +106,7 @@ function LoginComp() {
<Form.Control type="email" placeholder="Email" onChange={handleChange} /> <Form.Control type="email" placeholder="Email" onChange={handleChange} />
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}> <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend} type='submit'>
LOGIN LOGIN
</Button> </Button>
</Form> </Form>
......
...@@ -5,6 +5,9 @@ import '../App.css' ...@@ -5,6 +5,9 @@ import '../App.css'
import UserInfo from './UserInfo'; import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth'; import { kakaoLogout } from '../utils/Oauth';
import axios from 'axios'; import axios from 'axios';
import { Swal } from 'sweetalert2';
import { deleteCookie } from '../utils/Cookies';
import { checkCookies } from './../utils/Cookies';
function MainLayer() { function MainLayer() {
...@@ -33,6 +36,7 @@ function MainLayer() { ...@@ -33,6 +36,7 @@ function MainLayer() {
color: 'white' color: 'white'
} }
const logined = localStorage.getItem('nickname') const logined = localStorage.getItem('nickname')
const [airUsing, setAirUsing] = useState(false) const [airUsing, setAirUsing] = useState(false)
...@@ -51,6 +55,9 @@ function MainLayer() { ...@@ -51,6 +55,9 @@ function MainLayer() {
} }
}); });
return ( return (
<Col> <Col>
<Row className='d-flex align-items-center m-auto w-100 p-0'> <Row className='d-flex align-items-center m-auto w-100 p-0'>
...@@ -63,7 +70,7 @@ function MainLayer() { ...@@ -63,7 +70,7 @@ function MainLayer() {
<UserInfo /> <UserInfo />
</Row> </Row>
{logined && {checkCookies() &&
<Form <Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}> key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check <Form.Check
...@@ -78,9 +85,9 @@ function MainLayer() { ...@@ -78,9 +85,9 @@ function MainLayer() {
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'> <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}> <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
{logined ? {checkCookies() ?
//true //true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}> <Button variant='light' style={btnstyled} onClick={kakaoLogout || deleteCookie('acs_token')}>
로그아웃 로그아웃
</Button> </Button>
: :
...@@ -91,7 +98,7 @@ function MainLayer() { ...@@ -91,7 +98,7 @@ function MainLayer() {
</Link> </Link>
</Button> </Button>
} }
{!logined && {!checkCookies() &&
<Button variant='light' style={btnstyled}> <Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'> <Link to='/signup' id='btnlink'>
회원가입 회원가입
......
...@@ -2,6 +2,7 @@ import React, { useState } from 'react' ...@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
function SignupComp() { function SignupComp() {
...@@ -28,7 +29,7 @@ function SignupComp() { ...@@ -28,7 +29,7 @@ function SignupComp() {
} }
const initValues = { const initValues = {
name: '', nick_name: '',
email: '' email: ''
} }
...@@ -43,55 +44,14 @@ function SignupComp() { ...@@ -43,55 +44,14 @@ function SignupComp() {
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
setFormValues({ ...formValues, [name]: value }) setFormValues({ ...formValues, [name]: value })
console.log('???', formValues)
}
function CheckUserExist() {
localStorage.setItem('signup_username', formValues.name)
localStorage.setItem('signup_email_Address', formValues.email)
const signUser = localStorage.getItem('signup_username')
const signEmail = localStorage.getItem('signup_email_Address').split('@')[1]
if (signEmail && signUser) {
setAlertShow(true)
setUserExist(!userExist)
}
else
if (!signEmail) {
setAlertShow(false)
// setUserExist(true)
}
}
function handleSubmit(event) {
const form = event.currentTarget;
console.log('formValues', formValues);
console.log('formValues.values', Object.values(formValues)[0].length);
// console.log(form)
// if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
// event.preventDefault();
// event.stopPropagation();
// }
console.log(validated)
setValidated(true);
// const form = event.current
// setFormError(validate(formValues))
// setIsSubmit(true)
} }
console.log('???', formValues)
function handleClickSubm() { async function handleSubmit(event) {
// setEmailSubm(true); event.preventDefault();
const subm = document.getElementById("subm-mailSent"); await axios.post("/api/signup", formValues)
subm.style.visibility = 'visible'
// const aftermail = document.getElementById('AftermailSent');
// aftermail.style.display = ''
} }
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
...@@ -129,14 +89,13 @@ function SignupComp() { ...@@ -129,14 +89,13 @@ function SignupComp() {
<Form style={inboxstyled} onSubmit={handleSubmit}> <Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel <FloatingLabel
controlId="floatingInput" controlId="floatingInput"
label="Name" label="Nickname"
className='mb-3' className='mb-3'
> >
<Form.Control <Form.Control
type="text" type="text"
name="name" name="nick_name"
placeholder="Name" placeholder="Nickname"
value={formValues.name}
onChange={handleChange} onChange={handleChange}
required required
/> />
...@@ -149,14 +108,13 @@ function SignupComp() { ...@@ -149,14 +108,13 @@ function SignupComp() {
type="email" type="email"
name="email" name="email"
placeholder="Email Address" placeholder="Email Address"
value={formValues.email}
onChange={handleChange} onChange={handleChange}
required required
/> />
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}> <Button variant='light' className='mt-3' id='formbtn' type='submit'>
{/* type="submit" */} {/* onClick={CheckUserExist} */}
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
......
...@@ -2,6 +2,7 @@ import React, { useState } from 'react' ...@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import { Row, Card, Button, Col, Modal } from 'react-bootstrap'; import { Row, Card, Button, Col, Modal } from 'react-bootstrap';
import '../App.css' import '../App.css'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { checkCookies } from './../utils/Cookies';
function UserInfo() { function UserInfo() {
...@@ -44,7 +45,7 @@ function UserInfo() { ...@@ -44,7 +45,7 @@ function UserInfo() {
<Card style={cardstyled} id='localName'> <Card style={cardstyled} id='localName'>
<Card.Title> <Card.Title>
<strong> <strong>
{nickname ? {checkCookies() ?
<h2> <h2>
{`${nickname}`} {`${nickname}`}
</h2> </h2>
...@@ -76,7 +77,7 @@ function UserInfo() { ...@@ -76,7 +77,7 @@ function UserInfo() {
</p> </p>
} }
</Card.Subtitle> </Card.Subtitle>
{nickname && {checkCookies() &&
<Button variant='light' className='m-auto d-flex' style={btnstyled2}> <Button variant='light' className='m-auto d-flex' style={btnstyled2}>
<Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}> <Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경 변경
...@@ -84,7 +85,7 @@ function UserInfo() { ...@@ -84,7 +85,7 @@ function UserInfo() {
</Button> </Button>
} }
</Row> </Row>
{nickname && {checkCookies() &&
<p className='w-100 justify-content-center m-auto'> <p className='w-100 justify-content-center m-auto'>
<hr /> <hr />
......
...@@ -32,9 +32,11 @@ function Home() { ...@@ -32,9 +32,11 @@ function Home() {
padding: '0' padding: '0'
} }
const getusername = axios.get(`/api/user`) async function test() {
console.log(getusername) const res = await axios.get("/api/user-info", { withCredentials: true })
console.log("@@@@", res)
}
test()
return ( return (
<Container className='m-auto d-flex position-relative' <Container className='m-auto d-flex position-relative'
......
...@@ -18,7 +18,9 @@ const app = express(); ...@@ -18,7 +18,9 @@ const app = express();
app.set("view engine", "pug"); app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views")); app.set("views", path.join(__dirname, "views"));
app.use(cors()); app.use(cors({
credentials: true
}));
app.use(helmet()); app.use(helmet());
app.use(cookieParser()); app.use(cookieParser());
app.use(express.json()); app.use(express.json());
......
...@@ -148,7 +148,7 @@ export const getConfirm = async (req, res) => { ...@@ -148,7 +148,7 @@ export const getConfirm = async (req, res) => {
res res
.status(server_status.code.ok) .status(server_status.code.ok)
.cookie("acs_token", accessT) .cookie("acs_token", accessT)
.redirect("/api"); .redirect("http://localhost:3000/");
} catch (err) { } catch (err) {
res res
.status(server_status.code.err) .status(server_status.code.err)
......
...@@ -20,6 +20,8 @@ export const onlyPrivate = (req, res, next) => { ...@@ -20,6 +20,8 @@ export const onlyPrivate = (req, res, next) => {
cookies: { acs_token }, cookies: { acs_token },
} = req; } = req;
console.log('@@@@@@@@@@@@@@',req.cookies);
try { try {
const acs_decode = jwt.verify(acs_token, envs.secretKey.access_token); const acs_decode = jwt.verify(acs_token, envs.secretKey.access_token);
next(); next();
......
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