Commit 440d957b authored by Spark's avatar Spark
Browse files

로그인 후에 지역정보 입력 페이지로 이동, 로컬 로그아웃 추가, 서버 리다이렉트 링크 수정

parent aa804067
import React, { useEffect } from 'react';
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
......@@ -8,20 +8,27 @@ import EditPage from './pages/EditPage';
import PrivateRoute from './utils/PrivateRoutes';
import PageNotFound from './components/PageNotFound';
import Footer from './components/Footer';
import { checkCookies } from './utils/CheckDB';
import GetLocFirst from './pages/GetLocFirst';
function App() {
useEffect(() => {
const isLs = localStorage.getItem('login')
function loginDefault() {
if (isLs === null) {
localStorage.setItem('login', false)
}, [checkCookies()])
}
}
return (
<Router>
{loginDefault()}
<Switch>
<Route exact path='/' component={Home} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
<Route path='/first-local-code' component={GetLocFirst} />
<PrivateRoute path='/edit'>
<EditPage />
......
import axios from 'axios';
import { callUserInfo, checkCookies } from './CheckDB';
export function haveLogined() {
callUserInfo().then((res) => {
if (res && checkCookies()) {
return true
}
else {
console.log('object')
console.log(res)
}
})
}
import Swal from 'sweetalert2';
export function isOauth(value) {
const TFoauth = value
......@@ -28,6 +16,24 @@ export function isLogined() {
}
}
export function logout() {
localStorage.setItem('login', false)
export async function localLogout() {
await axios.get('/api/logout')
.then(function () {
localStorage.clear();
Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
})
}
......@@ -4,7 +4,7 @@ import { Swal } from 'sweetalert2';
export async function callUserInfo() {
const res = await axios.get("/api/user-info")
return res.data.user_info
return res.data.contents.user_info
}
export function checkCookies() {
......
import axios from 'axios';
import Swal from 'sweetalert2'
import '../App.css'
......@@ -15,8 +16,6 @@ export function LoginWithKakao() {
success: function (authObj) {
console.log(JSON.stringify(authObj))
console.log('accT ;;', authObj.access_token)
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me',
......@@ -25,14 +24,16 @@ export function LoginWithKakao() {
property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: function (response) {
success: async function (response) {
console.log(response);
console.log(response.kakao_account.profile);
const nickValue = Object.values(response.kakao_account.profile)
localStorage.setItem('nickname', nickValue)
const nickname = localStorage.getItem('nickname')
console.log(nickname)
await axios.post('/api/edit-profile', {nick_name: nickValue})
.then((res) => console.log('kakao', res))
localStorage.setItem('login', true)
Swal.fire({
title: '로그인 성공!',
text: '🙌 환영합니다 🙌',
......@@ -41,10 +42,10 @@ export function LoginWithKakao() {
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/' + '?nickname=' + `${nickname}`)
// window.location.replace('/')
}
else {
window.location.replace('/' + '?nickname=' + `${nickname}`)
// window.location.replace('/')
}
})
}
......
......@@ -15,8 +15,6 @@ function EueSuggest() {
color: '#04AB70'
}
const airUsing = localStorage.getItem('using-aircondition')
return (
<Row className='text-center w-100 my-2'>
......
......@@ -84,7 +84,6 @@ function LocCodeChange() {
&& emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
const saveCodeEmd = emdSelect.value
console.log(saveCodeEmd)
await axios.post('/api/edit-profile', { loc_code: saveCodeEmd }) // loccal code 수정
......@@ -99,10 +98,10 @@ function LocCodeChange() {
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.reload()
window.location.replace('/')
}
else {
window.location.reload()
window.location.replace('/')
}
})
}
......
......@@ -5,7 +5,7 @@ import '../App.css'
import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth';
import UsingAircon from './UsingAircon';
import { isLogined } from '../utils/Auth';
import { isLogined, localLogout } from '../utils/Auth';
function MainLayer() {
......@@ -34,10 +34,7 @@ function MainLayer() {
color: 'white'
}
return (
<Col>
<Row className='d-flex align-items-center m-auto w-100 p-0'>
<Link to='/' className='p-0 m-auto'>
......@@ -49,16 +46,14 @@ function MainLayer() {
<UserInfo />
</Row>
{isLogined() &&
<UsingAircon/>
}
<UsingAircon />
<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' }}>
{isLogined() ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
<Button variant='light' style={btnstyled} onClick={localLogout}>
로그아웃
</Button>
:
......
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
import React, { useState } from 'react'
import { Row, Card, Form, Button, FloatingLabel } from 'react-bootstrap';
import Swal from 'sweetalert2';
function NicknameChange() {
......@@ -53,12 +53,10 @@ function NicknameChange() {
})
}
else {
console.log('ERROR')
console.log(response.data.msg);
}
})
}
// window.location.reload();
};
return (
......@@ -76,7 +74,7 @@ function NicknameChange() {
<Card.Text className='m-0'>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Nickname">
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required/>
<Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} required />
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
......
......@@ -5,26 +5,29 @@ import '../App.css'
function TimeNow() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderWidth: '3px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title style={{color:'black'}}>
<Card.Title>
<p>
현재시각
</p>
</Card.Title>
<Card.Text>
<Clock format={'Y년 M월 D일'} />
<br/>
<br />
<Clock format={'HH : mm : ss'} ticking={true} timezone={"KR"} />
</Card.Text>
</Card>
......
......@@ -2,15 +2,12 @@ import React, { useState, useEffect } from 'react'
import { Row, Card, Button, Col } from 'react-bootstrap';
import '../App.css'
import { Link } from 'react-router-dom';
import { callUserInfo, checkCookies } from '../utils/CheckDB';
import axios from 'axios';
import { callUserInfo } from '../utils/CheckDB';
import { isLogined } from '../utils/Auth';
function UserInfo() {
const islogin = localStorage.getItem('login')
const cardstyled = {
margin: 'auto',
padding: '1em 0.5em 1em 0.5em',
......@@ -48,52 +45,40 @@ function UserInfo() {
const day = now.getDate(); // 일
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
const endDate = new Date(year, month, day) // 현재 시간
const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
const btDay = btMs / (1000 * 60 * 60 * 24) // 초 -> 일
setCreatedTime(btDay)
}
else {
console.log('Not Logined')
}
})
}, [checkCookies()])
}, [])
const codeInit = {
code_doe: '',
code_sgg: '',
code_emd: ''
}
const [codeValue, setCodeValue] = useState(codeInit)
const [showState, setShowState] = useState('')
const [localState, setLocalState] = useState([])
useEffect(() => {
// user-info 에서 loc_code
callUserInfo().then((res) => {
if (isLogined()) {
console.log(res[0].loc_code)
const newCode = res[0].loc_code
const newdoe = String(newCode).substring(0, 2)
const newsgg = String(newCode).substring(0, 5)
const newemd = String(newCode).substring(0,)
async function CompareCode() {
await axios.get('/api/data/loccode').then((response) => {
console.log(response.data.contents.loc_code)
})
}
CompareCode()
const dbloc = res[0].loc_code
if (dbloc === null) {
setShowState('지역을 입력해주세요')
const localstyle = document.getElementById('local_state')
localstyle.style.display = 'none'
}
else {
console.log(res)
const localName = res[0].loc_name
setLocalState(localName)
}
}
})
}, [])
return (
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
......@@ -117,21 +102,27 @@ function UserInfo() {
<Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
<Card.Subtitle>
{isLogined() ?
<p className='mb-2'>
????????
{/*
{`${localname_doe}`}
<div className='mb-2'>
<div>
{showState}
</div>
<div id='local_state'>
{`${localState['doe']}`}
<br />
{`${localname_sgg}`}
{`${localState['sgg']}`}
<br />
{`${localname_emd}`} */}
</p>
{`${localState['emd']}`}
</div>
</div>
:
<p className='mb-2'>
<div className='mb-2'>
로그인 이용 가능합니다
</p>
</div>
}
</Card.Subtitle>
{isLogined() &&
<Button variant='light' className='m-auto d-flex' style={btnstyled2}>
<Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
......@@ -141,7 +132,6 @@ function UserInfo() {
}
</Row>
{isLogined() &&
<Card.Text>
<hr />
<Row style={{ color: 'black' }}>
......@@ -149,7 +139,7 @@ function UserInfo() {
환경을 향한 노력
</p>
<h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
{createdTime}일차
<strong>{createdTime}</strong>
</h3>
</Row>
......
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Form } from "react-bootstrap";
import { callUserInfo } from "../utils/CheckDB";
import { callUserInfo, checkCookies } from "../utils/CheckDB";
import { isLogined } from './../utils/Auth';
function UsingAircon() {
const [airUsing, setAirUsing] = useState(false)
useEffect(() => {
callUserInfo().then((res) => {
if (isLogined()) {
setAirUsing(res[0].using_aircon)
}
else {
console.log(res)
}
})
}, [])
// useEffect(() => {
// callUserInfo().then((res) => {
// if (isLogined()) {
// setAirUsing(res.using_aircon)
// }
// else {
// console.log(res)
// }
// })
// }, [checkCookies()])
async function airChange() {
function airChange() {
setAirUsing(!airUsing)
await axios.post('/api/edit-profile', { using_aircon: !airUsing })
.then(
callUserInfo().then((res) => {
if (isLogined()) {
console.log('using_aircon :', res[0].using_aircon)
}
else {
async function Useair() {
const res = await axios.post('/api/edit-profile', { using_aircon: !airUsing })
console.log(res)
}
})
)
.catch(function (error) {
console.log('err', error);
});
Useair()
}
console.log('airUsing', airUsing)
return (
<>
{isLogined() &&
<Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check
......@@ -48,6 +45,8 @@ function UsingAircon() {
checked={airUsing}
/>
</Form>
}
</>
)
}
......
import React, { useEffect, useState } from 'react'
import { Container, Row, Col, Modal } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css'
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation';
import LocCodeChange from '../components/LocCodeChange';
function GetLocFirst() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
useEffect(() => {
setTimeout(function () {
setShow(true)
}, 1500)
}, [])
const [show, setShow] = useState(false)
return (
<Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<TimeNow />
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Donation />
</Col>
<Modal
show={show}
backdrop="static"
style={{ marginTop: '10%' }}>
<Modal.Header className='d-flex justify-content-center top-10'>
<Modal.Title>EUE에 오신걸 환영합니다</Modal.Title>
</Modal.Header>
<Modal.Body className='d-flex justify-content-center top-10'>
<LocCodeChange />
</Modal.Body>
</Modal>
</Row>
</Row>
</Container>
);
}
export default GetLocFirst;
\ No newline at end of file
......@@ -43,7 +43,7 @@ function Home() {
</Col>
<Col md={6} style={col2sty}>
{/* <TimeNow /> */}
<TimeNow />
<EueSuggest />
<ChartLine />
<ChartDoughnut />
......
......@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LoginComp from '../components/LoginComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......
......@@ -3,7 +3,6 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import SignupComp from '../components/SignupComp';
import Footer from './../components/Footer';
function SignupPage() {
const constyled = {
......
......@@ -25,12 +25,9 @@ const postMail = async (email, token) => {
from: `EUE Auth Supply <${envs.api.nodemailer.user}>`,
to: email,
subject: "EUE 사용자 계정 확인용 메일.",
html: `<a href="${envs.server.protocol}://${envs.server.host}:${
envs.server.port
}${routes.base + routes.confirm}?token=${token}">${
envs.server.protocol
}://${envs.server.host}:${envs.server.port}${
routes.base + routes.confirm
html: `<a href="${envs.server.protocol}://${envs.server.host}:${envs.server.port
}${routes.base + routes.confirm}?token=${token}">${envs.server.protocol
}://${envs.server.host}:${envs.server.port}${routes.base + routes.confirm
}?token=${token}</a>`,
};
......@@ -127,10 +124,7 @@ export const postLogin = async (req, res) => {
// 로그아웃 요청 처리
export const getLogout = (req, res) => {
res.clearCookie("acs_token").redirect("/api");
// .redirect(
// `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
// );
res.clearCookie("acs_token")
};
// 메일로 보낸 토큰의 유효성 검사 및 access 토큰 발행 처리
......@@ -158,10 +152,10 @@ export const getConfirm = async (req, res) => {
subject: "userInfo",
});
res.cookie("acs_token", accessT).redirect("/api");
// .redirect(
// `${envs.client.protocol}://${envs.client.host}:${envs.client.port}`
// );
res.cookie("acs_token", accessT)
.redirect(
"http://localhost:3000/first-local-code"
);
} catch (err) {
res.json({ msg: resForm.msg.err, contents: { error: err } });
}
......@@ -244,7 +238,7 @@ export const postEditProfile = async (req, res) => {
let new_nick_name = nick_name ? nick_name : user.nick_name;
let new_loc_code = loc_code ? Number(loc_code) : Number(user.loc_code);
let new_using_aircon = using_aircon
? using_aircon === "true"
? using_aircon === 'true'
: user.using_aircon;
await db.User.update(
......
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