Save sessions with express-session

FetchCV · Jul 14, 2024 · 79c1475 · 79c1475
1 parent 0c539e0
commit 79c1475
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 15 deletions.
diff --git a/app.js b/app.js
@@ -1,6 +1,7 @@
 const express = require("express");
 const axios = require("axios");
 const mongoose = require("mongoose");
+const session = require("express-session");
 
 const app = express();
 require("dotenv").config();
@@ -21,6 +22,18 @@ app.use(express.static("public"));
 app.set("view engine", "ejs");
 app.set("views", __dirname + "/public");
 
+app.use(
+   session({
+      secret: process.env.SESSION_SECRET,
+      resave: false,
+      saveUninitialized: true,
+      cookie: {
+         secure: false, // This will only work if you have https enabled!
+         maxAge: 60000, // 1 min
+      },
+   }),
+);
+
 // Define routes and middleware here
 app.get("/", (req, res) => {
    res.sendFile(__dirname + "/public/index.html");
@@ -36,10 +49,7 @@ app.get("/token/:service", (req, res) => {
 });
 
 // GitHub OAuth
-const clientID = process.env.GITHUB_CLIENT_ID;
-const clientSecret = process.env.GITHUB_CLIENT_SECRET;
 let github_access_token = "not logged in";
-let github_user_data = {};
 
 function loggedIn() {
    if (github_access_token === "not logged in") {
@@ -48,8 +58,15 @@ function loggedIn() {
    return true;
 }
 
+app.get("/profile", (req, res) => {
+   if (!req.session.user) {
+      return res.send("log in");
+   }
+   return res.render("pages/profile", { userData: req.session.user });
+});
+
 app.get("/gh", (req, res) => {
-   res.render("pages/index", { client_id: clientID });
+   res.render("pages/index", { client_id: process.env.GITHUB_CLIENT_ID });
 });
 
 // Callback
@@ -59,7 +76,7 @@ app.get("/auth/github", (req, res) => {
 
    axios({
       method: "post",
-      url: `https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${requestToken}`,
+      url: `https://github.com/login/oauth/access_token?client_id=${process.env.GITHUB_CLIENT_ID}&client_secret=${process.env.GITHUB_CLIENT_SECRET}&code=${requestToken}`,
       // Set the content type header, so that we get the response in JSON
       headers: {
          accept: "application/json",
@@ -78,22 +95,22 @@ app.get("/github/login", function (req, res) {
          Authorization: "token " + github_access_token,
       },
    }).then((response) => {
-      github_user_data = response.data;
-      githubOAuthLogin(res);
+      req.session.user = response.data;
+      githubOAuthLogin(req, res);
    });
 });
 
-async function githubOAuthLogin(res) {
-   let isAccount = await githubOAuthUserExists(github_user_data.id);
-   if (isAccount) res.render("pages/success", { userData: github_user_data });
-   else createGithubOAuthUser(github_user_data.id, res);
+async function githubOAuthLogin(req, res) {
+   let isAccount = await githubOAuthUserExists(req.session.user.id);
+   if (isAccount) res.render("pages/profile", { userData: req.session.user });
+   else createGithubOAuthUser(req.session.user.id, req, res);
 }
 
-function createGithubOAuthUser(githubId, res) {
+function createGithubOAuthUser(githubId, req, res) {
    const user = new User({ githubId: githubId });
    user.save().then((result) => {
       console.log("id is " + result.id);
-      res.render("pages/new-user", { userData: github_user_data });
+      res.render("pages/new-user", { userData: req.session.user });
    });
 }
 

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "dotenv": "^16.4.5",
     "ejs": "^3.1.10",
     "express": "^4.18.2",
+    "express-session": "^1.18.0",
     "mongoose": "^8.5.1",
     "node": "^21.6.2",
     "tailwind": "^4.0.0"

diff --git a/public/index.html b/public/index.html
@@ -49,11 +49,19 @@ <h4 class="text-zinc-500 dark:text-zinc-300">
                 </div>
             </div>
             <br />
-            <!-- Profile Link -->
+            <!-- Get started -->
             <div class="block text-center">
                 <h2 class="text-2xl p-4 font-semibold text-zinc-900 dark:text-zinc-200">Get started!</h2>
+                <!-- GitHub username profile -->
                 <a href="profile.html">
-                    <div class="inline-flex justify-center transition-all p-2 shadow-lg bg-zinc-200 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md dark:text-white">
+                    <div class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-200 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md dark:text-white">
+                        <span class="material-symbols-rounded text-public mr-2">search</span>
+                        <p>GitHub username search</p>
+                    </div>
+                </a>
+                <!-- Profile Link -->
+                <a href="/gh">
+                    <div class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-200 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md dark:text-white">
                         <span class="material-symbols-rounded text-public mr-2">account_circle</span>
                         <p>My Profile</p>
                     </div>

diff --git a/public/pages/profile.ejs b/public/pages/profile.ejs
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <link rel="stylesheet" type="text/css" href="../styles/styles.css">
+   <link rel="stylesheet" href="../styles/profile-styles.css">
+   <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+   <link rel="icon" type="images/svg" href="images/logo.svg">
+   <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+
+   <title>My Profile | FetchCV</title>
+</head>
+
+<body class="px-8 flex justify-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
+   <div class="mb-20">
+      <!-- top bar -->
+      <div class="flex my-2">
+         <a href="index.html">
+            <div
+               class="inline-flex justify-center transition-all p-2 mr-2 shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md dark:text-white">
+               <span class="material-symbols-rounded text-public">home</span>
+            </div>
+         </a>
+         <!-- User search (will be replaced when accounts are added) -->
+         <strong>Name</strong>: <%= userData.name %><br>
+         <strong>Username</strong>: <%= userData.login %><br>
+           <strong>Company</strong>: <%= userData.company %><br>
+           <strong>Bio</strong>: <%= userData.bio %>      </div>
+      <!-- Error box - hidden by default -->
+      <div
+         class="error-box shadow-2xl py-4 px-8 my-2 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden bg-blue-800 bg-red-800 bg-green-800">
+         <h1 class="error-title text-2xl font-mono">Oh no! Token retriavl error</h1>
+         <h1 class="error-text font-mono">We could not fetch your data</h1>
+      </div>
+
+
+      <!-- this should be working -->
+      <div id="root"></div>
+
+
+      <!-- Profile Card -->
+      <div
+         class="shadow-2xl py-4 px-8 my-2 bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden user-info">
+         <div class="grid gap-6" style="grid-template-columns: 300px auto;">
+            <img
+               class="profile-picture w-[300px] shadow-2xl border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-full"
+               alt="Profile Picture">
+            <div class="max-w-[45vw]">
+               <h1 class="profile-name text-3xl font-bold">Name</h1>
+               <h1 class="profile-handle text-xl dark:text-zinc-600 font-bold">handle</h1>
+               <div class="profile-langs py-2 align-top"></div>
+               <p class="profile-desc text-lg"></p>
+               <br>
+               <hr>
+               <br>
+               <div>
+                  <p><span class="profile-repos"></span> repositories</p>
+               </div>
+               <br>
+               <hr>
+               <br>
+               <p><span class="profile-followers"></span> followers</p>
+               <p><span class="profile-following"></span> following</p>
+               <p><span class="profile-stars"></span> stars</p>
+               <p>location: <span class="profile-location"></span></p>
+               <p class="profile-email">Email</p>
+               <a class="profile-website text-theme underline">Website (ur/)</a><br>
+               <a class="profile-github text-theme underline">Github</a><br>
+               <br>
+               <div class="github-stats"></div>
+            </div>
+         </div>
+      </div>
+      <!-- Branding -->
+      <div
+         class="flex w-full py-4 justify-center items-center shadow-lg dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
+         <p>Created with <code class="text-theme">FetchCV</code></p>
+
+      </div>
+   </div>
+   <!-- future settings panel (for use with customizing profile card and accessing account settings) -->
+   <div class="flex fixed bottom-0 w-screen px-0 py-1 bg-zinc-700 border-[1px] border-zinc-700 border-t-zinc-600">
+      <div class="absolute bottom-0 -z-10 -left-40 w-[140%] h-full caution-tape"></div>
+      <a href="">
+         <div
+            class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-800 border-[1px] border-zinc-700 border-t-zinc-600 rounded-md text-black">
+            <span class="material-symbols-rounded text-private">settings</span>
+         </div>
+      </a>
+   </div>
+</body>
+<style>
+   p {
+      max-width: 700px;
+   }
+</style>
+
+<script src="../scripts/main.js"></script>
+<script src="../scripts/github.js"></script>
+<script src="../scripts/gitlab.js"></script>
+
+</html>
diff --git a/public/styles/styles.css b/public/styles/styles.css
@@ -597,6 +597,16 @@ video {
   margin-bottom: auto;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }