Session 로그인

@@ -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.
+### 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"/>
     </>
   );
 }

@@ -17,7 +17,5 @@
   "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}`));