Added basic accounts system and integration with new api calls

.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">
+  <component name="PropertiesComponent"><![CDATA[{
-    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+  "keyToString": {
-    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    "WebServerToolWindowFactoryState": "false",
-    <property name="WebServerToolWindowFactoryState" value="false" />
+    "last_opened_file_path": "/home/nickorlow/programmming/personal/nws-site/src/components",
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    "list.type.of.created.stylesheet": "CSS",
-    <property name="list.type.of.created.stylesheet" value="CSS" />
+    "nodejs_package_manager_path": "npm",
-    <property name="node.js.detected.package.eslint" value="true" />
+    "ts.external.directory.path": "/home/nickorlow/programmming/personal/nws-site/node_modules/typescript/lib",
-    <property name="node.js.path.for.package.eslint" value="project" />
+    "vue.rearranger.settings.migration": "true"
-    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+  }
-    <property name="nodejs_interpreter_path" value="/usr/local/bin/node" />
+}]]></component>
-    <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="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>

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
 }

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}}>
+            <Navbar sticky={"top"} style={{backgroundColor: "#eee", paddingLeft: 100, paddingRight: 100}} className={"row"}>
-                <NavbarBrand>
+                <div className={"col-10"}>
-                    <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
+                    <NavbarBrand>
-                </NavbarBrand>
+                        <img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
-                <NavLink className={"nav-lnk"} to={"/"}>
+                    </NavbarBrand>
-                    Home
+                    <NavLink className={"nav-lnk"} to={"/"}>
-                </NavLink>
+                        Home
-                <NavLink className={"nav-lnk"} to={"/status"}>
+                    </NavLink>
-                    Status
+                    <NavLink className={"nav-lnk"} to={"/status"}>
-                </NavLink>
+                        Status
-                <NavLink className={"nav-lnk"} to={"/blogs"}>
+                    </NavLink>
-                    Blog
+                </div>
-                </NavLink>
+                {/*<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>
     },
 ]);

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;
+}
+
 

src/nws-api/types.ts

@@ -29,7 +29,39 @@ export type Incident = {
 };
 
 enum IncidentSeverity {
-  LOW,
+    LOW,
-  MEDIUM,
+    MEDIUM,
-  HIGH
+    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
+};
+
+