From 728a81275c649804dee61c9ae03f89a7bbdb712e Mon Sep 17 00:00:00 2001
From: gbutler <mulldug@cranklever.com>
Date: Thu, 13 Aug 2026 18:55:46 -0500
Subject: [PATCH 1/3] feat(auth): update signup page UI and policy

- Rework signup form to match FNid branding (title, subheader, button label)
- Replace Select/MenuItem country picker with Autocomplete for type-ahead filtering
- Add password visibility toggle, confirm field match indicator, and
  sr-only live region (consistent with reset password page)
- Add password requirements list derived from config
- Add external labels above all inputs instead of MUI floating labels
- Disable submit button until password requirements pass and fields match
- Replace raw <label> on code of conduct checkbox with FormControlLabel
- Extract shared layout and utility styles into resources/styles/auth.scss
  and import from both reset_password and signup modules
- Add allowed_special_characters_text and shape_list to register.blade.php
- Update start_local_server.sh super-admin password to meet 10-char policy
---
 .../reset_password/reset_password.module.scss |  64 +------
 resources/js/signup/signup.js                 | 170 +++++++++++-------
 resources/js/signup/signup.module.scss        |  38 +---
 resources/styles/auth.scss                    |  67 +++++++
 resources/views/auth/register.blade.php       |   4 +-
 start_local_server.sh                         |   2 +-
 6 files changed, 189 insertions(+), 156 deletions(-)
 create mode 100644 resources/styles/auth.scss

diff --git a/resources/js/reset_password/reset_password.module.scss b/resources/js/reset_password/reset_password.module.scss
index 0dce2766..829c44f5 100644
--- a/resources/js/reset_password/reset_password.module.scss
+++ b/resources/js/reset_password/reset_password.module.scss
@@ -1,22 +1,7 @@
 @import "../../styles/global.scss";
+@import "../../styles/auth.scss";
 
 .main_container {
-  margin-top: 5%;
-  margin-bottom: 10%;
-  max-width: 544px !important;
-
-  a {
-    color: $base-color-dark;
-  }
-
-  .title_container {
-    .app_logo {
-      display: flex;
-      max-width: 40%;
-      margin: auto;
-      padding-bottom: 40px;
-    }
-  }
 
   .reset_password_container {
     border: solid 1px $border-color;
@@ -28,8 +13,6 @@
     }                                                                                                                        
 
     .turnstile {
-      margin-top: 10px;
-      margin-bottom: 10px;
       text-align: center;
     }
 
@@ -39,39 +22,6 @@
       background-color: $base-color-dark;
     }
 
-    .password_hint {
-      color: $hint-text-color;
-      background-color: #fafafa;
-      margin: 8px 8px;
-    }
-
-    .password_hint p:first-of-type {                                                                                           
-      margin: 0 0 8px;                                                                                                         
-    }
-
-    .password_hint ul {
-      list-style: none;
-      margin-top: 8px;
-      padding-left: 10px;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 4px 12px;
-    }
-
-    .password_hint ul li {
-      display: flex;
-      align-items: center;
-      gap: 60px;
-    }
-
-    .password_characters {
-      font-size: 0.85em;
-    }
-
-    .password_characters span {
-      letter-spacing: 0.5em;
-    }
-
     .error_label {
       color: #f44336;
       font-size: 0.75rem;
@@ -80,18 +30,6 @@
 
   }
 
