Fix the homepage CSP inline-style violations by removing React style attributes from the homepage app and moving them into CSS modules.

2026-07-01 23:33:37 -04:00
parent 30631504f1
commit bcfe518af2
11 changed files with 256 additions and 265 deletions
@@ -7,6 +7,7 @@ import { API_BASE } from '@/lib/api';
 import { localizedPath, type Locale } from '@/lib/localization/config';
 import { useSearchParams } from 'next/navigation';
 import { Suspense, useState } from 'react';
+import styles from './AuthForms.module.css';

 interface Dict {
  title: string;
@@ -144,16 +145,10 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
  if (!token) {
    return (
      <AuthShell locale={locale} title={dict.title}>
-        <p
-          style={{
-            textAlign: 'center',
-            fontSize: '0.875rem',
-            color: 'var(--color-text-secondary)',
-          }}
-        >
+        <p className={styles.noToken}>
          {dict.noToken}
        </p>
-        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
+        <div className={styles.actionWrap}>
          <a href={forgotHref}>
            <Button intent="primary">{dict.requestNew}</Button>
          </a>
@@ -165,25 +160,10 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
  if (done) {
    return (
      <AuthShell locale={locale} title={dict.title}>
-        <div style={{ textAlign: 'center' }}>
-          <div
-            style={{
-              margin: '0 auto 1rem',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '3.5rem',
-              height: '3.5rem',
-              borderRadius: '50%',
-              background: 'var(--color-success-bg, #ecfdf5)',
-            }}
-          >
+        <div className={styles.center}>
+          <div className={styles.successIcon}>
            <svg
-              style={{
-                width: '1.75rem',
-                height: '1.75rem',
-                color: 'var(--color-success-text, #059669)',
-              }}
+              className={styles.successIconSvg}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
@@ -192,19 +172,13 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
-          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+          <h2 className={styles.statusTitle}>
            {dict.successTitle}
          </h2>
-          <p
-            style={{
-              marginTop: '0.5rem',
-              fontSize: '0.875rem',
-              color: 'var(--color-text-secondary)',
-            }}
-          >
+          <p className={styles.statusBody}>
            {dict.successBody}
          </p>
-          <div style={{ marginTop: '1rem' }}>
+          <div className={styles.actionWrap}>
            <a href={signInHref}>
              <Button intent="primary" fullWidth>
                {dict.signIn}
@@ -220,25 +194,16 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
      <form
        onSubmit={handleSubmit}
-        style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}
+        className={styles.formStack}
      >
        {error ? (
-          <div
-            style={{
-              borderRadius: '1.5rem',
-              border: '1px solid var(--color-error-border, #fecaca)',
-              background: 'var(--color-error-bg, #fef2f2)',
-              padding: '0.75rem 1rem',
-              fontSize: '0.875rem',
-              color: 'var(--color-error-text, #b91c1c)',
-            }}
-          >
+          <div className={styles.error}>
            {error}
          </div>
        ) : null}

        <FormField id="reset-password" label={dict.newPassword} required>
-          <div style={{ position: 'relative', width: '100%' }}>
+          <div className={styles.passwordField}>
            <input
              id="reset-password"
              type={showPassword ? 'text' : 'password'}
@@ -248,34 +213,13 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              autoComplete="new-password"
-              style={{
-                width: '100%',
-                minHeight: '2.875rem',
-                padding: 'var(--space-3) 2.5rem var(--space-3) var(--space-4)',
-                border: '1px solid var(--border-strong)',
-                borderRadius: 'var(--radius-sm)',
-                background: 'var(--surface-primary)',
-                color: 'var(--text-primary)',
-                fontSize: '0.875rem',
-              }}
+              className={styles.passwordInput}
            />
            <button
              type="button"
              onClick={() => setShowPassword((v) => !v)}
              tabIndex={-1}
-              style={{
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                right: '0.5rem',
-                display: 'flex',
-                alignItems: 'center',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--text-tertiary)',
-                padding: 0,
-              }}
+              className={styles.passwordToggle}
            >
              {showPassword ? (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -292,7 +236,7 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
        </FormField>

        <FormField id="reset-confirm" label={dict.confirmPassword} required>
-          <div style={{ position: 'relative', width: '100%' }}>
+          <div className={styles.passwordField}>
            <input
              id="reset-confirm"
              type={showConfirm ? 'text' : 'password'}
@@ -302,34 +246,13 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
              onChange={(e) => setConfirm(e.target.value)}
              placeholder="••••••••"
              autoComplete="new-password"
-              style={{
-                width: '100%',
-                minHeight: '2.875rem',
-                padding: 'var(--space-3) 2.5rem var(--space-3) var(--space-4)',
-                border: '1px solid var(--border-strong)',
-                borderRadius: 'var(--radius-sm)',
-                background: 'var(--surface-primary)',
-                color: 'var(--text-primary)',
-                fontSize: '0.875rem',
-              }}
+              className={styles.passwordInput}
            />
            <button
              type="button"
              onClick={() => setShowConfirm((v) => !v)}
              tabIndex={-1}
-              style={{
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                right: '0.5rem',
-                display: 'flex',
-                alignItems: 'center',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--text-tertiary)',
-                padding: 0,
-              }}
+              className={styles.passwordToggle}
            >
              {showConfirm ? (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -350,24 +273,8 @@ function ResetPasswordContent({ locale }: { locale: Locale }) {
        </Button>
      </form>

-      <div
-        style={{
-          marginTop: '1.5rem',
-          borderTop: '1px solid var(--color-border)',
-          paddingTop: '1.5rem',
-          textAlign: 'center',
-          fontSize: '0.875rem',
-        }}
-      >
-        <a
-          href={signInHref}
-          style={{
-            fontWeight: 600,
-            color: 'var(--color-heading)',
-            textDecoration: 'underline',
-            textUnderlineOffset: '4px',
-          }}
-        >
+      <div className={styles.footer}>
+        <a href={signInHref} className={styles.footerLink}>
          {dict.backToLogin}
        </a>
      </div>