Logging in and staying logged in

Soulmate-Lights · Jun 3, 2020 · b739139 · b739139
1 parent 775ca57
commit b739139
Show file tree

Hide file tree

Showing 6 changed files with 477 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "electron-auth0-login": "^1.3.0",
     "electron-is-dev": "^1.2.0",
     "electron-prompt": "^1.5.1",
+    "electron-rebuild": "^1.11.0",
     "history": "^4.10.1",
     "jwt-decode": "^2.2.0",
+    "keytar": "^5.0.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": ">=15",

diff --git a/src/auth.js b/src/auth.js
@@ -5,7 +5,9 @@ const auth = new ElectronAuth0Login({
   auth0Audience: "https://yellow-boat-0900.auth0.com/api/v2/",
   auth0ClientId: "OsKmsunrgzhFv2znzUHpd9JsFSsOl46o",
   auth0Domain: "yellow-boat-0900.auth0.com",
-  auth0Scopes: "openid profile",
+  auth0Scopes: "openid profile offline_access",
+  applicationName: "soulmate",
+  useRefreshTokens: true, // add useRefreshTokens: true
 });
 
 module.exports = auth;
diff --git a/src/simulator/List.css b/src/simulator/List.css
@@ -11,6 +11,16 @@
 .sketches {
   overflow: auto;
   flex-shrink: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.sketches .loader {
+  align-self: center;
+  width: 50px;
+  height: 50px;
+  margin: 50px auto;
+  flex-shrink: 0;
 }
 
 .dark .list {
@@ -173,6 +183,10 @@
   position: relative;
 }
 
+.dark .user a {
+  color: white;
+}
+
 .user img {
   width: 24px;
   height: 24px;

diff --git a/src/simulator/List.js b/src/simulator/List.js
@@ -9,6 +9,7 @@ import { Link } from "react-router-dom";
 import "./List.css";
 import { AiOutlinePlusCircle } from "react-icons/ai";
 import { useAuth0 } from "../react-auth0-spa";
+import Logo from "./logo.svg";
 
 export default ({
   sketches,
@@ -26,7 +27,9 @@ export default ({
     <div className="list">
       <p className="heading">Sketches</p>
       <div className="sketches">
-        {sketches.map((sketch) => {
+        {!sketches && <Logo className="loader" />}
+
+        {sketches?.map((sketch) => {
           const selected = sketch.id === selectedSketch.id;
           const name = sketch.name || "Untitled";
           return (
@@ -35,9 +38,11 @@ export default ({
               key={sketch.id}
               className={`sketch ${selected && "selected"}`}
             >
-              {/* <div className="video-wrapper">
-            <video src={sketch.video_url} autoPlay muted loop></video>
-          </div> */}
+              {/*
+                <div className="video-wrapper">
+                  <video src={sketch.video_url} autoPlay muted loop></video>
+                </div>
+              */}
               {name.slice(0, 20)}
               {userDetails && (
                 <RiDeleteBin2Line
@@ -50,34 +55,36 @@ export default ({
         })}
       </div>
 
-      {userDetails && (
+      {userDetails && sketches && (
         <div className="new button" onClick={add}>
           <AiOutlinePlusCircle />
           New sketch
         </div>
       )}
 
-      {soulmates.length > 0 && (
-        <div className="soulmates">
-          <p className="heading">Soulmates</p>
+      <div className="soulmates">
+        {soulmates.length > 0 && (
+          <>
+            <p className="heading">Soulmates</p>
 
-          {soulmates.map((s) => {
-            const connected = s === soulmate;
-            return (
-              <div
-                className={`device ${connected ? "connected" : ""}`}
-                key={s.name}
-                onClick={() => {
-                  setSoulmate(connected ? false : s);
-                }}
-              >
-                {s === soulmate ? <FiCheckCircle /> : <FiCircle />}
-                {s.name}
-              </div>
-            );
-          })}
-        </div>
-      )}
+            {soulmates.map((s) => {
+              const connected = s === soulmate;
+              return (
+                <div
+                  className={`device ${connected ? "connected" : ""}`}
+                  key={s.name}
+                  onClick={() => {
+                    setSoulmate(connected ? false : s);
+                  }}
+                >
+                  {s === soulmate ? <FiCheckCircle /> : <FiCircle />}
+                  {s.name}
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
 
       {userDetails.name ? (
         <div className="user">

diff --git a/src/simulator/index.js b/src/simulator/index.js
@@ -34,7 +34,10 @@ const PatternEditor = ({ id }) => {
   const getUserDetails = async () => {
     const id_token = auth.tokenProperties?.id_token;
     let newUserDetails = false;
-    if (id_token) newUserDetails = jwtDecode(id_token);
+    if (id_token) {
+      newUserDetails = jwtDecode(id_token);
+      localStorage.loginSaved = "true";
+    }
     setUserDetails(newUserDetails);
   };
 
@@ -46,6 +49,14 @@ const PatternEditor = ({ id }) => {
     ipcRenderer.send("scan", {});
   }, []);
 
+  useEffect(() => {
+    if (localStorage.loginSaved) {
+      auth.getToken().then(() => {
+        getUserDetails();
+      });
+    }
+  }, []);
+
   const fetchSketches = async () => {
     let token;
     if (auth.tokenProperties) {
@@ -56,6 +67,7 @@ const PatternEditor = ({ id }) => {
   };
 
   useEffect(() => {
+    setSketches(undefined);
     fetchSketches();
   }, [userDetails]);
 
@@ -77,7 +89,7 @@ const PatternEditor = ({ id }) => {
   };
 
   const save = (id, code) => {
-    sketches.find((s) => s.id === id).code = code;
+    if (sketches) sketches.find((s) => s.id === id).code = code;
     setSketches(sketches);
 
     loggedIn && post("/sketches/save", { id, code }).then(fetchSketches);
@@ -104,27 +116,28 @@ const PatternEditor = ({ id }) => {
 
   return (
     <div className={`frame ${dark && "dark"}`}>
-      {sketches && (
-        <List
-          sketches={sketches}
-          selectedSketch={selectedSketch}
-          loggedIn={loggedIn}
-          add={add}
-          destroy={destroy}
-          soulmates={soulmates}
-          soulmate={soulmate}
-          setSoulmate={setSoulmate}
-          userDetails={userDetails}
-          logout={async () => {
-            await auth.logout();
-            getUserDetails();
-          }}
-          login={async () => {
-            await auth.login();
-            getUserDetails();
-          }}
-        />
-      )}
+      {/* {sketches && ( */}
+      <List
+        sketches={sketches}
+        selectedSketch={selectedSketch}
+        loggedIn={loggedIn}
+        add={add}
+        destroy={destroy}
+        soulmates={soulmates}
+        soulmate={soulmate}
+        setSoulmate={setSoulmate}
+        userDetails={userDetails}
+        logout={async () => {
+          delete localStorage.loginSaved;
+          await auth.logout();
+          getUserDetails();
+        }}
+        login={async () => {
+          await auth.login();
+          getUserDetails();
+        }}
+      />
+      {/* )} */}
       {selectedSketch && (
         <Editor
           save={(code) => save(selectedSketch.id, code)}