@striae-org/striae 3.0.4

package/app/config-example/admin-service.json

@@ -0,0 +1,13 @@
+{
+  "type": "your-service-account-type",
+  "project_id": "your-project-id",
+  "private_key_id": "your-private-key-id",
+  "private_key": "your-private-key",
+  "client_email": "your-client-email",
+  "client_id": "your-client-id",
+  "auth_uri": "your-auth-uri",
+  "token_uri": "your-token-uri",
+  "auth_provider_x509_cert_url": "your-auth-provider-cert-url",
+  "client_x509_cert_url": "your-client-cert-url",
+  "universe_domain": "your-universe-domain"
+}

package/app/config-example/config.json

@@ -0,0 +1,17 @@
+{    
+  "url": "PAGES_CUSTOM_DOMAIN",    
+  "data_worker_url": "DATA_WORKER_CUSTOM_DOMAIN",
+  "keys_url": "KEYS_WORKER_CUSTOM_DOMAIN",
+  "image_worker_url": "IMAGE_WORKER_CUSTOM_DOMAIN",
+  "user_worker_url": "USER_WORKER_CUSTOM_DOMAIN",
+  "pdf_worker_url": "PDF_WORKER_CUSTOM_DOMAIN",
+  "audit_worker_url": "AUDIT_WORKER_CUSTOM_DOMAIN",
+  "keys_auth": "YOUR_KEYS_AUTH_TOKEN",
+  "manifest_signing_key_id": "MANIFEST_SIGNING_KEY_ID",
+  "manifest_signing_public_key": "MANIFEST_SIGNING_PUBLIC_KEY",
+  "manifest_signing_public_keys": {
+    "MANIFEST_SIGNING_KEY_ID": "MANIFEST_SIGNING_PUBLIC_KEY"
+  },
+  "max_cases_review": 0,
+  "max_files_per_case_review": 0
+}

package/app/config-example/firebase.ts

@@ -0,0 +1,21 @@
+interface FirebaseConfig {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId: string;  
+}
+
+const firebaseConfig: FirebaseConfig = {
+  apiKey: "YOUR_FIREBASE_API_KEY",
+  authDomain: "YOUR_FIREBASE_AUTH_DOMAIN",
+  projectId: "YOUR_FIREBASE_PROJECT_ID",
+  storageBucket: "YOUR_FIREBASE_STORAGE_BUCKET",
+  messagingSenderId: "YOUR_FIREBASE_MESSAGING_SENDER_ID",
+  appId: "YOUR_FIREBASE_APP_ID",
+  measurementId: "YOUR_FIREBASE_MEASUREMENT_ID"
+};
+
+export default firebaseConfig;

package/app/config-example/inactivity.ts

@@ -0,0 +1,13 @@
+export const INACTIVITY_CONFIG = {
+  TIMEOUT_MINUTES: 60,  
+  WARNING_MINUTES: 5, 
+  TRACKED_ACTIVITIES: [
+    'mousedown',
+    'mousemove', 
+    'keypress',
+    'scroll',
+    'touchstart',
+    'click',
+    'keydown'
+  ] as const
+};

package/app/config-example/meta-config.json

@@ -0,0 +1,6 @@
+{
+    "name": "Striae",  
+    "author": "Stephen J. Lu",
+    "title": "A Firearms Examiner's Comparison Companion",
+    "url": "PAGES_CUSTOM_DOMAIN"
+}

package/app/contexts/auth.context.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { User } from 'firebase/auth';
+
+interface AuthContextType {
+  user: User | null;
+  setUser: (user: User | null) => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  user: null,
+  setUser: () => {},
+});

package/app/entry.client.tsx

@@ -0,0 +1,12 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});

package/app/entry.server.tsx

@@ -0,0 +1,44 @@
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import { RemixServer } from "@remix-run/react";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
+) {
+  const body = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      // If you wish to abort the rendering process, you can pass a signal here.
+      // Please refer to the templates for example son how to configure this.
+      // signal: controller.signal,
+      onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    }
+  );
+
+  if (isBotRequest(request.headers.get("user-agent"))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}
+
+function isBotRequest(userAgent: string | null) {
+  if (!userAgent) {
+    return false;
+  }
+
+  return isbot(userAgent);
+}

package/app/hooks/useInactivityTimeout.ts

