김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
ec55db15 1 parent a9257fba

Session 로그인

Inline Side-by-side
Showing 8 changed files with 105 additions and 39 deletions
......@@ -2,17 +2,20 @@
----------
Sharing your TODO-LIST with others!<br>
Do-gether은 투두리스트를 다른사람들과 공유할 수 있도록 도와주는 동기부여 서비스입니다.
<br><br>
## HOW TO USE
----------------
----------
You can come here and use DO-GETHER.<br>
[`http://wwww.dogether.tk`](http://wwww.dogether.tk)
![main](/uploads/0b44105f829a49b4211d4e6adc9d2c33/main.png)
![main](/uploads/9dce27e61dc8a02f8fe0ab37dfaf4df5/main.png)
<br><br>
## HOW TO INSTALL
-------------
---------
### First, clone this project
`git clone http://khuhub.khu.ac.kr/2019102153/Do-gether.git`
<br><br>
and execute this command.
```sh
......@@ -20,27 +23,29 @@ npm install
cd client
npm install
```
<br><br>
### Second, install yarn.
On Debian or Ubuntu Linux, you can install Yarn via our Debian package repository.
### Second, install YARN.
On Debian or Ubuntu Linux, you can install Yarn via our Debian package repository.
<br><br>
You will first need to configure the repository:
```sh
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```
<br><br>
On Ubuntu 16.04 or below and Debian Stable,<br>
you will also need to configure the NodeSource repository to get a new enough version of Node.js.
<br><br>
Then you can simply:
`sudo apt update && sudo apt install yarn`
`sudo apt update && sudo apt install yarn`<br><br>
Reference from [`YARN`](https://yarnpkg.com/en/docs/install)
<br><br>
### Third, add [database.json]
### Third, add "database.json"
you should add `database.json` in the following format.
```sh
{
......@@ -51,22 +56,28 @@ you should add `database.json` in the following format.
"database":"table name"
}
```
<br><br>
### Finally, you can use DOGETHER by using `yarn dev` in `Do-gether` directory.
<br><br>
### Error
----------
--------
In my case, an unknown error occurred when running `yarn dev`.<br>
So I solved it as follows.
<br><br>
Execute this command.
`vi Do-gether/client/node_modules/react-scripts/config/webpackDevServer.config.js`
<br><br>
And change the `disableHostCheck: ...` option to `disableHostCheck: true`.
![error](/uploads/be3c1c269c2ee157825f6d9e143706fc/error.png)
<br><br>
## Presentation File
You can check my presentation here.
[2019102153_김대휘.pptx](/uploads/ec22aec2c186128329918ec641a54f73/2019102153_김대휘.pptx)
<br><br>
## LISENCE
---------
-------
Do-gether is free software, and may be redistributed under the terms specified in the [MIT LICENSE](http://khuhub.khu.ac.kr/2019102153/Do-gether/blob/master/LICENSE.txt) file.
\ No newline at end of file
......
......@@ -57,7 +57,6 @@ export default function BodyLayout() {
callApi()
.then((res) => {
setData(res);
console.log(res);
setIsLoading(0);
})
.catch((err) => console.log(err));
......@@ -76,7 +75,7 @@ export default function BodyLayout() {
const isMine = card.name === localStorage["userName"]; //remove item
if (idx === 0 || card.date !== data[idx - 1].date) {
showDate = (
<Typography variant="h4" className={classes.date}>
<Typography key={idx} variant="h4" className={classes.date}>
{card.date}
</Typography>
);
......@@ -90,9 +89,9 @@ export default function BodyLayout() {
return (
<>
{showDate}
<Grid item xs={12} sm={6} md={3}>
<Grid item xs={12} sm={6} md={3} key={idx+1}>
<TodoCard
key={card.id}
key={idx}
data={card}
isVisible={isVisible}
isMine={isMine}
......@@ -105,7 +104,7 @@ export default function BodyLayout() {
}
})}
</Grid>
<AddButton></AddButton>
<AddButton key="addBtn"></AddButton>
</Container>
</div>
);
......
......@@ -24,6 +24,19 @@ const useStyles = makeStyles((theme) => ({
export default function ButtonAppBar() {
const classes = useStyles();
const handleLogout = ()=>{
fetch("/auth/logout",{
method: "GET",
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
localStorage.removeItem("userName");
alert("Sucessfully logout!");
window.location.href = "/";
}
return (
<div className={classes.root}>
<AppBar className={classes.bar} position="fixed">
......@@ -31,7 +44,7 @@ export default function ButtonAppBar() {
<Typography variant="h6" className={classes.title}>
Do-gether
</Typography>
<Button color="inherit" className={classes.logout}>Logout</Button>
<Button color="inherit" className={classes.logout} onClick={handleLogout}>Logout</Button>
</Toolbar>
</AppBar>
</div>
......
......@@ -33,7 +33,6 @@ const useStyles = makeStyles({
export default function TodoCard({ data, isMine }) {
const classes = useStyles();
const [open, setOpen] = useState(false);
const [render, setRender] = useState(0);
const todo = data.todo.split(",").map((text) => {
return text;
......@@ -49,8 +48,7 @@ export default function TodoCard({ data, isMine }) {
let tempArr = checkState;
tempArr[idx] = tempArr[idx] ? 0 : 1;
setCheckState(tempArr);
data.ck=tempArr.join(",");
console.log(data);
data.ck = tempArr.join(",");
setRender([]);
modifyApi({
isPublic: data.isPublic,
......@@ -96,9 +94,10 @@ export default function TodoCard({ data, isMine }) {
{todo.map((item, idx) => {
return (
<FormControlLabel
key={idx}
className={classes.checkBox}
control={<Checkbox onClick={(e) => handleCheck(idx)} />}
checked={checkState[idx]}
checked={Boolean(checkState[idx])}
label={item}
/>
);
......
......@@ -62,7 +62,7 @@ export default function LandingPage(props) {
const [userPW, setUserPW] = useState();
const loginApi = (data) => {
return fetch("/api/login", {
return fetch("/auth/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
......@@ -88,8 +88,6 @@ export default function LandingPage(props) {
userID: userID,
userPW: userPW,
});
alert("Successfully login!");
props.history.push("/login");
}
};
......
import React from "react";
import React, { useEffect } from "react";
import NavBar from "../components/NavBar.js";
import BodyLayout from "../components/BodyLayout.js";
function App() {
const checkLogin = async () => {
const response = await fetch("/auth",{
method: "GET",
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
const body = await response.json();
return body;
};
useEffect(() => {
checkLogin().then((res) => {
if(res.message!=="Authenticated user"){
alert("Please login!");
window.location.href="/login";
}
});
});
return (
<>
<NavBar />
<BodyLayout />
<BodyLayout key="body"/>
</>
);
}
......
......@@ -16,8 +16,6 @@
},
"devDependencies": {
"concurrently": "^4.0.1"
},
"proxy": "http://localhost:3000/",
},
"license": "UNLICENSED"
}
......
......@@ -29,11 +29,15 @@ app.use(
secret: "asdjha!@#@#$dd",
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 1000 * 60 * 60 // 쿠키 유효기간 24시간
}
})
);
app.get("/api/cards", (req, res) => {
connection.query("SELECT * FROM CARDINFO", (err, rows, fields) => {
// console.log(rows);
res.send(rows);
});
});
......@@ -127,7 +131,7 @@ app.post("/api/signup", async (req, res) => {
});
});
app.post("/api/login", (req, res) => {
app.post("/auth/login", (req, res) => {
const data = req.body;
const enteredID = data.userID;
const enteredPW = data.userPW;
......@@ -136,19 +140,16 @@ app.post("/api/login", (req, res) => {
[enteredID],
function (error, results, fields) {
if (error) {
// console.log("error ocurred", error);
res.send({
code: 400,
message: "error ocurred",
});
} else {
// console.log('The solution is: ', results);
if (results.length > 0) {
bcrypt.compare(enteredPW, results[0].userPW, function (err, check) {
console.log(check);
if (check) {
req.session.userName = results[0].userName;
console.log(req.session.userName);
console.log(req.session.userName + "is login");
res.send({
code: 200,
message: "login sucessfull",
......@@ -171,4 +172,29 @@ app.post("/api/login", (req, res) => {
}
);
});
app.get("/auth/logout", async (req,res,next) => {
console.log(req.session.userName+ "is logout");
req.session.destroy();
res.clearCookie('sid');
res.redirect("/");
})
app.get("/auth", (req,res) =>{
try{
if(req.session.userName){
res.send({
message: "Authenticated user"
})
}else{
console.log("Unauthorized access")
res.send({
message: "Unauthenticated user"
})
}
}catch(e){
console.log(e);
}
})
app.listen(port, () => console.log(`Listening on port ${port}`));
......