Added basic accounts system and integration with new api calls

This commit is contained in:
Nicholas Orlowsky 2022-11-10 14:12:43 -06:00
parent 7df189c3b4
commit 10f347ea0c
5 changed files with 199 additions and 35 deletions

View file

@ -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>

View file

@ -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
}

View file

@ -10,14 +10,21 @@ 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"}>
<div className={"col-10"}>
<NavbarBrand>
<img src={NWSLogo} alt="nws-logo" style={{width: 120}}/>
</NavbarBrand>
@ -27,9 +34,33 @@ function Layout (props: {children: any}) {
<NavLink className={"nav-lnk"} to={"/status"}>
Status
</NavLink>
<NavLink className={"nav-lnk"} to={"/blogs"}>
Blog
</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>
},
]);

View file

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

View file

@ -33,3 +33,35 @@ enum IncidentSeverity {
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
};