@@ -0,0 +1,110 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useLocation } from '@remix-run/react';
+import { signOut } from 'firebase/auth';
+import { auth } from '~/services/firebase';
+import { INACTIVITY_CONFIG } from '~/config/inactivity';
+
+interface UseInactivityTimeoutOptions {
+  timeoutMinutes?: number;
+  warningMinutes?: number;
+  onWarning?: () => void;
+  onTimeout?: () => void;
+  enabled?: boolean;
+}
+
+export const useInactivityTimeout = ({
+  timeoutMinutes = INACTIVITY_CONFIG.TIMEOUT_MINUTES,
+  warningMinutes = INACTIVITY_CONFIG.WARNING_MINUTES,
+  onWarning,
+  onTimeout,
+  enabled = true
+}: UseInactivityTimeoutOptions = {}) => {
+  const location = useLocation();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastActivityRef = useRef<number>(Date.now());
+
+  const isAuthRoute = location.pathname.startsWith('/auth');
+  const shouldEnable = enabled && isAuthRoute;
+
+  const clearTimeouts = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (warningTimeoutRef.current) {
+      clearTimeout(warningTimeoutRef.current);
+      warningTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleSignOut = useCallback(async () => {
+    try {
+      await signOut(auth);
+      onTimeout?.();
+    } catch (error) {
+      console.error('Error signing out:', error);
+    }
+  }, [onTimeout]);
+
+  const handleWarning = useCallback(() => {
+    onWarning?.();
+  }, [onWarning]);
+
+  const resetTimer = useCallback(() => {
+    if (!shouldEnable) return;
+
+    lastActivityRef.current = Date.now();
+    clearTimeouts();
+
+    const warningMs = (timeoutMinutes - warningMinutes) * 60 * 1000;
+    if (warningMs > 0) {
+      warningTimeoutRef.current = setTimeout(handleWarning, warningMs);
+    }
+
+    const timeoutMs = timeoutMinutes * 60 * 1000;
+    timeoutRef.current = setTimeout(handleSignOut, timeoutMs);
+  }, [shouldEnable, timeoutMinutes, warningMinutes, handleWarning, handleSignOut, clearTimeouts]);
+
+  const extendSession = useCallback(() => {
+    resetTimer();
+  }, [resetTimer]);
+
+  const getRemainingTime = useCallback(() => {
+    const elapsed = Date.now() - lastActivityRef.current;
+    const remaining = (timeoutMinutes * 60 * 1000) - elapsed;
+    return Math.max(0, Math.floor(remaining / 1000));
+  }, [timeoutMinutes]);
+
+  useEffect(() => {
+    if (!shouldEnable) {
+      clearTimeouts();
+      return;
+    }
+
+    const activities = INACTIVITY_CONFIG.TRACKED_ACTIVITIES;
+
+    const handleActivity = () => {
+      resetTimer();
+    };
+
+    activities.forEach(activity => {
+      document.addEventListener(activity, handleActivity, true);
+    });
+
+    resetTimer();
+
+    return () => {
+      activities.forEach(activity => {
+        document.removeEventListener(activity, handleActivity, true);
+      });
+      clearTimeouts();
+    };
+  }, [shouldEnable, resetTimer, clearTimeouts, location.pathname]);
+
+  return {
+    extendSession,
+    getRemainingTime,
+    clearTimeouts
+  };
+};

package/app/root.tsx

@@ -0,0 +1,170 @@
+import type { LinksFunction } from "@remix-run/cloudflare";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError,
+  Link,
+  useLocation,
+  useMatches
+} from "@remix-run/react";
+import { 
+  ThemeProvider,
+  themeStyles 
+} from '~/components/theme-provider/theme-provider';
+import { AuthProvider } from '~/components/auth/auth-provider';
+import styles from '~/styles/root.module.css';
+import './tailwind.css';
+
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous" as const,
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+  { rel: 'manifest', href: '/manifest.json' },
+  { rel: 'icon', href: '/favicon.ico' },
+  { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
+  { rel: 'shortcut_icon', href: '/shortcut.png', type: 'image/png', sizes: '64x64' },
+  { rel: 'apple-touch-icon', href: '/icon-256.png', sizes: '256x256' },
+];
+
+type AppTheme = 'dark' | 'light';
+
+interface ThemeHandle {
+  theme?: AppTheme;
+}
+
+const DEFAULT_THEME: AppTheme = 'light';
+
+const isAppTheme = (value: unknown): value is AppTheme => {
+  return value === 'dark' || value === 'light';
+};
+
+const resolveRouteTheme = (matches: ReturnType<typeof useMatches>): AppTheme => {
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const routeHandle = matches[index].handle as ThemeHandle | undefined;
+
+    if (isAppTheme(routeHandle?.theme)) {
+      return routeHandle.theme;
+    }
+  }
+
+  return DEFAULT_THEME;
+};
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  const matches = useMatches();
+  const theme = resolveRouteTheme(matches);
+  const themeColor = theme === 'dark' ? '#000000' : '#f5f5f5';
+
+  return (
+    <html lang="en" data-theme={theme}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content={themeColor} />
+        <meta name="color-scheme" content={theme} />
+        <style dangerouslySetInnerHTML={{ __html: themeStyles }} />        
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex flex-col h-screen w-full overflow-x-hidden">
+        <ThemeProvider theme={theme} className="">
+        <main>
+          {children}
+        </main>
+        </ThemeProvider>        
+        <Scripts />
+        <ScrollRestoration />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  const matches = useMatches();
+  const location = useLocation();
+  const isAuthRoute = matches.some(match => 
+    match.id.includes('auth') || 
+    match.pathname?.includes('/auth')    
+  ) || location.pathname === '/';
+
+  if (isAuthRoute) {
+    return (
+      <AuthProvider>
+        <Outlet />
+      </AuthProvider>
+    );
+  }
+
+  return <Outlet />;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <html lang="en">
+        <head>
+          <title>{`${error.status} ${error.statusText}`}</title>          
+        </head>
+        <body className="flex flex-col h-screen">
+          <ThemeProvider theme="light" className="">          
+          <main>
+            <div className={styles.errorContainer}>
+              <div className={styles.errorTitle}>{error.status}</div>
+              <p className={styles.errorMessage}>{error.statusText}</p>
+              <Link 
+                viewTransition
+                prefetch="intent"
+                to="https://striae.org" 
+                className={styles.errorLink}>
+                Return Home
+              </Link>
+            </div>
+          </main>
+          </ThemeProvider>
+          <ScrollRestoration />
+          <Scripts />          
+        </body>
+      </html>
+    );
+  }
+
+  return (
+    <html lang="en">
+      <head>
+        <title>Oops! Something went wrong</title>       
+      </head>
+      <body className="flex flex-col h-screen">
+        <ThemeProvider theme="light" className="">        
+        <main>
+          <div className={styles.errorContainer}>
+            <div className={styles.errorTitle}>500</div>
+            <p className={styles.errorMessage}>Something went wrong. Please try again later.</p>
+            <Link 
+              viewTransition
+              prefetch="intent"
+              to="https://striae.org" 
+              className={styles.errorLink}>
+              Return Home
+            </Link>
+          </div>
+        </main>
+        </ThemeProvider>
+        <ScrollRestoration />
+        <Scripts />        
+      </body>
+    </html>
+  );
+}

