feat(ui-admin): require auth for all admin pages and fix header text … (#372)

* feat(ui-admin): require auth for all admin pages and fix header text size

- Wrap AppRoutes in RequireAuth with redirectPath=/login so all admin
  pages require authentication including the home page
- Update listing-operations and user-operations redirect paths from / to /login
- Remove redundant RequireAuth wrapper from messages route in app-routes.tsx
- Remove unused isAuthenticated prop from App component and its caller
- Fix admin header .brandName font-size from 1.1rem to 24px, add
  line-height: 32px, and update color to match canonical .logoText style

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* removed some uneeded logic for admin portal

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: jasonmorais

apps/ui-admin/src/app.container.tsx

@@ -13,7 +13,7 @@ export const AppContainer: FC = () => {
 	});
 
 	if (!auth.isAuthenticated) {
-		return <App isAuthenticated={false} />;
+		return <App />;
 	}
 
 	const user = data?.currentAdminUser;
@@ -26,7 +26,7 @@ export const AppContainer: FC = () => {
 			error={error}
 			hasDataComponent={
 				<UserIdProvider userId={userId}>
-					<App isAuthenticated={auth.isAuthenticated} />
+					<App />
 				</UserIdProvider>
 			}
 		/>

apps/ui-admin/src/app.tsx

@@ -9,25 +9,28 @@ import { RequireAuth } from '@sthrift/ui-admin-route-shared';
 import { UserOperationsRoutes } from '@sthrift/ui-admin-route-user-operations';
 import type React from 'react';
 
+const appSection = (
+	<RequireAuth redirectPath="/login">
+		<AppRoutes />
+	</RequireAuth>
+);
+
 const listingOperationsSection = (
-	<RequireAuth redirectPath="/">
+	<RequireAuth redirectPath="/login">
 		<ListingOperationsRoutes />
 	</RequireAuth>
 );
 
 const userOperationsSection = (
-	<RequireAuth redirectPath="/">
+	<RequireAuth redirectPath="/login">
 		<UserOperationsRoutes />
 	</RequireAuth>
 );
 
-interface AppProps {
-	isAuthenticated: boolean;
-}
-export const App: React.FC<AppProps> = () => {
+export const App: React.FC = () => {
 	return (
 		<Routes>
-			<Route path="/*" element={<AppRoutes />} />
+			<Route path="/*" element={appSection} />
 			<Route path="/login" element={<AdminLogin />} />
 			<Route path="/auth-redirect" element={<AuthRedirect />} />
 			<Route

packages/sthrift/ui-admin-route-listing-operations/src/section-layout.tsx

@@ -56,10 +56,6 @@ export const SectionLayout: React.FC = () => {
 		return () => window.removeEventListener('resize', handleResize);
 	}, [auth.isAuthenticated]);
 
-	const handleOnLogin = () => {
-		navigate('/login');
-	};
-
 	const handleLogOut = () => {
 		HandleLogout(auth, apolloClient, window.location.origin);
 	};
@@ -93,7 +89,6 @@ export const SectionLayout: React.FC = () => {
 		>
 			<AdminHeader
 				isAuthenticated={auth.isAuthenticated}
-				onLogin={handleOnLogin}
 				onLogout={handleLogOut}
 			/>
 			<div

packages/sthrift/ui-admin-route-root/src/admin-login.tsx

@@ -13,6 +13,7 @@ export const AdminLogin: React.FC = () => {
 	const [submitting, setSubmitting] = useState(false);
 	const navigate = useNavigate();
 	const auth = useAuth();
+	const handleBack = () => undefined;
 
 	const handleLogin = (_values: LoginFormData) => {
 		setSubmitting(true);
@@ -23,25 +24,17 @@ export const AdminLogin: React.FC = () => {
 		}
 	};
 
-	const handleBack = () => {
-		navigate('/');
-	};
-
-	const handleOnLogin = () => {
-		globalThis.location.href = '/auth-redirect';
-	};
-
 	return (
 		<LoginForm
 			title="Admin Log In"
 			emailPlaceholder="admin@sharethrift.com"
 			onSubmit={handleLogin}
 			submitting={submitting}
 			onBack={handleBack}
+			showBack={false}
 			headerSlot={
 				<AdminHeader
 					isAuthenticated={auth.isAuthenticated}
-					onLogin={handleOnLogin}
 					onLogout={() => navigate('/')}
 				/>
 			}

packages/sthrift/ui-admin-route-root/src/app-routes.tsx

@@ -1,5 +1,4 @@
 import { Route, Routes } from 'react-router-dom';
-import { RequireAuth } from '@sthrift/ui-admin-route-shared';
 import { SectionLayout } from './section-layout.tsx';
 import { Listings } from './components/pages/home/pages/all-listings-page.tsx';
 import { ViewListing } from './components/pages/view-listing/pages/view-listing-page.tsx';
@@ -11,14 +10,7 @@ export const AppRoutes: React.FC = () => {
 			<Route path="" element={<SectionLayout />}>
 				<Route path="" element={<Listings />} />
 				<Route path="listing/:listingId" element={<ViewListing />} />
-				<Route
-					path="messages/*"
-					element={
-						<RequireAuth redirectPath="/">
-							<MessagesRoutes />
-						</RequireAuth>
-					}
-				/>
+				<Route path="messages/*" element={<MessagesRoutes />} />
 			</Route>
 		</Routes>
 	);

packages/sthrift/ui-admin-route-root/src/section-layout.tsx

@@ -56,10 +56,6 @@ export const SectionLayout: React.FC = () => {
 		return () => window.removeEventListener('resize', handleResize);
 	}, [auth.isAuthenticated]);
 
-	const handleOnLogin = () => {
-		navigate('/login');
-	};
-
 	const handleLogOut = () => {
 		HandleLogout(auth, apolloClient, window.location.origin);
 	};
@@ -93,7 +89,6 @@ export const SectionLayout: React.FC = () => {
 		>
 			<AdminHeader
 				isAuthenticated={auth.isAuthenticated}
-				onLogin={handleOnLogin}
 				onLogout={handleLogOut}
 			/>
 			<div

packages/sthrift/ui-admin-route-shared/src/admin-header.module.css

@@ -37,10 +37,11 @@
 
 .brandName {
 	font-family: var(--Urbanist);
-	font-size: 1.1rem;
+	font-size: 24px;
 	font-weight: 700;
+	line-height: 32px;
 	letter-spacing: 0.02em;
-	color: var(--color-message-text);
+	color: var(--color-primary);
 	text-transform: lowercase;
 }
 
@@ -87,7 +88,7 @@
 	}
 
 	.brandName {
-		font-size: 1rem;
+		font-size: 20px;
 	}
 
 	.portalPill {

packages/sthrift/ui-admin-route-shared/src/admin-header.tsx

@@ -6,15 +6,13 @@ import styles from './admin-header.module.css';
 
 interface AdminHeaderProps {
 	isAuthenticated: boolean;
-	onLogin?: () => void;
 	onLogout?: () => void;
 }
 
 const { Header: AntHeader } = Layout;
 
 export const AdminHeader: React.FC<AdminHeaderProps> = ({
 	isAuthenticated,
-	onLogin,
 	onLogout,
 }) => {
 	return (
@@ -35,15 +33,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({
 					>
 						Log Out
 					</Button>
-				) : (
-					<Button
-						type="link"
-						className={styles['authButton']}
-						onClick={onLogin}
-					>
-						Log In
-					</Button>
-				)}
+				) : null}
 			</nav>
 		</AntHeader>
 	);

packages/sthrift/ui-admin-route-user-operations/src/section-layout.tsx

@@ -56,10 +56,6 @@ export const SectionLayout: React.FC = () => {
 		return () => window.removeEventListener('resize', handleResize);
 	}, [auth.isAuthenticated]);
 
-	const handleOnLogin = () => {
-		navigate('/login');
-	};
-
 	const handleLogOut = () => {
 		HandleLogout(auth, apolloClient, window.location.origin);
 	};
@@ -93,7 +89,6 @@ export const SectionLayout: React.FC = () => {
 		>
 			<AdminHeader
 				isAuthenticated={auth.isAuthenticated}
-				onLogin={handleOnLogin}
 				onLogout={handleLogOut}
 			/>
 			<div

packages/sthrift/ui-shared/src/organisms/login-form.tsx

@@ -18,6 +18,7 @@ interface LoginFormProps {
 	onBack: () => void;
 	headerSlot: React.ReactNode;
 	footerSlot?: React.ReactNode;
+	showBack?: boolean;
 	showForgotPassword?: boolean;
 	onForgotPassword?: () => void;
 }
@@ -30,6 +31,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({
 	onBack,
 	headerSlot,
 	footerSlot,
+	showBack = true,
 	showForgotPassword,
 	onForgotPassword,
 }) => {
@@ -166,17 +168,24 @@ export const LoginForm: React.FC<LoginFormProps> = ({
 								<div
 									style={{
 										display: 'flex',
-										justifyContent: showForgotPassword ? 'space-between' : 'flex-start',
+										justifyContent:
+											showBack && showForgotPassword
+												? 'space-between'
+												: showBack
+													? 'flex-start'
+													: 'flex-end',
 										marginTop: '1rem',
 									}}
 								>
-									<Button
-										type="link"
-										onClick={onBack}
-										style={{ padding: 0 }}
-									>
-										← Back to Home
-									</Button>
+									{showBack && (
+										<Button
+											type="link"
+											onClick={onBack}
+											style={{ padding: 0 }}
+										>
+											← Back to Home
+										</Button>
+									)}
 									{showForgotPassword && onForgotPassword && (
 										<Button
 											type="link"