UX: Visual adjustments to login/signup forms (#28680)

This adds several improvements to the signup/login forms. Some of them include:

- Added a minimal signup progress bar design for mobile.
- Made the signup/login modals full height on mobile.
- Improved the activation, account creation, and login-required pages on mobile.
- Removed the subheader and emoji from the welcome component.
- Removed most input instructions.
- Used consistent font size for text below the inputs.
- Displayed input instructions only when the field is focused.
- Improved the vertical alignment of input labels.
- Increased the spacing between inputs.
- Fixed label positioning for custom fields.
- Moved the "(optional)" text for the name input outside the instructions.
- Disabled buttons during login to prevent layout shifts.
- Reused the CTA component for modals as well.
- Matched the invite CTA styles with the signup form.

---------

Co-authored-by: Jan Cernik <jancernik12@gmail.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/app/components/modal/create-account.hbs

@@ -25,7 +25,6 @@
       <WelcomeHeader
         id="create-account-title"
         @header={{i18n "create_account.header_title"}}
-        @subheader={{i18n "create_account.subheader_title"}}
       >
         <PluginOutlet
           @name="create-account-header-bottom"
@@ -55,15 +54,16 @@
             <label class="alt-placeholder" for="new-account-email">
               {{i18n "user.email.title"}}
             </label>
-            <InputTip
+            {{#if this.emailValidation.reason}}
-              @validation={{this.emailValidation}}
+              <InputTip
-              id="account-email-validation"
+                @validation={{this.emailValidation}}
-            />
+                id="account-email-validation"
-            {{#unless this.emailValidation.reason}}
+              />
+            {{else}}
               <span class="more-info" id="account-email-validation-more-info">
                 {{i18n "user.email.instructions"}}
               </span>
-            {{/unless}}
+            {{/if}}
           </div>
 
           <div class="input-group create-account__username">
@@ -86,11 +86,6 @@
               @validation={{this.usernameValidation}}
               id="username-validation"
             />
-            {{#unless this.usernameValidation.reason}}
-              <span class="more-info" id="username-validation-more-info">
-                {{i18n "user.username.instructions"}}
-              </span>
-            {{/unless}}
           </div>
 
           <PluginOutlet
@@ -126,11 +121,6 @@
                     @validation={{this.passwordValidation}}
                     id="password-validation"
                   />
-                  {{#unless this.passwordValidation.reason}}
-                    <span class="more-info" id="password-validation-more-info">
-                      {{this.passwordInstructions}}
-                    </span>
-                  {{/unless}}
                   <div
                     class={{concat-class
                       "caps-lock-warning"
@@ -207,18 +197,13 @@
                 class={{value-entered this.model.accountName}}
               />
               <label class="alt-placeholder" for="new-account-name">
-                {{i18n "user.name.title"}}
+                {{this.nameTitle}}
               </label>
 
               <InputTip
                 @validation={{this.nameValidation}}
                 id="fullname-validation"
               />
-              {{#unless this.nameValidation.reason}}
-                <span class="more-info" id="fullname-validation-more-info">
-                  {{this.nameInstructions}}
-                </span>
-              {{/unless}}
             {{/if}}
           </div>
 
@@ -250,34 +235,13 @@
 
         {{#if this.site.desktopView}}
           <div class="d-modal__footer">
-            {{#if this.disclaimerHtml}}
+            <SignupPageCta
-              <div class="disclaimer">
+              @formSubmitted={{this.formSubmitted}}
-                {{html-safe this.disclaimerHtml}}
+              @hasAuthOptions={{this.hasAuthOptions}}
-              </div>
+              @createAccount={{this.createAccount}}
-            {{/if}}
+              @submitDisabled={{this.submitDisabled}}
-            <div class="d-modal__footer-buttons">
+              @disclaimerHtml={{this.disclaimerHtml}}
-              <DButton
+            />
-                @action={{this.createAccount}}
-                @disabled={{this.submitDisabled}}
-                @label="create_account.title"
-                @isLoading={{this.formSubmitted}}
-                class="btn-large btn-primary"
-              />
-
-              {{#unless this.hasAuthOptions}}
-                <hr />
-                <div class="already-have-account">
-                  {{i18n "create_account.already_have_account"}}
-                </div>
-                <DButton
-                  @action={{route-action "showLogin"}}
-                  @disabled={{this.formSubmitted}}
-                  @label="log_in"
-                  id="login-link"
-                  class="btn-large btn-flat"
-                />
-              {{/unless}}
-            </div>
           </div>
 
           <PluginOutlet
@@ -307,34 +271,12 @@
 
   <:footer>
     {{#if (and this.showCreateForm this.site.mobileView)}}
-      {{#if this.disclaimerHtml}}
+      <SignupPageCta
-        <div class="disclaimer">
+        @formSubmitted={{this.formSubmitted}}
-          {{html-safe this.disclaimerHtml}}
+        @hasAuthOptions={{this.hasAuthOptions}}
-        </div>
+        @createAccount={{this.createAccount}}
-      {{/if}}
+        @submitDisabled={{this.submitDisabled}}
-      <div class="d-modal__footer-buttons">
+        @disclaimerHtml={{this.disclaimerHtml}}
-        <DButton
-          @action={{this.createAccount}}
-          @disabled={{this.submitDisabled}}
-          @label="create_account.title"
-          @isLoading={{this.formSubmitted}}
-          class="btn-large btn-primary"
-        />
-
-        {{#unless this.hasAuthOptions}}
-          <DButton
-            @action={{route-action "showLogin"}}
-            @disabled={{this.formSubmitted}}
-            @label="log_in"
-            id="login-link"
-            class="btn-large btn-flat"
-          />
-        {{/unless}}
-      </div>
-
-      <PluginOutlet
-        @name="create-account-after-modal-footer"
-        @connectorTagName="div"
       />
     {{/if}}
   </:footer>

app/assets/javascripts/discourse/app/components/modal/login.hbs

@@ -27,10 +27,7 @@
       </div>
     {{else}}
       {{#if this.site.mobileView}}
-        <WelcomeHeader
+        <WelcomeHeader @header={{i18n "login.header_title"}}>
-          @header={{i18n "login.header_title"}}
-          @subheader={{i18n "login.subheader_title"}}
-        >
           <PluginOutlet
             @name="login-header-bottom"
             @outletArgs={{hash createAccount=this.createAccount}}
@@ -48,10 +45,7 @@
       {{#if this.canLoginLocal}}
         <div class={{if this.site.desktopView "login-left-side"}}>
           {{#if this.site.desktopView}}
-            <WelcomeHeader
+            <WelcomeHeader @header={{i18n "login.header_title"}}>
-              @header={{i18n "login.header_title"}}
-              @subheader={{i18n "login.subheader_title"}}
-            >
               <PluginOutlet
                 @name="login-header-bottom"
                 @outletArgs={{hash createAccount=this.createAccount}}
@@ -82,7 +76,7 @@
           />
           {{#if this.site.desktopView}}
             <div class="d-modal__footer">
-              <Modal::Login::Footer
+              <LoginPageCta
                 @canLoginLocal={{this.canLoginLocal}}
                 @showSecurityKey={{this.showSecurityKey}}
                 @login={{this.triggerLogin}}
@@ -101,10 +95,7 @@
       {{#if (and this.showLoginButtons this.site.desktopView)}}
         {{#unless this.canLoginLocal}}
           <div class="login-left-side">
-            <WelcomeHeader
+            <WelcomeHeader @header={{i18n "login.header_title"}} />
-              @header={{i18n "login.header_title"}}
-              @subheader={{i18n "login.subheader_title"}}
-            />
           </div>
         {{/unless}}
         {{#if this.hasAtLeastOneLoginButton}}
@@ -123,7 +114,7 @@
   <:footer>
     {{#if this.site.mobileView}}
       {{#unless this.hasNoLoginOptions}}
-        <Modal::Login::Footer
+        <LoginPageCta
           @canLoginLocal={{this.canLoginLocal}}
           @showSecurityKey={{this.showSecurityKey}}
           @login={{this.triggerLogin}}

app/assets/javascripts/discourse/app/components/modal/login.js

@@ -105,9 +105,7 @@ export default class Login extends Component {
   }
 
   get showSignupLink() {
-    return (
+    return this.args.model.canSignUp && !this.showSecondFactor;
-      this.args.model.canSignUp && !this.loggingIn && !this.showSecondFactor
-    );
   }
 
   get adminLoginPath() {

app/assets/javascripts/discourse/app/components/modal/login/footer.hbs

@@ -1,26 +0,0 @@
-{{#if @canLoginLocal}}
-  {{#unless @showSecurityKey}}
-    <DButton
-      @action={{@login}}
-      id="login-button"
-      form="login-form"
-      @icon="unlock"
-      @label={{@loginButtonLabel}}
-      @disabled={{@loginDisabled}}
-      class="btn btn-large btn-primary"
-      tabindex={{unless @showSecondFactor "2"}}
-    />
-  {{/unless}}
-
-  {{#if @showSignupLink}}
-    <DButton
-      class="btn-large btn-flat"
-      id="new-account-link"
-      @action={{@createAccount}}
-      @label="create_account.title"
-      tabindex="3"
-    />
-  {{/if}}
-{{/if}}
-<ConditionalLoadingSpinner @condition={{@loggingIn}} @size="small" />
-<PluginOutlet @name="login-after-modal-footer" @connectorTagName="div" />

app/assets/javascripts/discourse/app/components/signup-progress-bar.gjs

@@ -10,6 +10,7 @@ import I18n from "discourse-i18n";
 
 export default class SignupProgressBar extends Component {
   @service siteSettings;
+  @service site;
   @tracked steps = [];
 
   constructor() {
@@ -48,25 +49,22 @@ export default class SignupProgressBar extends Component {
     {{#if @step}}
       <div class="signup-progress-bar">
         {{#each this.steps as |step index|}}
-          <div class="signup-progress-bar__segment">
+          <div
-            <div
+            class={{concatClass
-              class={{concatClass
+              "signup-progress-bar__segment"
-                "signup-progress-bar__step"
+              (concat "--" (this.getStepState index))
-                (concat "--" (this.getStepState index))
+            }}
-              }}
+          >
-            >
+            <div class="signup-progress-bar__step">
               <div class="signup-progress-bar__circle">
-                {{#if (eq (this.getStepState index) "completed")}}
+                {{#if this.site.desktopView}}
-                  {{dIcon "check"}}
+                  {{#if (eq (this.getStepState index) "completed")}}
+                    {{dIcon "check"}}
+                  {{/if}}
                 {{/if}}
               </div>
               {{#unless (eq index this.lastStepIndex)}}
-                <span
+                <span class="signup-progress-bar__line"></span>
-                  class={{concatClass
-                    "signup-progress-bar__line"
-                    (concat "--" (this.getStepState index))
-                  }}
-                ></span>
               {{/unless}}
             </div>
             <span class="signup-progress-bar__step-text">

app/assets/javascripts/discourse/app/components/welcome-header.gjs

@@ -1,12 +1,6 @@
-import { wavingHandURL } from "discourse/lib/waving-hand-url";
-
 const WelcomeHeader = <template>
   <div class="login-welcome-header" ...attributes>
     <h1 class="login-title">{{@header}}</h1>
-    <img src={{(wavingHandURL)}} alt="" class="waving-hand" />
-    {{#if @subheader}}
-      <p class="login-subheader">{{@subheader}}</p>
-    {{/if}}
     {{yield}}
   </div>
 </template>;

app/assets/javascripts/discourse/app/controllers/invites-show.js

@@ -70,15 +70,6 @@ export default class InvitesShowController extends Controller.extend(
     });
   }
 
-  @discourseComputed("existingUserId")
-  subheaderMessage(existingUserId) {
-    if (existingUserId) {
-      return I18n.t("invites.existing_user_can_redeem");
-    } else {
-      return I18n.t("create_account.subheader_title");
-    }
-  }
-
   @discourseComputed("email")
   yourEmailMessage(email) {
     return I18n.t("invites.your_email", { email });

app/assets/javascripts/discourse/app/mixins/name-validation.js

@@ -6,11 +6,11 @@ import I18n from "discourse-i18n";
 
 export default Mixin.create({
   @discourseComputed()
-  nameInstructions() {
+  nameTitle() {
     return I18n.t(
       this.siteSettings.full_name_required
-        ? "user.name.instructions_required"
+        ? "user.name.title"
-        : "user.name.instructions"
+        : "user.name.title_optional"
     );
   },
 

app/assets/javascripts/discourse/app/templates/activate-account.gjs

@@ -84,7 +84,7 @@ export default RouteTemplate(
 
     <template>
       {{bodyClass "activate-account-page"}}
-      {{hideApplicationHeaderButtons "search" "login" "signup"}}
+      {{hideApplicationHeaderButtons "search" "login" "signup" "menu"}}
       {{hideApplicationSidebar}}
       {{#if this.errorMessage}}
         <div class="alert alert-error">
@@ -110,10 +110,9 @@ export default RouteTemplate(
               {{else}}
                 <p>{{i18n "user.activate_account.please_continue"}}</p>
                 <DButton
-                  class="continue-button"
+                  class="btn-primary continue-button"
                   @translatedLabel={{i18n
                     "user.activate_account.continue_button"
-                    site_name=this.siteSettings.title
                   }}
                   @action={{this.loadHomepage}}
                 />

app/assets/javascripts/discourse/app/templates/invites/show.hbs

@@ -3,13 +3,10 @@
 {{hide-application-sidebar}}
 <section>
   <div class="container invites-show clearfix">
-    {{#unless this.externalAuthsOnly}}
+    {{#unless (or this.externalAuthsOnly this.existingUserId)}}
       <SignupProgressBar @step={{if this.successMessage "activate" "signup"}} />
     {{/unless}}
-    <WelcomeHeader
+    <WelcomeHeader @header={{this.welcomeTitle}} />
-      @header={{this.welcomeTitle}}
-      @subheader={{unless this.successMessage this.subheaderMessage}}
-    />
 
     <div class={{if this.successMessage "invite-success" "invite-form"}}>
       <div class="col-form">
@@ -85,9 +82,9 @@
                     id="account-email-validation"
                   />
                   {{#unless this.emailValidation.reason}}
-                    <div class="instructions">{{i18n
+                    <div class="instructions">
-                        "user.email.instructions"
+                      {{i18n "user.email.instructions"}}
-                      }}</div>
+                    </div>
                   {{/unless}}
                 </div>
               {{/if}}
@@ -108,11 +105,6 @@
                   @validation={{this.usernameValidation}}
                   id="username-validation"
                 />
-                {{#unless this.usernameValidation.reason}}
-                  <div class="instructions">{{i18n
-                      "user.username.instructions"
-                    }}</div>
-                {{/unless}}
               </div>
 
               {{#unless this.externalAuthsOnly}}
@@ -134,11 +126,6 @@
                         @validation={{this.passwordValidation}}
                         id="password-validation"
                       />
-                      {{#unless this.passwordValidation.reason}}
-                        <span
-                          class="more-info"
-                        >{{this.passwordInstructions}}</span>
-                      {{/unless}}
                       <div
                         class="caps-lock-warning
                           {{unless this.capsLockOn 'hidden'}}"
@@ -174,7 +161,10 @@
                   <label class="alt-placeholder" for="new-account-name">
                     {{i18n "invites.name_label"}}
                   </label>
-                  <div class="instructions">{{this.nameInstructions}}</div>
+                  <InputTip
+                    @validation={{this.nameValidation}}
+                    id="fullname-validation"
+                  />
                 </div>
               {{/if}}
 

app/assets/javascripts/discourse/app/templates/login.hbs

@@ -29,10 +29,7 @@
         </div>
       {{else}}
         {{#if this.site.mobileView}}
-          <WelcomeHeader
+          <WelcomeHeader @header={{i18n "login.header_title"}}>
-            @header={{i18n "login.header_title"}}
-            @subheader={{i18n "login.subheader_title"}}
-          >
             <PluginOutlet
               @name="login-header-bottom"
               @outletArgs={{hash createAccount=this.createAccount}}
@@ -50,10 +47,7 @@
         {{#if this.canLoginLocal}}
           <div class={{if this.site.desktopView "login-left-side"}}>
             {{#if this.site.desktopView}}
-              <WelcomeHeader
+              <WelcomeHeader @header={{i18n "login.header_title"}}>
-                @header={{i18n "login.header_title"}}
-                @subheader={{i18n "login.subheader_title"}}
-              >
                 <PluginOutlet
                   @name="login-header-bottom"
                   @outletArgs={{hash createAccount=this.createAccount}}
@@ -101,10 +95,7 @@
         {{#if (and this.showLoginButtons this.site.desktopView)}}
           {{#unless this.canLoginLocal}}
             <div class="login-left-side">
-              <WelcomeHeader
+              <WelcomeHeader @header={{i18n "login.header_title"}} />
-                @header={{i18n "login.header_title"}}
-                @subheader={{i18n "login.subheader_title"}}
-              />
             </div>
           {{/unless}}
           {{#if this.hasAtLeastOneLoginButton}}

app/assets/javascripts/discourse/app/templates/signup.hbs

@@ -21,7 +21,6 @@
       <WelcomeHeader
         id="create-account-title"
         @header={{i18n "create_account.header_title"}}
-        @subheader={{i18n "create_account.subheader_title"}}
       >
         <PluginOutlet
           @name="create-account-header-bottom"
@@ -51,15 +50,16 @@
             <label class="alt-placeholder" for="new-account-email">
               {{i18n "user.email.title"}}
             </label>
-            <InputTip
+            {{#if this.emailValidation.reason}}
-              @validation={{this.emailValidation}}
+              <InputTip
-              id="account-email-validation"
+                @validation={{this.emailValidation}}
-            />
+                id="account-email-validation"
-            {{#unless this.emailValidation.reason}}
+              />
+            {{else}}
               <span class="more-info" id="account-email-validation-more-info">
                 {{i18n "user.email.instructions"}}
               </span>
-            {{/unless}}
+            {{/if}}
           </div>
 
           <div class="input-group create-account__username">
@@ -82,11 +82,6 @@
               @validation={{this.usernameValidation}}
               id="username-validation"
             />
-            {{#unless this.usernameValidation.reason}}
-              <span class="more-info" id="username-validation-more-info">
-                {{i18n "user.username.instructions"}}
-              </span>
-            {{/unless}}
           </div>
 
           <PluginOutlet
@@ -122,11 +117,6 @@
                     @validation={{this.passwordValidation}}
                     id="password-validation"
                   />
-                  {{#unless this.passwordValidation.reason}}
-                    <span class="more-info" id="password-validation-more-info">
-                      {{this.passwordInstructions}}
-                    </span>
-                  {{/unless}}
                   <div
                     class={{concat-class
                       "caps-lock-warning"
@@ -203,18 +193,13 @@
                 class={{value-entered this.accountName}}
               />
               <label class="alt-placeholder" for="new-account-name">
-                {{i18n "user.name.title"}}
+                {{this.nameTitle}}
               </label>
 
               <InputTip
                 @validation={{this.nameValidation}}
                 id="fullname-validation"
               />
-              {{#unless this.nameValidation.reason}}
-                <span class="more-info" id="fullname-validation-more-info">
-                  {{this.nameInstructions}}
-                </span>
-              {{/unless}}
             {{/if}}
           </div>
 

app/assets/stylesheets/common/base/login-signup-page.scss

@@ -65,7 +65,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-bottom: 0.8em;
+    margin-bottom: 1em;
 
     input,
     .select-kit-header {
@@ -101,7 +101,7 @@
       position: absolute;
       pointer-events: none;
       left: 1em;
-      top: 10px;
+      top: 13px;
       box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
       transition: 0.2s ease all;
     }
@@ -116,7 +116,9 @@
       padding: 0 0.25em 0 0.25em;
       font-size: $font-down-1;
     }
-
+    .user-field.text label.control-label {
+      top: 13px;
+    }
     .user-field.text:focus-within,
     .user-field.dropdown:focus-within,
     .user-field.multiselect:focus-within {
@@ -135,6 +137,13 @@
     input.alt-placeholder:invalid {
       color: var(--primary);
     }
+    .user-field.dropdown,
+    .user-field.multiselect {
+      .more-info,
+      .instructions {
+        opacity: 1;
+      }
+    }
 
     #email-login-link {
       transition: opacity 0.5s;
@@ -196,17 +205,32 @@
   }
 
   .tip {
+    font-size: var(--font-down-1);
+    min-height: 1.4em;
+    display: block;
     &.bad {
       color: var(--danger);
-      display: block;
     }
   }
 
+  .toggle-password-mask span {
+    font-size: var(--font-down-1-rem);
+  }
+
   .more-info,
   .instructions {
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
-    min-height: 1.4em;
     overflow-wrap: anywhere;
+    transition: opacity 0.2s ease;
+    opacity: 0;
+  }
+
+  .input-group input:focus {
+    & ~ .more-info,
+    & ~ .instructions {
+      opacity: 1;
+    }
   }
 
   .caps-lock-warning {
@@ -224,6 +248,29 @@
   .inline-spinner {
     display: inline-flex;
   }
+
+  .invitation-cta {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    &__accept {
+      width: 100%;
+    }
+    &__info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: 0.5rem;
+      line-height: 1rem;
+      color: var(--primary-medium);
+    }
+    &__sign-in {
+      padding: 0;
+      height: 100%;
+      font-size: 1rem;
+    }
+  }
 }
 
 // Login page
@@ -296,9 +343,12 @@
       }
 
       .controls .checkbox-label {
+        display: flex;
+        align-items: center;
         input[type="checkbox"].ember-checkbox {
           width: 1em !important;
           min-width: unset;
+          margin-block: 0;
         }
       }
     }

app/assets/stylesheets/common/base/static-login.scss

@@ -36,8 +36,10 @@ body.static-login {
     padding: 2em;
     box-shadow: var(--shadow-card);
     border-radius: 5px;
-    display: grid;
+    display: flex;
-    place-items: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     &__text {
       order: 4;

app/assets/stylesheets/common/components/signup-progress-bar.scss

@@ -5,7 +5,6 @@ $progress-bar-icon-size: 0.8rem;
 .signup-progress-bar {
   width: 100%;
   display: flex;
-  color: var(--primary-low-mid);
   box-sizing: border-box;
   margin-bottom: 1.2em;
 
@@ -14,6 +13,7 @@ $progress-bar-icon-size: 0.8rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    color: var(--primary-low-mid);
 
     &:first-child .signup-progress-bar__circle {
       transform: translateX(50%);
@@ -29,7 +29,12 @@ $progress-bar-icon-size: 0.8rem;
     }
   }
 
+  &__step {
+    display: flex;
+  }
+
   &__step-text {
+    color: var(--primary-high);
     white-space: nowrap;
     width: fit-content;
     transform: translateX(calc(calc($progress-bar-circle-size / 2) - 50%));
@@ -43,10 +48,11 @@ $progress-bar-icon-size: 0.8rem;
         calc(calc($progress-bar-circle-size + $progress-bar-line-width) - 100%)
       );
     }
-  }
 
-  &__step {
+    .--active & {
-    display: flex;
+      font-weight: bold;
+      color: var(--primary);
+    }
   }
 
   &__line {
@@ -56,6 +62,10 @@ $progress-bar-icon-size: 0.8rem;
     height: $progress-bar-line-width;
     width: 100%;
     background-color: var(--primary-low-mid);
+
+    .--completed & {
+      background-color: var(--success);
+    }
   }
 
   &__circle {
@@ -70,27 +80,19 @@ $progress-bar-icon-size: 0.8rem;
     border-radius: 50%;
     border: $progress-bar-line-width solid var(--primary-low-mid);
     background-color: var(--secondary);
-  }
 
-  &__step.--completed {
+    .--active & {
-    color: var(--primary);
+      border-color: var(--success);
-
+      background: var(--success);
-    .signup-progress-bar__circle {
+      box-shadow: 0 0 1px 5px var(--success-low);
+    }
+    .--completed & {
       background-color: var(--success);
-      border: $progress-bar-line-width solid var(--success);
+      border-color: var(--success);
     }
   }
 
   &__line.--completed {
     background-color: var(--success);
   }
-
-  &__step.--active {
-    .signup-progress-bar__circle {
-      border: $progress-bar-line-width solid var(--success);
-    }
-    + .signup-progress-bar__step-text {
-      font-weight: bold;
-    }
-  }
 }

app/assets/stylesheets/common/modal/login-modal.scss

@@ -11,6 +11,7 @@
     &__container {
       position: relative;
       width: max-content;
+      width: 100%;
     }
     &__header {
       border-bottom: none;
@@ -63,7 +64,7 @@
   }
 
   #login-form {
-    margin: 3em 0 1.2em 0;
+    margin: 2em 0 1em 0;
     display: flex;
     flex-direction: column;
 
@@ -80,17 +81,32 @@
   }
 
   .tip {
+    font-size: var(--font-down-1);
+    min-height: 1.4em;
+    display: block;
     &.bad {
       color: var(--danger);
-      display: block;
     }
   }
 
+  .toggle-password-mask span {
+    font-size: var(--font-down-1-rem);
+  }
+
   .more-info,
   .instructions {
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
-    min-height: 1.4em;
     overflow-wrap: anywhere;
+    transition: opacity 0.2s ease;
+    opacity: 0;
+  }
+
+  .input-group input:focus {
+    & ~ .more-info,
+    & ~ .instructions {
+      opacity: 1;
+    }
   }
 
   .caps-lock-warning {
@@ -118,6 +134,46 @@
     }
   }
 
+  .login-page-cta,
+  .signup-page-cta {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__disclaimer {
+      color: var(--primary-medium);
+      margin-bottom: 1rem;
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+
+      button {
+        font-size: var(--font-0) !important;
+        width: 100%;
+      }
+    }
+    &__existing-account,
+    &__no-account-yet {
+      color: var(--primary-medium);
+      font-size: var(--font-down);
+      margin-bottom: 0.5rem;
+      text-align: center;
+      width: 100%;
+      &::before {
+        content: " ";
+        display: block;
+        height: 1px;
+        width: 100%;
+        background-color: var(--primary-low);
+        margin-block: 1rem;
+      }
+    }
+  }
+
   .desktop-view & {
     @media screen and (max-width: 767px) {
       // important to maintain narrow desktop widths
@@ -129,8 +185,9 @@
       .has-alt-auth {
         flex-direction: column;
         overflow: auto;
-        gap: 1em;
+        gap: 0;
-        .d-modal__footer {
+        .d-modal__footer,
+        .btn-social {
           font-size: var(--font-down-1);
         }
         .login-left-side {
@@ -151,6 +208,13 @@
     }
   }
 }
+
+.invites-show {
+  #account-email-validation:not(:has(*)) {
+    display: none;
+  }
+}
+
 /* end shared styles */
 
 .d-modal.create-account {
@@ -205,7 +269,7 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      margin-bottom: 0.8em;
+      margin-bottom: 1em;
       input,
       .select-kit-header {
         padding: 0.75em 0.77em;
@@ -236,7 +300,7 @@
         position: absolute;
         pointer-events: none;
         left: 1em;
-        top: 10px;
+        top: 13px;
         box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
         transition: 0.2s ease all;
       }
@@ -250,6 +314,9 @@
         padding: 0 0.25em 0 0.25em;
         font-size: $font-down-1;
       }
+      .user-field.text label.control-label {
+        top: 13px;
+      }
       .user-field.text:focus-within,
       .user-field.dropdown:focus-within,
       .user-field.multiselect:focus-within {
@@ -266,6 +333,13 @@
       input.alt-placeholder:invalid {
         color: var(--primary);
       }
+      .user-field.dropdown,
+      .user-field.multiselect {
+        .more-info,
+        .instructions {
+          opacity: 1;
+        }
+      }
 
       #email-login-link {
         transition: opacity 0.5s;
@@ -321,7 +395,6 @@
             font-size: 16px;
             position: absolute;
             pointer-events: none;
-            top: 12px;
             transition: 0.2s ease all;
             max-width: calc(100% - 2em);
             white-space: nowrap;
@@ -343,9 +416,12 @@
           box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
         }
         .controls .checkbox-label {
+          display: flex;
+          align-items: center;
           input[type="checkbox"].ember-checkbox {
             width: 1em !important;
             min-width: unset;
+            margin-block: 0;
           }
         }
       }

app/assets/stylesheets/desktop/login-signup-page.scss

@@ -45,7 +45,8 @@
       overflow: auto;
       gap: 0;
       .login-page-cta,
-      .signup-page-cta {
+      .signup-page-cta,
+      .btn-social {
         font-size: var(--font-down-1);
       }
       .login-left-side {

app/assets/stylesheets/mobile/_index.scss

@@ -28,6 +28,7 @@
 @import "push-notifications-mobile";
 @import "reviewables";
 @import "sidebar";
+@import "signup-progress-bar";
 @import "topic-list";
 @import "topic-post";
 @import "topic";

app/assets/stylesheets/mobile/components/welcome-header.scss

@@ -1,4 +1,6 @@
 .login-welcome-header {
+  box-sizing: border-box;
+
   .login-title {
     font-size: var(--font-up-5);
   }

app/assets/stylesheets/mobile/login-modal.scss

@@ -1,19 +1,57 @@
+.static-login {
+  #main-outlet-wrapper,
+  #main-outlet {
+    padding: 0;
+  }
+  .contents.body-page {
+    margin: 0;
+  }
+}
+.login-welcome {
+  gap: 2em;
+  height: 100svh;
+  width: 100svw;
+  box-sizing: border-box;
+
+  .body-page-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100%;
+  }
+}
+
+.d-modal.login-modal .d-modal__body {
+  margin-top: 3.75rem;
+}
+
 .d-modal.login-modal,
 .d-modal.create-account {
+  padding-bottom: var(--safe-area-inset-bottom);
   .d-modal {
     &__container {
+      height: 100svh;
+      max-height: unset;
       width: 100%;
     }
     &__body {
       flex-direction: column;
       gap: unset;
       padding-inline: 0.5rem;
+      padding-bottom: 1em;
+      outline: none;
     }
     &__footer {
+      padding: 1em 1.5rem;
       border-top: 1px solid var(--primary-low);
-      padding: 1rem;
-      font-size: var(--font-down-1);
     }
+    &__footer-buttons {
+      gap: 0.5em;
+    }
+  }
+
+  .login-title {
+    font-size: var(--font-up-4);
   }
 
   .close {
@@ -33,7 +71,7 @@
   .login-or-separator {
     border-top: 1px solid var(--primary-low);
     position: relative;
-    margin-block: 1rem;
+    margin-block: 0.75rem;
 
     span {
       transform: translate(-50%, -50%);
@@ -51,36 +89,85 @@
   #login-buttons {
     flex-direction: row;
     flex-wrap: wrap;
+    justify-content: space-between;
     padding: 0 1rem;
     gap: 0.25em;
     margin-bottom: 1rem;
+    height: unset;
 
     .btn {
       margin: 0;
       padding-block: 0.65rem;
       border: 1px solid var(--primary-low);
-      flex: 1 1 calc(50% - 0.25em);
+      flex-grow: 1;
       font-size: var(--font-down-1);
       white-space: nowrap;
-      &:last-child {
+      min-width: calc(50% - 0.25em);
-        margin-right: auto;
+    }
+  }
+
+  .login-page-cta {
+    &__buttons {
+      .login-page-cta__login {
+        width: 100%;
+        margin-bottom: 0.5rem;
       }
     }
+    &__signup {
+      background: none !important;
+      font-size: var(--font-down);
+      padding: 0;
+    }
+  }
+
+  .signup-page-cta {
+    &__buttons {
+      .signup-page-cta__signup {
+        width: 100%;
+        margin-bottom: 0.5rem;
+      }
+    }
+    &__login {
+      background: none !important;
+      font-size: var(--font-down);
+      padding: 0;
+    }
+  }
+
+  .login-page-cta,
+  .signup-page-cta {
+    &__existing-account,
+    &__no-account-yet {
+      width: unset;
+      margin-bottom: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+
+    button {
+      width: fit-content;
+    }
   }
 
   #login-form,
   .login-form {
     margin: 0;
-    padding: 1rem;
+    padding: 1rem 1rem 0;
 
     .input-group {
-      input {
+      &:not(:last-child) {
-        height: 2.5em;
+        margin-bottom: 0.75em;
-        margin-bottom: 0.25em;
-      }
-      margin-bottom: 1em;
-      .user-field:not(.dropdown) label.alt-placeholder {
-        top: 8px;
       }
       input:focus + label,
       input.value-entered + label.alt-placeholder {
@@ -92,6 +179,15 @@
       label.more-info {
         color: var(--primary-medium);
       }
+      .more-info,
+      .tip,
+      .instructions {
+        font-size: var(--font-down-1-rem);
+      }
+    }
+
+    .user-fields {
+      display: contents;
     }
   }
   .caps-lock-warning {
@@ -99,20 +195,82 @@
   }
 }
 
-.d-modal.create-account {
+.login-modal,
-  .d-modal__footer-buttons {
+.create-account,
-    flex-direction: row;
+.invites-show {
-    gap: 8px;
+  #login-form,
+  .login-form,
+  .invite-form {
+    .input-group {
+      label.alt-placeholder,
+      .user-field.text label.control-label {
+        top: 11px;
+      }
+      div.user-field:not(.dropdown)
+        .controls
+        input:focus
+        + label.alt-placeholder.control-label,
+      div.user-field.value-entered:not(.dropdown)
+        .controls
+        label.alt-placeholder.control-label {
+        top: -10px;
+      }
+      .user-field.dropdown label.control-label,
+      .user-field.multiselect label.control-label {
+        top: -10px;
+      }
+    }
+  }
+}
+
+.account-created,
+.activate-account {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  max-width: unset;
+  margin: 0;
+  padding: 0.75em 1rem;
+  box-shadow: none;
+
+  .activate-new-email {
+    width: 100%;
+    height: 2.5em;
+  }
+
+  .activation-controls {
+    flex-direction: column;
+    gap: 1em;
+    margin-top: auto;
+    margin-bottom: 0.75em;
+
     button {
-      width: auto;
+      height: 2.5em;
     }
   }
 
-  .login-welcome-header {
+  .activate-account-button {
-    padding-bottom: 0.25rem;
+    margin-top: auto;
+    margin-bottom: 0.75em;
+    width: 100%;
+    height: 2.5em;
   }
 
-  .signup-progress-bar {
+  .account-activated {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    .tada-image {
+      margin: 0;
+    }
+
+    .continue-button {
+      margin-top: auto;
+      margin-bottom: 0.75em;
+      width: 100%;
+      height: 2.5em;
+    }
   }
 }

app/assets/stylesheets/mobile/login-signup-page.scss

@@ -26,6 +26,7 @@
     }
 
     button {
+      padding-block: 0.65rem;
       width: fit-content;
     }
   }
@@ -43,10 +44,6 @@
 
       margin-bottom: 1em;
 
-      .user-field:not(.dropdown) label.alt-placeholder {
-        top: 8px;
-      }
-
       input:focus + label,
       input.value-entered + label.alt-placeholder {
         top: -10px;
@@ -62,6 +59,30 @@
     }
   }
 
+  #login-form,
+  .login-form,
+  .invite-form {
+    .input-group {
+      label.alt-placeholder,
+      .user-field.text label.control-label {
+        top: 11px;
+      }
+      div.user-field:not(.dropdown)
+        .controls
+        input:focus
+        + label.alt-placeholder.control-label,
+      div.user-field.value-entered:not(.dropdown)
+        .controls
+        label.alt-placeholder.control-label {
+        top: -10px;
+      }
+      .user-field.dropdown label.control-label,
+      .user-field.multiselect label.control-label {
+        top: -10px;
+      }
+    }
+  }
+
   #login-buttons {
     flex-direction: row;
     flex-wrap: wrap;
@@ -116,6 +137,15 @@
   }
 }
 
+.invites-show {
+  .login-welcome-header {
+    padding-inline: 0;
+  }
+  .signup-progress-bar {
+    margin-inline: 0;
+  }
+}
+
 // Login page
 
 .login-fullpage .login-body {
@@ -160,10 +190,6 @@
     padding-top: 0;
   }
 
-  .signup-progress-bar {
-    padding-inline: 1em;
-  }
-
   #login-form {
     padding-bottom: 0;
   }

app/assets/stylesheets/mobile/signup-progress-bar.scss

@@ -0,0 +1,30 @@
+$progress-bar-circle-size: 0.5rem;
+
+.signup-progress-bar {
+  width: auto;
+  margin: 1.5rem 1.2rem;
+  gap: 1rem;
+
+  .account-created &,
+  .activate-account & {
+    margin-inline: 0;
+  }
+
+  &__segment {
+    width: auto;
+  }
+  &__circle {
+    height: $progress-bar-circle-size;
+    width: $progress-bar-circle-size;
+    transform: none !important;
+    .--active & {
+      background: var(--success);
+      box-shadow: 0 0 1px 5px var(--success-low);
+    }
+  }
+
+  &__step-text,
+  &__line {
+    display: none;
+  }
+}

config/locales/client.en.yml

@@ -1771,12 +1771,13 @@ en:
         action: "Click here to activate your account"
         already_done: "Sorry, this account confirmation link is no longer valid. Perhaps your account is already active?"
         please_continue: "Your new account is confirmed; you will be redirected to the home page."
-        continue_button: "Continue to %{site_name}"
+        continue_button: "Finish!"
         welcome_to: "Welcome to %{site_name}!"
         approval_required: "A moderator must manually approve your new account before you can access this forum. You'll get an email when your account is approved!"
 
       name:
         title: "Name"
+        title_optional: "Name (optional)"
         instructions: "Your full name (optional)"
         instructions_required: "Your full name"
         required: "Please enter a name"
@@ -2348,7 +2349,6 @@ en:
 
     create_account:
       header_title: "Welcome!"
-      subheader_title: "Let's create your account"
       disclaimer: "By registering, you agree to the <a href='%{privacy_link}' target='blank'>privacy policy</a> and <a href='%{tos_link}' target='blank'>terms of service</a>."
       title: "Sign Up"
       failed: "Something went wrong, perhaps this email is already registered, try the forgot password link"
@@ -2396,7 +2396,6 @@ en:
 
     login:
       header_title: "Welcome back"
-      subheader_title: "Log in to your account"
       title: "Log In"
       username: "User"
       password: "Password"
@@ -2498,7 +2497,6 @@ en:
       success: "Your account has been created and you're now logged in."
       name_label: "Name"
       password_label: "Password"
-      existing_user_can_redeem: "Redeem your invitation to a topic or group."
 
     password_reset:
       continue: "Continue to %{site_name}"