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

@ -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,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>
},
]);

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

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