@striae-org/striae 3.0.4

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

@@ -0,0 +1,274 @@
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: var(--spaceL);
+  z-index: var(--zIndex0);
+}
+
+.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);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.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);
+}
+
+.title {
+  text-align: center;
+  color: var(--textTitle);
+  margin-bottom: var(--spaceXL);
+  font-size: var(--fontSizeH4);
+}
+
+.modalTitle {
+  font-size: var(--fontSizeH4);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0 0 var(--spaceXL) 0;
+  text-align: center;
+}
+
+.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);
+}
+
+.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));
+}
+
+.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);
+}
+
+.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);
+  animation: slideInError var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.error::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--error);
+  animation: errorPulse 1.5s ease-in-out infinite;
+}
+
+.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);
+  animation: slideInSuccess var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.success::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--success);
+  animation: successPulse 1.5s ease-in-out infinite;
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  overflow: hidden;
+  padding: var(--space2XL);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  font-size: var(--fontSizeH5);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+/* Animations */
+@keyframes slideInError {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes errorPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--error) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--error) 20%, transparent);
+  }
+}
+
+@keyframes slideInSuccess {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes successPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--success) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--success) 20%, transparent);
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .error, .success {
+    animation: none;
+  }
+  
+  .error::before, .success::before {
+    animation: none;
+  }
+}

package/app/routes/auth/passwordReset.tsx