package/app/routes/_index.tsx

@@ -0,0 +1,16 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/cloudflare';
+import { isMobileOrTabletUserAgent } from '~/utils/device-detection';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const requestUrl = new URL(request.url);
+	const search = requestUrl.search ?? '';
+	const userAgent = request.headers.get('user-agent') ?? '';
+
+	if (isMobileOrTabletUserAgent(userAgent)) {
+		throw redirect(`/mobile-prevented${search}`);
+	}
+
+	return null;
+};
+
+export { Login as default, meta } from './auth/login';

package/app/routes/auth/emailActionHandler.module.css

@@ -0,0 +1,232 @@
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: var(--spaceL);
+  z-index: var(--zIndex0);
+}
+
+.logoLink {
+  display: block;
+}
+
+.logo {
+  position: fixed;
+  top: var(--spaceL);
+  left: var(--spaceL);
+  width: 150px;
+  height: 150px;
+  background-image: url("/logo-dark.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: var(--zIndex2);
+  transition: transform var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}
+
+.formWrapper {
+  background-color: color-mix(in lab, var(--backgroundLight) 95%, transparent);
+  padding: var(--space2XL);
+  border-radius: var(--spaceXS);
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
+  width: 100%;
+  max-width: var(--maxWidthS);
+}
+
+.title {
+  text-align: center;
+  color: var(--textTitle);
+  margin-bottom: var(--spaceL);
+  font-size: var(--fontSizeH4);
+}
+
+.description {
+  color: var(--textBody);
+  text-align: center;
+  margin-bottom: var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+}
+
+.hint {
+  color: var(--textLight);
+  text-align: center;
+  margin-bottom: var(--spaceM);
+  font-size: var(--fontSizeBodyXS);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.input {
+  width: 100%;
+  padding: var(--spaceL);
+  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyM);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 25%, transparent);
+}
+
+.passwordField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.passwordField .input {
+  padding-right: var(--space2XL);
+}
+
+.passwordToggle {
+  position: absolute;
+  right: var(--spaceM);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: var(--spaceXS);
+  border-radius: var(--spaceXS);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+  z-index: 1;
+  height: auto;
+  min-width: 24px;
+}
+
+.passwordToggle:hover {
+  background-color: color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.passwordToggle:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.passwordFeedback {
+  color: var(--textLight);
+  font-size: var(--fontSizeBodyXS);
+  margin-top: var(--spaceS);
+}
+
+.passwordFeedback pre {
+  margin: 0;
+  font-family: inherit;
+  white-space: pre-line;
+}
+
+.button {
+  width: 100%;
+  padding: var(--spaceL);
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.button:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.button:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.secondaryButton {
+  width: 100%;
+  padding: var(--spaceL);
+  background-color: transparent;
+  border: 1.5px solid var(--primary);
+  color: var(--primary);
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.secondaryButton:hover {
+  background-color: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.loginToStriaeButton {
+  width: 100%;
+  padding: var(--spaceL);
+  background-color: #1e7e34;
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.loginToStriaeButton:hover {
+  background-color: #155724;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.error {
+  color: color-mix(in lab, var(--error) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--error) 12%, transparent),
+    color-mix(in lab, var(--error) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
+  border-left: 3px solid var(--error);
+}
+
+.success {
+  color: color-mix(in lab, var(--success) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--success) 12%, transparent),
+    color-mix(in lab, var(--success) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--success) 30%, transparent);
+  border-left: 3px solid var(--success);
+}