Added reset instructions, added login exceptions

src/Index.tsx

@@ -9,6 +9,7 @@ import Login from "./pages/Login";
 import Register from "./pages/Register";
 import Navbar from "./components/Navbar";
 import "./styles/Main.css";
+import ResetInstructions from "./pages/ResetInstructions";
 
 function Index() {
   const [loginState, setLoginState] = useState(false);
@@ -49,6 +50,8 @@ function Index() {
 
   useEffect(() => {
     if (!loginState) {
+      if (window.location.pathname === "/reset") return;
+      if (window.location.pathname === "/register") return;
       navigate("/login");
     }
     setDevicesOnline(deviceNames.length);
@@ -100,6 +103,7 @@ function Index() {
           element={<Login setLogin={setLoginState} setUser={setLoggedUser} />}
         />
         <Route path="/register" element={<Register />} />
+        <Route path="/reset" element={<ResetInstructions />} />
       </Routes>
     </>
   );

src/pages/ResetInstructions.tsx

@@ -0,0 +1,45 @@
+import "../styles/ResetInstructions.css";
+
+function ResetInstructions() {
+  return (
+    <div id="resetInstructions">
+      <h2>Reset Instructions</h2>
+      <p>
+        Unfortunely, you can't reset the password using this interface, however
+        you can reset the entire extender and gain complete control again (the
+        settings will be reset), as long as you have the extender with you.
+        Please read this guide carefully on how to reset it, and do every step.
+      </p>
+      <div className="row">
+        <h3>Step 1: Look under the device</h3>
+        <p>
+          On the bottom of the device, there should be a small hole with a label
+          called "RESET". You will have to use a very small but long lengthed
+          object to push the button inside the small hole, I reccomand something
+          like a toothpick.
+        </p>
+      </div>
+      <div className="row">
+        <h3>Step 2: Hold down that button</h3>
+        <p>
+          After locating this button, hold down on that button until the lights
+          on the extender only flash blue on one light, the other one should be
+          turned off indicating that it is no longer connected to the router.
+        </p>
+      </div>
+      <div className="row">
+        <h3>Step 3: Wait for the refresh</h3>
+        <p>
+          This page will automatically refresh back to the register page and you
+          should now have access to your extender again! Remember that ALL
+          settings are now reset and you will have configure this extender once
+          again, please do not lose your password again.
+        </p>
+      </div>
+      <p style={{ marginTop: "40px" }}>Demo User = root</p>
+      <p>Demo Password = 123</p>
+    </div>
+  );
+}
+
+export default ResetInstructions;

src/styles/ResetInstructions.css

@@ -0,0 +1,33 @@
+#resetInstructions {
+    background-color: var(--bg-color-alt);
+    margin-top: 20px;
+    border-radius: 20px;
+    padding: 20px;
+    height: calc(100% - 50px);
+    overflow: scroll;
+
+    h2 {
+        font-size: 2.5rem;
+        text-align: center;
+    }
+    p {
+        font-size: 1.5rem;
+        margin-top: 20px;
+        padding: 0 80px;
+        text-align: center;
+    }
+}
+
+.row {
+    margin-top: 50px;
+    max-width: 900px;
+
+    h3 {
+        font-size: 1.5rem;
+    }
+    p {
+        font-size: 1.2rem !important;
+        text-align: left !important;
+        padding: 0 !important;
+    }
+}