@@ -0,0 +1,154 @@
+import { useRef, useState } from 'react';
+import { Link } from '@remix-run/react';
+import { sendPasswordResetEmail, signOut } from 'firebase/auth';
+import { auth } from '~/services/firebase';
+import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase-errors';
+import { auditService } from '~/services/audit.service';
+import { buildActionCodeSettings } from '~/utils/auth-action-settings';
+import styles from './passwordReset.module.css';
+
+interface PasswordResetProps {
+  isModal?: boolean;
+  onBack: () => void;
+}
+
+export const PasswordReset = ({ isModal, onBack }: PasswordResetProps) => {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [error, setError] = useState<string>('');
+  const [success, setSuccess] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleReset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const email = formRef.current?.email.value;
+    if (!email) return;
+
+    setIsLoading(true);
+    setError('');
+    setSuccess('');
+    
+    try {
+      await sendPasswordResetEmail(auth, email, buildActionCodeSettings());
+
+      // Sign out immediately after issuing the reset email to reduce session risk.
+      try {
+        await signOut(auth);
+      } catch (signOutError) {
+        console.error('Automatic sign-out after password reset request failed:', signOutError);
+        setError('Password reset email sent, but automatic sign-out failed. Please sign out manually.');
+        return;
+      }
+      
+      // Log successful password reset request
+      try {
+        await auditService.logPasswordReset(
+          email,
+          'email',
+          'success'
+        );
+      } catch (auditError) {
+        console.error('Failed to log successful password reset request audit:', auditError);
+      }
+      
+      setSuccess(`${ERROR_MESSAGES.RESET_EMAIL_SENT} You have been signed out.`);
+      setTimeout(onBack, 2000);
+    } catch (err) {
+      const { message } = handleAuthError(err);
+      
+      // Log failed password reset attempt
+      try {
+        await auditService.logPasswordReset(
+          email,
+          'email',
+          'failure',
+          undefined, // no reset token on failure
+          'email-link',
+          1, // first attempt
+          undefined, // password complexity not relevant here
+          undefined, // previous password reuse not relevant here
+          undefined, // no session ID
+          [message] // error details
+        );
+      } catch (auditError) {
+        console.error('Failed to log failed password reset request audit:', auditError);
+      }
+      
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const FormContent = (
+    <form ref={formRef} onSubmit={handleReset} className={styles.form}>
+      <input
+        type="email"
+        name="email"
+        placeholder="Email"
+        autoComplete="email"
+        className={styles.input}
+        required
+      />
+      {error && <p className={styles.error}>{error}</p>}
+      {success && <p className={styles.success}>{success}</p>}
+      <button type="submit" className={styles.button} disabled={isLoading}>
+        {isLoading ? 'Sending...' : 'Send Reset Link'}
+      </button>
+      <button 
+        type="button" 
+        onClick={onBack}
+        className={styles.secondaryButton}
+      >
+        Back
+      </button>
+    </form>
+  );
+
+  if (isModal) {
+    return (
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal}>
+          <h2 className={styles.modalTitle}>Reset Password</h2>
+          {FormContent}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <Link 
+        viewTransition
+        prefetch="intent"
+        to="https://striae.org" 
+      >
+        <div className={styles.logo} />
+      </Link>
+      <div className={styles.formWrapper}>
+        <h1 className={styles.title}>Reset Password</h1>
+        <form ref={formRef} onSubmit={handleReset} className={styles.form}>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            autoComplete="email"
+            className={styles.input}
+            required
+          />
+          {error && <p className={styles.error}>{error}</p>}
+          {success && <p className={styles.success}>{success}</p>}
+          <button type="submit" className={styles.button} disabled={isLoading}>
+            {isLoading ? 'Sending...' : 'Send Reset Link'}
+          </button>
+          <button 
+            type="button" 
+            onClick={onBack}
+            className={styles.secondaryButton}
+          >
+            Back
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

package/app/routes/auth/route.ts

@@ -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}`);
+	}
+
+	throw redirect(`/${search}`);
+};
+
+export { Login as default, meta } from './login';

package/app/routes/mobile-prevented/mobilePrevented.module.css

@@ -0,0 +1,47 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spaceL);
+}
+
+.card {
+  width: 100%;
+  max-width: var(--maxWidthS);
+  background-color: color-mix(in lab, var(--backgroundLight) 95%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--space2XL);
+  box-shadow: 0 var(--spaceXS) var(--spaceM) color-mix(in lab, var(--black) 10%, transparent);
+  text-align: center;
+}
+
+.title {
+  margin: 0 0 var(--spaceM);
+  color: var(--textTitle);
+  font-size: var(--fontSizeH4);
+}
+
+.description {
+  margin: 0 0 var(--spaceXL);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyM);
+  line-height: 1.6;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  background-color: var(--primary);
+  color: var(--white);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.link:hover {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}

package/app/routes/mobile-prevented/mobilePrevented.tsx

@@ -0,0 +1,26 @@
+import { Link } from '@remix-run/react';
+import { baseMeta } from '~/utils/meta';
+import styles from './mobilePrevented.module.css';
+
+export const meta = () => {
+  return baseMeta({
+    title: 'Desktop Required',
+    description: 'Striae authentication is available on desktop devices only.',
+  });
+};
+
+export const MobilePrevented = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1 className={styles.title}>Desktop Required</h1>
+        <p className={styles.description}>
+          Striae authentication is restricted to desktop devices. Please open this page on a desktop or laptop computer to continue.
+        </p>
+        <Link viewTransition prefetch="intent" to="https://striae.org" className={styles.link}>
+          Return Home
+        </Link>
+      </div>
+    </div>
+  );
+};

package/app/routes/mobile-prevented/route.ts

@@ -0,0 +1,14 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/cloudflare';
+import { isMobileOrTabletUserAgent } from '~/utils/device-detection';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const userAgent = request.headers.get('user-agent') ?? '';
+
+  if (!isMobileOrTabletUserAgent(userAgent)) {
+    throw redirect('/');
+  }
+
+  return null;
+};
+
+export { MobilePrevented as default, meta } from './mobilePrevented';

package/app/routes/striae/striae.module.css

@@ -0,0 +1,30 @@
+.appContainer {
+  display: flex;
+  width: 100vw;
+  height: 100vh;  
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.mainContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.canvasArea {
+  position: relative;
+  flex: 1;
+}
+
+.toolbarWrapper {
+  position: absolute;
+  top: var(--spaceL);
+  left: var(--spaceL);
+  z-index: 30;
+}