Added basic accounts system and integration with new api calls

2022-11-10 14:12:43 -06:00 · 2022-11-10 14:12:43 -06:00 · 10f347ea0c
parent 7df189c3b4
commit 10f347ea0c
5 changed files with 199 additions and 35 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@ -1,7 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ChangeListManager">
-    <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="" />
+    <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/components/CreateCruisePage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/DashboardPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Login.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/LoginPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/NotFoundPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/RegisterPage.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/RegisterPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/VerifyPage.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/VerifyPage.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/nws-api/hooks.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/nws-api/calls.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nws-api/calls.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/nws-api/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nws-api/types.ts" afterDir="false" />
+    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -10,9 +26,10 @@
  <component name="FileTemplateManagerImpl">
    <option name="RECENT_TEMPLATES">
      <list>
+        <option value="HTTP Request" />
+        <option value="CSS File" />
        <option value="TypeScript File" />
        <option value="TypeScript JSX File" />
-        <option value="CSS File" />
      </list>
    </option>
  </component>
@ -28,22 +45,19 @@
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
-  <component name="PropertiesComponent">
-    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
-    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
-    <property name="list.type.of.created.stylesheet" value="CSS" />
-    <property name="node.js.detected.package.eslint" value="true" />
-    <property name="node.js.path.for.package.eslint" value="project" />
-    <property name="node.js.selected.package.eslint" value="(autodetect)" />
-    <property name="nodejs_interpreter_path" value="/usr/local/bin/node" />
-    <property name="nodejs_package_manager_path" value="npm" />
-    <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
-    <property name="vue.rearranger.settings.migration" value="true" />
-  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "WebServerToolWindowFactoryState": "false",
+    "last_opened_file_path": "/home/nickorlow/programmming/personal/nws-site/src/components",
+    "list.type.of.created.stylesheet": "CSS",
+    "nodejs_package_manager_path": "npm",
+    "ts.external.directory.path": "/home/nickorlow/programmming/personal/nws-site/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
  <component name="RecentsManager">
    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/components" />
      <recent name="$PROJECT_DIR$/src/static/images" />
    </key>
  </component>
@ -67,6 +81,7 @@
      <workItem from="1658028513357" duration="2964000" />
      <workItem from="1666469240565" duration="7361000" />
      <workItem from="1666543043382" duration="3699000" />
+      <workItem from="1668047509596" duration="7310000" />
    </task>
    <servers />
  </component>
--- a/src/App.css
+++ b/src/App.css
@ -4,6 +4,40 @@
  flex-direction: column;
 }

+input {
+  border-radius: 10px;
+  border-color: #000;
+  border-width: 1px;
+  border-style: solid;
+
+  padding: 3px;
+
+
+}
+
+button {
+  border-radius: 10px;
+  border-width: 0px;
+
+  background-color: cornflowerblue;
+  color: white;
+
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 3px
+}
+
+p {
+  margin: 0 !important;
+}
+
+.error-banner {
+  background-color: #f08080;
+  border-radius: 10px;
+  padding: 3px;
+  height: max-content;
+}
+
 .low-severity {
  background-color: #98fb98
 }
--- a/src/index.tsx
+++ b/src/index.tsx
@ -10,26 +10,57 @@ import "./index.css";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import UptimeCard from "./components/UptimeCard";
 import Footer from "./components/Footer";
-import {Nav, Navbar, NavbarBrand} from "react-bootstrap";
+import {Nav, Navbar, NavbarBrand, NavDropdown} from "react-bootstrap";
 import NWSLogo from "./static/images/NWS_Logo.png";
 import Blogs from "./components/Blogs";
