From 807d7538a010a85bddcb3df3e27ec26d13777dc0 Mon Sep 17 00:00:00 2001 From: LandaMm Date: Thu, 29 May 2025 14:17:09 +0200 Subject: [PATCH] feat: proper redirect handling --- web/src/App.tsx | 2 +- web/src/components/ui/button.tsx | 12 ++++---- web/src/feature/AccountList/index.tsx | 6 ++-- web/src/feature/Avatar/index.tsx | 30 +++++++++++++++++++ web/src/layout/AuthLayout.tsx | 30 ++++++++++++------- web/src/pages/Agreement/index.tsx | 30 ++++++++----------- .../{OAuthAuthorize => Authorize}/index.tsx | 0 web/src/pages/Login/index.tsx | 15 +++++----- web/src/pages/Register/index.tsx | 10 +++++-- web/src/store/auth.ts | 24 ++++++++++----- 10 files changed, 106 insertions(+), 53 deletions(-) create mode 100644 web/src/feature/Avatar/index.tsx rename web/src/pages/{OAuthAuthorize => Authorize}/index.tsx (100%) diff --git a/web/src/App.tsx b/web/src/App.tsx index f338e6a..7acef50 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -5,7 +5,7 @@ import IndexPage from "./pages/Index"; import LoginPage from "./pages/Login"; import RegisterPage from "./pages/Register"; import AgreementPage from "./pages/Agreement"; -import OAuthAuthorizePage from "./pages/OAuthAuthorize"; +import OAuthAuthorizePage from "./pages/Authorize"; import AuthLayout from "./layout/AuthLayout"; const router = createBrowserRouter([ diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index ef98b4c..6021aa9 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -9,7 +9,7 @@ interface ButtonProps extends ButtonHTMLAttributes { children: ReactNode; className?: string; loading?: boolean; - variant?: "contained" | "outlined" | "text"; + variant?: "contained" | "outlined" | "text" | "icon"; } export const Button: FC = ({ @@ -22,11 +22,13 @@ export const Button: FC = ({ const appearance = useMemo(() => { switch (variant) { case "contained": - return "bg-blue-600 text-white hover:bg-blue-700"; + return "px-4 py-2 bg-blue-600 text-white hover:bg-blue-700"; case "outlined": - return "border border-blue-600 text-blue-600 hover:text-blue-700 font-medium"; + return "px-4 py-2 border border-blue-600 text-blue-600 hover:text-blue-700 font-medium"; case "text": - return "text-blue-600 hover:text-blue-700 font-medium"; + return "py-2 px-4 text-blue-600 hover:text-blue-700 font-medium"; + case "icon": + return "py-0 px-0 text-gray-400 hover:text-gray-600"; } return ""; @@ -34,7 +36,7 @@ export const Button: FC = ({ return (

This will allow{" "} diff --git a/web/src/pages/OAuthAuthorize/index.tsx b/web/src/pages/Authorize/index.tsx similarity index 100% rename from web/src/pages/OAuthAuthorize/index.tsx rename to web/src/pages/Authorize/index.tsx diff --git a/web/src/pages/Login/index.tsx b/web/src/pages/Login/index.tsx index 0a88ea4..c236126 100644 --- a/web/src/pages/Login/index.tsx +++ b/web/src/pages/Login/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { Card, CardContent } from "@/components/ui/card"; import { Mail, Lock } from "lucide-react"; -import { Link, useLocation, useNavigate } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; @@ -34,7 +34,6 @@ export default function LoginPage() { const repo = useAccountRepo(); const location = useLocation(); - const navigate = useNavigate(); const updateActiveAccount = useAuth((state) => state.updateActiveAccount); @@ -68,10 +67,6 @@ export default function LoginPage() { oauth.selectSession(response.access); await updateActiveAccount(account); - - if (!location.state?.from) { - navigate("/"); - } } catch (err: any) { console.log(err); setError( @@ -82,7 +77,7 @@ export default function LoginPage() { setLoading(false); } }, - [repo, reset, oauth, updateActiveAccount, location.state?.from, navigate] + [repo, reset, oauth, updateActiveAccount] ); return ( @@ -173,7 +168,11 @@ export default function LoginPage() {
Don't have an account?{" "} - + Register
diff --git a/web/src/pages/Register/index.tsx b/web/src/pages/Register/index.tsx index c09c0a0..f0da37b 100644 --- a/web/src/pages/Register/index.tsx +++ b/web/src/pages/Register/index.tsx @@ -1,6 +1,6 @@ import { Card, CardContent } from "@/components/ui/card"; import { Mail, Lock, User, Phone } from "lucide-react"; -import { Link } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; @@ -23,6 +23,8 @@ export default function RegisterPage() { formState: { errors }, } = useForm(); + const location = useLocation(); + const [isLoading, setLoading] = useState(false); const [error, setError] = useState(""); const [success, setSuccess] = useState(""); @@ -238,7 +240,11 @@ export default function RegisterPage() {
Already have an account?{" "} - + Login
diff --git a/web/src/store/auth.ts b/web/src/store/auth.ts index 26efb71..d5293ea 100644 --- a/web/src/store/auth.ts +++ b/web/src/store/auth.ts @@ -22,7 +22,10 @@ export interface IAuthState { loadAccounts: () => Promise; updateActiveAccount: (account: LocalAccount) => Promise; + deleteActiveAccount: () => Promise; + authenticate: () => Promise; + requireSignIn: () => void; signOut: () => void; } @@ -79,23 +82,30 @@ export const useAuth = create((set, get) => ({ if (!active) { set({ signInRequired: true }); - } + } else { + const account = accounts.find((acc) => acc.accountId === active); - const account = accounts.find((acc) => acc.accountId === active); - - if (!account) { - resetActiveAccount(); - set({ signInRequired: true }); + if (!account) { + resetActiveAccount(); + set({ signInRequired: true }); + } else { + set({ activeAccount: account }); + } } set({ - activeAccount: account, accounts, loadingAccounts: false, hasLoadedAccounts: true, }); }, + deleteActiveAccount: async () => { + resetActiveAccount(); + set({ activeAccount: null }); + get().loadAccounts(); + }, + authenticate: async () => { const { authenticating } = get(); if (authenticating) return;