-  .sr_only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-
   .help_link {
     margin: 1.5rem 0 0;
     text-align: center;
diff --git a/resources/js/signup/signup.js b/resources/js/signup/signup.js
index 1d595e2a..488af0eb 100644
--- a/resources/js/signup/signup.js
+++ b/resources/js/signup/signup.js
@@ -8,13 +8,19 @@ import CardContent from "@material-ui/core/CardContent";
 import Container from "@material-ui/core/Container";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Grid from "@material-ui/core/Grid";
-import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
-import MenuItem from "@material-ui/core/MenuItem";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Visibility from "@material-ui/icons/Visibility";
+import VisibilityOff from "@material-ui/icons/VisibilityOff";
+import CheckCircle from "@material-ui/icons/CheckCircle";
+import Cancel from "@material-ui/icons/Cancel";
+import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked";
 import PasswordStrengthBar from "react-password-strength-bar";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
-import Select from "@material-ui/core/Select";
+import Autocomplete from "@material-ui/lab/Autocomplete";
 import Swal from "sweetalert2";
 import {MuiThemeProvider, createTheme} from "@material-ui/core/styles";
 import {useFormik} from "formik";
@@ -44,6 +50,7 @@ const SignUpPage = ({
   const formEl = useRef(null);
   const captcha = useRef(null);
   const [captchaConfirmation, setCaptchaConfirmation] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     if (signUpError) {
@@ -99,6 +106,8 @@ const SignUpPage = ({
     }
   };
 
+  const passwordRequirementItems = passwordPolicy.shape_list.split(",").map(s => s.trim());
+
   return (
     <Container component="main" maxWidth="xs" className={styles.main_container}>
       <CssBaseline />
@@ -117,25 +126,25 @@ const SignUpPage = ({
       >
         <Card className={styles.signup_container} variant="outlined">
           <CardHeader
-            title="Register"
-            subheader="Create your account. It's free and only takes a minute."
+            title="Create your FNid."
+            subheader="One identity for every FNTECH event you attend."
           />
           <CardContent>
             <Grid
               container
               direction="column"
-              spacing={2}
+              spacing={1}
               justifyContent="center"
             >
               <Grid item spacing={2} container direction="row">
                 <Grid item xs={6}>
+                  <label htmlFor="first_name" className={styles.field_label}>First Name</label>
                   <TextField
                     id="first_name"
                     name="first_name"
                     variant="outlined"
                     fullWidth
                     size="small"
-                    label="First Name"
                     inputProps={{ maxLength: 100 }}
                     autoFocus={true}
                     value={formik.values.first_name}
@@ -150,13 +159,13 @@ const SignUpPage = ({
                   />
                 </Grid>
                 <Grid item xs={6}>
+                  <label htmlFor="last_name" className={styles.field_label}>Last Name</label>
                   <TextField
                     id="last_name"
                     name="last_name"
                     variant="outlined"
                     fullWidth
                     size="small"
-                    label="Last Name"
                     inputProps={{ maxLength: 100 }}
                     value={formik.values.last_name}
                     onChange={formik.handleChange}
@@ -171,6 +180,7 @@ const SignUpPage = ({
                 </Grid>
               </Grid>
               <Grid item>
+                <label htmlFor="email" className={styles.field_label}>Email</label>
                 <TextField
                   id="email"
                   name="email"
@@ -178,7 +188,6 @@ const SignUpPage = ({
                   variant="outlined"
                   fullWidth
                   size="small"
-                  label="Email Address"
                   inputProps={{ maxLength: 255 }}
                   value={formik.values.email}
                   onChange={formik.handleChange}
@@ -187,48 +196,39 @@ const SignUpPage = ({
                 />
               </Grid>
               <Grid item>
-                <Select
+                <label htmlFor="country_iso_code" className={styles.field_label}>Country</label>
+                <Autocomplete
                   id="country_iso_code"
-                  name="country_iso_code"
-                  variant="outlined"
-                  fullWidth
-                  size="small"
-                  value={formik.values.country_iso_code}
-                  displayEmpty
-                  onChange={formik.handleChange}
-                  className={styles.countries}
-                  error={
-                    formik.touched.country_iso_code &&
-                    Boolean(formik.errors.country_iso_code)
-                  }
-                >
-                  <MenuItem value="">
-                    <span className={styles.countries_empty_text}>
-                      Select a country
-                    </span>
-                  </MenuItem>
-                  {countries.map((country) => (
-                    <MenuItem key={country.value} value={country.value}>
-                      {country.text}
-                    </MenuItem>
-                  ))}
-                </Select>
-                {formik.touched.country_iso_code &&
-                  formik.errors.country_iso_code && (
-                    <div className={styles.error_label}>
-                      {formik.errors.country_iso_code}
-                    </div>
+                  options={countries}
+                  getOptionLabel={(option) => option.text || ""}
+                  getOptionSelected={(option, value) => option.value === value.value}
+                  value={countries.find(c => c.value === formik.values.country_iso_code) || null}
+                  onChange={(_, selected) => {
+                    formik.setFieldValue("country_iso_code", selected ? selected.value : "");
+                  }}
+                  onBlur={() => formik.setFieldTouched("country_iso_code", true)}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      name="country_iso_code"
+                      variant="outlined"
+                      size="small"
+                      fullWidth
+                      error={formik.touched.country_iso_code && Boolean(formik.errors.country_iso_code)}
+                      helperText={formik.touched.country_iso_code && formik.errors.country_iso_code}
+                    />
                   )}
+                />
               </Grid>
               <Grid item xs={12}>
+                <label htmlFor="password" className={styles.field_label}>Password</label>
                 <TextField
                   id="password"
                   name="password"
-                  type="password"
+                  type={showPassword ? "text" : "password"}
                   variant="outlined"
                   fullWidth
                   size="small"
-                  label="Password"
                   inputProps={{ maxLength: passwordPolicy.max_length }}
                   value={formik.values.password}
                   onChange={formik.handleChange}
@@ -236,6 +236,20 @@ const SignUpPage = ({
                     formik.touched.password && Boolean(formik.errors.password)
                   }
                   helperText={formik.touched.password && formik.errors.password}
+                  InputProps={{
+                      endAdornment: (
+                          <InputAdornment position="end">
+                              <IconButton
+                                  onClick={() => setShowPassword(!showPassword)}
+                                  edge="end"
+                                  size="small"
+                                  aria-label={showPassword ? "Hide password" : "Show password"}
+                              >
+                                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                              </IconButton>
+                          </InputAdornment>
+                      )
+                  }}
                 />
                 {formik.values.password && (
                   <PasswordStrengthBar
@@ -245,6 +259,7 @@ const SignUpPage = ({
                 )}
               </Grid>
               <Grid item xs={12}>
+                <label htmlFor="password_confirmation" className={styles.field_label}>Confirm password</label>
                 <TextField
                   id="password_confirmation"
                   name="password_confirmation"
@@ -252,7 +267,6 @@ const SignUpPage = ({
                   variant="outlined"
                   fullWidth
                   size="small"
-                  label="Confirm Password"
                   inputProps={{ maxLength: passwordPolicy.max_length }}
                   value={formik.values.password_confirmation}
                   onChange={formik.handleChange}
@@ -264,14 +278,37 @@ const SignUpPage = ({
                     formik.touched.password_confirmation &&
                     formik.errors.password_confirmation
                   }
+                  InputProps={{
+                      endAdornment: (
+                          <InputAdornment position="end">
+                              {!formik.values.password_confirmation
+                                  ? <RadioButtonUnchecked style={{ color: '#ccc' }} />
+                                  : formik.values.password_confirmation === formik.values.password && formik.values.password
+                                      ? <CheckCircle style={{ color: '#2e7d32' }} />
+                                      : <Cancel style={{ color: '#c62828', opacity: 0.6 }} />
+                              }
+                              <span className={styles.sr_only} aria-live="polite">
+                                  {!formik.values.password_confirmation
+                                      ? ""
+                                      : formik.values.password_confirmation === formik.values.password && formik.values.password
+                                          ? "Passwords match"
+                                          : "Passwords do not match"
+                                  }
+                              </span>
+                          </InputAdornment>
+                      )
+                  }}
                 />
               </Grid>
               <Grid item className={styles.password_hint}>
-                <InfoOutlinedIcon fontSize="small" />
-                &nbsp;
-                <Typography variant="body2">
-                    <div dangerouslySetInnerHTML={{ __html: `The Password must be ${passwordPolicy.min_length}–${passwordPolicy.max_length} characters, and ${passwordPolicy.shape_warning}` }} />
-                </Typography>
+                <p>Your password must include:</p>
+                <ul>
+                  <li key="length">{passwordPolicy.min_length}–{passwordPolicy.max_length} characters</li>
+                  {passwordRequirementItems.map((item, index) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+                <p className={styles.password_characters}>Allowed: <span>{passwordPolicy.allowed_special_characters_text}</span></p>
               </Grid>
               <Grid item container alignItems="center" justifyContent="center">
                 <Grid container item justify='center'>
@@ -292,19 +329,25 @@ const SignUpPage = ({
                 </Grid>
                 {codeOfConductUrl && (
                   <Grid container item justify='center'>
-                    <Checkbox
-                      id="agree_code_of_conduct"
-                      name="agree_code_of_conduct"
-                      value={formik.values.agree_code_of_conduct}
-                      onChange={formik.handleChange}
-                      color="default"
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          id="agree_code_of_conduct"
+                          name="agree_code_of_conduct"
+                          value={formik.values.agree_code_of_conduct}
+                          onChange={formik.handleChange}
+                          color="default"
+                        />
+                      }
+                      label={
+                        <span>
+                          I&nbsp;agree&nbsp;to&nbsp;the&nbsp;
+                          <a href={codeOfConductUrl} target="_blank">
+                            {tenantName} Community Code of Conduct
+                          </a>
+                        </span>
+                      }
                     />
-                    <p>
-                      I&nbsp;agree&nbsp;to&nbsp;the&nbsp;
-                      <a href={codeOfConductUrl} target="_blank">
-                        {tenantName} Community Code of Conduct
-                      </a>&nbsp;?
-                    </p>
                     <div className={styles.error_label}>
                       {formik.errors.agree_code_of_conduct}
                     </div>
@@ -318,8 +361,13 @@ const SignUpPage = ({
                     disableElevation
                     fullWidth
                     type="submit"
+                    disabled={
+                        !!formik.errors.password ||
+                        !formik.values.password_confirmation ||
+                        formik.values.password_confirmation !== formik.values.password
+                    }
                   >
-                    Register Now
+                    Create FNid
                   </Button>
                 </Grid>
               </Grid>
@@ -346,7 +394,7 @@ const SignUpPage = ({
       </form>
       <div className={styles.footer}>
         <Typography variant="body2">
-          Already have an account?{" "}
+          Already have an FNid?{" "}
           <a target="_self" href={signInAction}>
             Sign in
           </a>
diff --git a/resources/js/signup/signup.module.scss b/resources/js/signup/signup.module.scss
index 09c03c5d..17863eb9 100644
--- a/resources/js/signup/signup.module.scss
+++ b/resources/js/signup/signup.module.scss
@@ -1,51 +1,29 @@
 @import "../../styles/global.scss";
+@import "../../styles/auth.scss";
 
 .main_container {
-  margin-top: 5%;
-  margin-bottom: 10%;
-  max-width: 544px !important;
 
-  a {
-    color: $base-color-dark;
-  }
-
-  .title_container {
-    .app_logo {
-      display: flex;
-      max-width: 40%;
-      margin: auto;
-      padding-bottom: 40px;
-    }
+  .field_label {
+    display: block;
+    font-size: 0.85rem;
+    margin-bottom: 4px;
+    color: $text-color-dark;
   }
 
   .signup_container {
     border: solid 1px $border-color;
     color: $text-color-dark;
     background-color: white;
+    padding: 16px;
 
     .turnstile {
-      margin-top: 10px;
-      margin-bottom: 10px;
       text-align: center;
     }
 
     .button {
       width: 380px;
       color: white;
-      background-color: $base-color-dark;
-    }
-
-    .password_hint {
-      display: flex;
-      color: $hint-text-color;
-      vertical-align: middle;
-    }
-
-    .countries {
-      height: 40px !important;
-      &_empty_text {
-        color: $hint-text-color;
-      }
+      background-color: black;
     }
 
     .error_label {
diff --git a/resources/styles/auth.scss b/resources/styles/auth.scss
new file mode 100644
index 00000000..3202c93a
--- /dev/null
+++ b/resources/styles/auth.scss
@@ -0,0 +1,67 @@
+@import "global.scss";
+
+.main_container {
+  margin-top: 5%;
+  margin-bottom: 10%;
+  max-width: 544px !important;
+  font-weight: 500;
+
+  a {
+    color: $base-color-dark;
+  }
+
+  .title_container {
+    .app_logo {
+      display: flex;
+      max-width: 40%;
+      margin: auto;
+      padding-bottom: 40px;
+    }
+  }
+
+  .sr_only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .password_hint {
+    color: $hint-text-color;
+    background-color: #fafafa;
+    margin: 8px 8px;
+  }
+
+  .password_hint p:first-of-type {                                                                                           
+    margin: 0 0 8px;                                                                                                         
+  }
+
+  .password_hint ul {
+    list-style: none;
+    margin-top: 8px;
+    padding-left: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4px 12px;
+  }
+
+  .password_hint ul li {
+    display: flex;
+    align-items: center;
+    gap: 60px;
+  }
+
+  .password_characters {
+    font-size: 0.85em;
+  }
+
+  .password_characters span {
+    letter-spacing: 0.5em;
+  }
+
+}
\ No newline at end of file
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 96f22ccc..b0cd125f 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -28,7 +28,9 @@
             max_length: {{ Config::get("auth.password_max_length") }},
             shape_pattern: '{{ Config::get("auth.password_shape_pattern") }}',
             allowed_special_characters: '{{ Config::get("auth.password_allowed_special_characters") }}',
-            shape_warning: '{{ Config::get("auth.password_shape_warning") }}'
+            allowed_special_characters_text: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters_text")) }},
+            shape_warning: '{{ Config::get("auth.password_shape_warning") }}',
+            shape_list: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_list")) }}
         }
         @if ($errors->any())
                 @foreach($errors->all() as $error)
diff --git a/start_local_server.sh b/start_local_server.sh
index 0535f4b8..4255ad47 100755
--- a/start_local_server.sh
+++ b/start_local_server.sh
@@ -5,7 +5,7 @@ export DOCKER_SCAN_SUGGEST=false
 docker compose run --rm app composer install
 docker compose run --rm app php artisan doctrine:migrations:migrate --no-interaction
 docker compose run --rm app php artisan db:seed --force
-docker compose run --rm app php artisan idp:create-super-admin test@test.com 1Qaz2wsx!
+docker compose run --rm app php artisan idp:create-super-admin test@test.com '1Qaz2wsx!9'
 docker compose run --rm app yarn install
 docker compose run --rm app yarn build
 docker compose up -d

From 96d13c2788f54b0d2589f55bd1309be6ab6664c6 Mon Sep 17 00:00:00 2001
From: gbutler <mulldug@cranklever.com>
Date: Fri, 14 Aug 2026 09:12:38 -0500
Subject: [PATCH 2/3] fix(auth): harden signup form country and warning
 serialization

- Remove name from Autocomplete's visible TextField and add a hidden
  input bound to formik.values.country_iso_code so the controller
  receives the ISO code rather than the displayed country name
- Wrap shape_warning in Js::from() in register.blade.php to prevent
  JS parse errors from apostrophes in the warning text
---
 resources/js/signup/signup.js           | 2 +-
 resources/views/auth/register.blade.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/signup/signup.js b/resources/js/signup/signup.js
index 488af0eb..938c6f3c 100644
--- a/resources/js/signup/signup.js
+++ b/resources/js/signup/signup.js
@@ -210,7 +210,6 @@ const SignUpPage = ({
                   renderInput={(params) => (
                     <TextField
                       {...params}
-                      name="country_iso_code"
                       variant="outlined"
                       size="small"
                       fullWidth
@@ -219,6 +218,7 @@ const SignUpPage = ({
                     />
                   )}
                 />
+                <input type="hidden" name="country_iso_code" value={formik.values.country_iso_code} />
               </Grid>
               <Grid item xs={12}>
                 <label htmlFor="password" className={styles.field_label}>Password</label>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index b0cd125f..946a50f4 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -29,7 +29,7 @@
             shape_pattern: '{{ Config::get("auth.password_shape_pattern") }}',
             allowed_special_characters: '{{ Config::get("auth.password_allowed_special_characters") }}',
             allowed_special_characters_text: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters_text")) }},
-            shape_warning: '{{ Config::get("auth.password_shape_warning") }}',
+            shape_warning: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_warning")) }},
             shape_list: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_list")) }}
         }
         @if ($errors->any())

From 0add007dd3b473c95777074ff80cfa52656d84d7 Mon Sep 17 00:00:00 2001
From: gbutler <mulldug@cranklever.com>
Date: Thu, 20 Aug 2026 12:26:25 -0500
Subject: [PATCH 3/3] fix(auth): fix disabled button styling and password
 policy JS serialization

Move .button into auth.scss at the .main_container level so the
.button:global(.Mui-disabled) override wins by specificity (0,3,0 vs
0,2,0) rather than depending on source order.

Harden shape_pattern and allowed_special_characters in register.blade.php
with Js::from(), matching the treatment already applied to the other
three passwordPolicy strings. {{ }} encodes & as &amp; inside a script
block, which corrupted the regex character class and caused the client
to accept passwords the server rejects. Add PasswordPolicyRenderingTest
to guard against this class of rendering bug.
---
 .../reset_password/reset_password.module.scss |  6 ----
 resources/js/signup/signup.module.scss        |  6 ----
 resources/styles/auth.scss                    | 11 +++++++
 resources/views/auth/register.blade.php       |  4 +--
 tests/PasswordPolicyRenderingTest.php         | 29 +++++++++++++++++++
 5 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/resources/js/reset_password/reset_password.module.scss b/resources/js/reset_password/reset_password.module.scss
index 829c44f5..77fa9557 100644
--- a/resources/js/reset_password/reset_password.module.scss
+++ b/resources/js/reset_password/reset_password.module.scss
@@ -16,12 +16,6 @@
       text-align: center;
     }
 
-    .button {
-      width: 380px;
-      color: white;
-      background-color: $base-color-dark;
-    }
-
     .error_label {
       color: #f44336;
       font-size: 0.75rem;
diff --git a/resources/js/signup/signup.module.scss b/resources/js/signup/signup.module.scss
index 17863eb9..b548511e 100644
--- a/resources/js/signup/signup.module.scss
+++ b/resources/js/signup/signup.module.scss
@@ -20,12 +20,6 @@
       text-align: center;
     }
 
-    .button {
-      width: 380px;
-      color: white;
-      background-color: black;
-    }
-
     .error_label {
       color: #f44336;
       font-size: 0.75rem;
diff --git a/resources/styles/auth.scss b/resources/styles/auth.scss
index 3202c93a..51cf9a56 100644
--- a/resources/styles/auth.scss
+++ b/resources/styles/auth.scss
@@ -64,4 +64,15 @@
     letter-spacing: 0.5em;
   }
 
+  .button {
+    width: 380px;
+    color: white;
+    background-color: black;
+
+    &:global(.Mui-disabled) {
+      background-color: rgba(0, 0, 0, 0.12);
+      color: rgba(0, 0, 0, 0.26);
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 946a50f4..774149d3 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -26,8 +26,8 @@
         const passwordPolicy = {
             min_length: {{ Config::get("auth.password_min_length") }},
             max_length: {{ Config::get("auth.password_max_length") }},
-            shape_pattern: '{{ Config::get("auth.password_shape_pattern") }}',
-            allowed_special_characters: '{{ Config::get("auth.password_allowed_special_characters") }}',
+            shape_pattern: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_pattern")) }},
+            allowed_special_characters: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters")) }},
             allowed_special_characters_text: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters_text")) }},
             shape_warning: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_warning")) }},
             shape_list: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_list")) }}
diff --git a/tests/PasswordPolicyRenderingTest.php b/tests/PasswordPolicyRenderingTest.php
index 07de2d57..bf6d9caf 100644
--- a/tests/PasswordPolicyRenderingTest.php
+++ b/tests/PasswordPolicyRenderingTest.php
@@ -49,4 +49,33 @@ public function test_rendered_reset_pattern_agrees_with_server_pattern(): void
             );
         }
     }
+
+    public function test_rendered_signup_pattern_agrees_with_server_pattern(): void
+    {
+        $html = view('auth.register', [
+            'countries'    => [],
+            'client_id'    => '',
+            'redirect_uri' => '',
+            'errors'       => new ViewErrorBag(),
+        ])->render();
+
+        $this->assertSame(1, preg_match('/shape_pattern:\s*(.+?),\R/', $html, $m));
+
+        // Resolve the \uXXXX escapes a JS parser would resolve in the literal.
+        // Trim both single quotes ({{ }} format) and double quotes (Js::from format).
+        $client = preg_replace_callback(
+            '/\\\\u([0-9a-fA-F]{4})/',
+            fn ($u) => mb_chr(hexdec($u[1])),
+            trim($m[1], "\"'")
+        );
+        $server = Config::get('auth.password_shape_pattern');
+
+        foreach (['Passwordma1', 'Passw0rdabc', ';Passw0rdaa', 'Valid1Pass!'] as $probe) {
+            $this->assertSame(
+                (bool) preg_match("/{$server}/", $probe),
+                (bool) preg_match("/{$client}/", $probe),
+                "rendered and server patterns disagree on '{$probe}'"
+            );
+        }
+    }
 }