feat: auth store, API client, router setup
This commit is contained in:
+26
-119
@@ -1,122 +1,29 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { PrivateRoute } from "./components/layout/PrivateRoute";
|
||||
import Landing from "./pages/Landing";
|
||||
import Login from "./pages/Login";
|
||||
import Register from "./pages/Register";
|
||||
import Dashboard from "./pages/dashboard/Dashboard";
|
||||
import Keys from "./pages/dashboard/Keys";
|
||||
import Devices from "./pages/dashboard/Devices";
|
||||
import Payments from "./pages/dashboard/Payments";
|
||||
import Servers from "./pages/dashboard/Servers";
|
||||
import Profile from "./pages/Profile";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
)
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Landing />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
|
||||
<Route path="/dashboard/keys" element={<PrivateRoute><Keys /></PrivateRoute>} />
|
||||
<Route path="/dashboard/devices" element={<PrivateRoute><Devices /></PrivateRoute>} />
|
||||
<Route path="/dashboard/payments" element={<PrivateRoute><Payments /></PrivateRoute>} />
|
||||
<Route path="/dashboard/servers" element={<PrivateRoute><Servers /></PrivateRoute>} />
|
||||
<Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const BASE = "/api";
|
||||
|
||||
async function request(
|
||||
url: string,
|
||||
options: RequestInit = {},
|
||||
withAuth = true
|
||||
): Promise<any> {
|
||||
const headers: Record<string, string> = {
|
||||
"Content-Type": "application/json",
|
||||
...(options.headers as Record<string, string>),
|
||||
};
|
||||
|
||||
if (withAuth) {
|
||||
const token = useAuthStore.getState().accessToken;
|
||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const res = await fetch(`${BASE}${url}`, { ...options, headers });
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
register: (email: string, password: string, name?: string) =>
|
||||
request("/web/register", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, password, name }),
|
||||
}, false),
|
||||
|
||||
login: (email: string, password: string) =>
|
||||
request("/web/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, password }),
|
||||
}, false),
|
||||
|
||||
tgAuth: (data: Record<string, any>) =>
|
||||
request("/web/tg_auth", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}, false),
|
||||
|
||||
refresh: (refresh_token: string) =>
|
||||
request("/web/refresh", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ refresh_token }),
|
||||
}, false),
|
||||
|
||||
action: (action: string, payload: Record<string, any> = {}) =>
|
||||
request("/web/action", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ action, payload }),
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Navigate } from "react-router-dom";
|
||||
import { useAuthStore } from "../../store/auth";
|
||||
|
||||
export function PrivateRoute({ children }: { children: React.ReactNode }) {
|
||||
const isLoggedIn = useAuthStore((s) => s.isLoggedIn());
|
||||
return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export function cn(...classes: (string | undefined | false | null)[]) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export default function Landing() { return <div>Landing</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Login() { return <div>Login</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Profile() { return <div>Profile</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Register() { return <div>Register</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Dashboard() { return <div>Dashboard</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Devices() { return <div>Devices</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Keys() { return <div>Keys</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Payments() { return <div>Payments</div>; }
|
||||
@@ -0,0 +1 @@
|
||||
export default function Servers() { return <div>Servers</div>; }
|
||||
@@ -0,0 +1,32 @@
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
interface AuthUser {
|
||||
name: string;
|
||||
email?: string;
|
||||
tg_linked: boolean;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
accessToken: string | null;
|
||||
refreshToken: string | null;
|
||||
user: AuthUser | null;
|
||||
setAuth: (access: string, refresh: string, user: AuthUser) => void;
|
||||
logout: () => void;
|
||||
isLoggedIn: () => boolean;
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
accessToken: null,
|
||||
refreshToken: null,
|
||||
user: null,
|
||||
setAuth: (accessToken, refreshToken, user) =>
|
||||
set({ accessToken, refreshToken, user }),
|
||||
logout: () => set({ accessToken: null, refreshToken: null, user: null }),
|
||||
isLoggedIn: () => !!get().accessToken,
|
||||
}),
|
||||
{ name: "aura-auth" }
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user