mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 02:33:01 +00:00
simple auth setup
This commit is contained in:
Oliver Bryan
@@ -1,4 +1,5 @@
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import { Auth } from "@/components/auth-provider";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import Index from "./Index";
|
||||
import Test from "./Test";
|
||||
@@ -6,12 +7,14 @@ import Test from "./Test";
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/test" element={<Test />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
<Auth>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/test" element={<Test />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</Auth>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
import type { IssueResponse, ProjectResponse } from "@issue/shared";
|
||||
import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { IssueDetailPane } from "@/components/issue-detail-pane";
|
||||
import { IssuesTable } from "@/components/issues-table";
|
||||
import SmallUserDisplay from "@/components/small-user-display";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import SmallUserDisplay from "./components/small-user-display";
|
||||
import LogOutButton from "./components/log-out-button";
|
||||
import { getAuthHeaders } from "./lib/utils";
|
||||
|
||||
function Index() {
|
||||
const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
|
||||
|
||||
const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
|
||||
|
||||
const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
|
||||
const [projects, setProjects] = useState<ProjectResponse[]>([]);
|
||||
const projectsRef = useRef(false);
|
||||
@@ -14,7 +20,7 @@ function Index() {
|
||||
if (projectsRef.current) return;
|
||||
projectsRef.current = true;
|
||||
|
||||
fetch("http://localhost:3000/projects/all")
|
||||
fetch(`${serverURL}/projects/all`, { headers: getAuthHeaders() })
|
||||
.then((res) => res.json())
|
||||
.then((data: ProjectResponse[]) => {
|
||||
setProjects(data);
|
||||
@@ -27,12 +33,10 @@ function Index() {
|
||||
const [selectedIssue, setSelectedIssue] = useState<IssueResponse | null>(null);
|
||||
const [issuesData, setIssues] = useState<IssueResponse[]>([]);
|
||||
|
||||
const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProject) return;
|
||||
|
||||
fetch(`${serverURL}/issues/${selectedProject.Project.blob}`)
|
||||
fetch(`${serverURL}/issues/${selectedProject.Project.blob}`, { headers: getAuthHeaders() })
|
||||
.then((res) => res.json())
|
||||
.then((data: IssueResponse[]) => {
|
||||
setIssues(data);
|
||||
@@ -45,42 +49,51 @@ function Index() {
|
||||
return (
|
||||
<main className="w-full h-full p-1">
|
||||
{/* header area */}
|
||||
<div className="flex gap-4 items-center">
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
if (value === "NONE") {
|
||||
setSelectedProject(null);
|
||||
setSelectedIssue(null);
|
||||
setIssues([]);
|
||||
}
|
||||
const project = projects.find((p) => p.Project.id === Number(value));
|
||||
if (!project) {
|
||||
// TODO: toast here
|
||||
console.error(`NO PROJECT FOUND FOR ID: ${value}`);
|
||||
return;
|
||||
}
|
||||
setSelectedProject(project);
|
||||
setSelectedIssue(null);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 lg:flex">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
|
||||
<div className="flex gap-4 items-center justify-between">
|
||||
<div className="flex gap-4 items-center">
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
if (value === "NONE") {
|
||||
setSelectedProject(null);
|
||||
setSelectedIssue(null);
|
||||
setIssues([]);
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent side="bottom" position="popper">
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.Project.id} value={`${project.Project.id}`}>
|
||||
{project.Project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedProject && (
|
||||
const project = projects.find((p) => p.Project.id === Number(value));
|
||||
if (!project) {
|
||||
// TODO: toast here
|
||||
console.error(`NO PROJECT FOUND FOR ID: ${value}`);
|
||||
return;
|
||||
}
|
||||
setSelectedProject(project);
|
||||
setSelectedIssue(null);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 lg:flex">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent side="bottom" position="popper">
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.Project.id} value={`${project.Project.id}`}>
|
||||
{project.Project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedProject && (
|
||||
<div className="flex items-center gap-2">
|
||||
Owner: <SmallUserDisplay user={selectedProject?.User} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="flex items-center gap-2">
|
||||
Owner: <SmallUserDisplay user={selectedProject?.User} />
|
||||
You:
|
||||
<SmallUserDisplay user={user} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -109,6 +122,8 @@ function Index() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<LogOutButton />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
52
packages/frontend/src/components/auth-provider.tsx
Normal file
52
packages/frontend/src/components/auth-provider.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import type { UserRecord } from "@issue/shared";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import LogInForm from "./login-form";
|
||||
|
||||
type AuthProviderProps = {
|
||||
children: React.ReactNode;
|
||||
loggedInDefault?: boolean;
|
||||
};
|
||||
|
||||
export function Auth({ children }: AuthProviderProps) {
|
||||
const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
|
||||
|
||||
const [loggedIn, setLoggedIn] = useState<boolean>();
|
||||
const fetched = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (fetched.current) return;
|
||||
fetched.current = true;
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
return setLoggedIn(false);
|
||||
}
|
||||
fetch(`${serverURL}/auth/me`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data: UserRecord) => {
|
||||
if (data) {
|
||||
setLoggedIn(true);
|
||||
localStorage.setItem("user", JSON.stringify(data));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoggedIn(false);
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
console.error("user not logged in:", err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loggedIn) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
if (loggedIn === false)
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
|
||||
<LogInForm />
|
||||
</div>
|
||||
);
|
||||
|
||||
return <>loading...</>;
|
||||
}
|
||||
Reference in New Issue
Block a user