+import NotFoundPage from "./components/NotFoundPage";
+import LoginPage from "./components/LoginPage";
+import RegisterPage from "./components/RegisterPage";
+import VerifyPage from "./components/VerifyPage";
+import DashboardPage from "./components/DashboardPage";
+import CreateCruisePage from "./components/CreateCruisePage";

 function Layout (props: {children: any}) {
    return (
        <div>
-            <Navbar sticky={"top"} style={{backgroundColor: "#eee", paddingLeft: 100, paddingRight: 100}}>
-                <NavbarBrand>
-                    <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
-                </NavbarBrand>
-                <NavLink className={"nav-lnk"} to={"/"}>
-                    Home
-                </NavLink>
-                <NavLink className={"nav-lnk"} to={"/status"}>
-                    Status
-                </NavLink>
-                <NavLink className={"nav-lnk"} to={"/blogs"}>
-                    Blog
-                </NavLink>
+            <Navbar sticky={"top"} style={{backgroundColor: "#eee", paddingLeft: 100, paddingRight: 100}} className={"row"}>
+                <div className={"col-10"}>
+                    <NavbarBrand>
+                        <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
+                    </NavbarBrand>
+                    <NavLink className={"nav-lnk"} to={"/"}>
+                        Home
+                    </NavLink>
+                    <NavLink className={"nav-lnk"} to={"/status"}>
+                        Status
+                    </NavLink>
+                </div>
+                {/*<NavLink className={"nav-lnk"} to={"/blogs"}>*/}
+                {/*    Blog*/}
+                {/*</NavLink>*/}
+                <div className={"col-2"}>
+                    { localStorage.getItem("session_key") === null &&
+                        (
+                            <NavLink className={"nav-lnk"} to={"/login"}>
+                                Login
+                            </NavLink>
+
+                        )
+                    }
+                    { localStorage.getItem("session_key") === null ||
+                        (
+                            <NavDropdown title={"Account"} className={"nav-lnk"}>
+                                <NavLink className={"nav-lnk"} to={"/dashboard"}>
+                                    Dashboard
+                                </NavLink>
+                                <hr/>
+                                <NavLink className={"nav-lnk"} to={"/login"} onClick={()=>{localStorage.removeItem("session_key")}}>
+                                    Logout
+                                </NavLink>
+                            </NavDropdown>
+                        )
+                    }
+                </div>
            </Navbar>
            {props.children}
            <Footer/>
@ -66,11 +97,46 @@ const router = createBrowserRouter([
                <Blogs/>
            </Layout>
    },
+    {
+        path: "login",
+        element:
+            <Layout>
+                <LoginPage/>
+            </Layout>
+    },
+    {
+        path: "verify",
+        element:
+            <Layout>
+                <VerifyPage/>
+            </Layout>
+    },
+    {
+        path: "dashboard",
+        element:
+            <Layout>
+                <DashboardPage/>
+            </Layout>
+    },
+    {
+        path: "register",
+        element:
+            <Layout>
+                <RegisterPage/>
+            </Layout>
+    },
+    {
+        path: "cruise/new",
+        element:
+            <Layout>
+                <CreateCruisePage/>
+            </Layout>
+    },
    {
        path: "*",
        element:
            <Layout>
-                <StatusPage/>
+                <NotFoundPage/>
            </Layout>
    },
 ]);
--- a/src/nws-api/calls.ts
+++ b/src/nws-api/calls.ts
@ -1,4 +1,4 @@
-import {Blog, Incident, UptimeResponse} from "./types";
+import {Blog, Incident, Service, SessionKey, UptimeResponse} from "./types";

 export async function getUptime(): Promise<UptimeResponse> {
    let response: Response = await fetch('https://api-nws.nickorlow.com/uptime');
@ -18,4 +18,21 @@ export async function getBlogs(): Promise<Blog[]> {
    return blogs;
 }

+export async function getSessionKey(accountId: string, password: string): Promise<SessionKey> {
+    let response: Response = await fetch('https://api-nws.nickorlow.com/Account/session',
+        {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'id': accountId,
+                'password': password
+            })
+        });
+
+    let sessionKey: SessionKey = await response.json();
+    return sessionKey;
+}
+

--- a/src/nws-api/types.ts
+++ b/src/nws-api/types.ts
@ -29,7 +29,39 @@ export type Incident = {
 };

 enum IncidentSeverity {
-  LOW,
-  MEDIUM,
-  HIGH
+    LOW,
+    MEDIUM,
+    HIGH
 };
+
+// Below is primarily for user-facing things
+
+export type Account = {
+  id?: string,
+  email: string,
+  name?: string,
+  password?: string,
+  status?: string
+};
+
+export type Service = {
+    serviceId: string,
+    serviceName: string,
+    namespace: string,
+    containerUrl: string,
+    ownerId: string
+}
+
+export type ApiError = {
+    StatusCode: number,
+    ErrorMessage: string
+};
+
+export type SessionKey = {
+    id: string,
+    expiry: Date,
+    accountId: string,
+    ip: string
+};
+
+