From f6db99b56a01a39b0ef24f36e6e06dbe51332ae9 Mon Sep 17 00:00:00 2001
From: Meghna <11170663+MeghnaAJ@users.noreply.github.com>
Date: Wed, 29 Dec 2021 09:12:18 +0530
Subject: [PATCH] UX: improved invite accept page layout (#15418)

---
 .../discourse/app/templates/invites/show.hbs  | 215 +++++++++---------
 app/assets/stylesheets/common/base/login.scss |  23 +-
 app/assets/stylesheets/desktop/login.scss     |   6 +-
 app/assets/stylesheets/mobile/login.scss      |   3 +
 4 files changed, 138 insertions(+), 109 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index 4fbe0db6ced..c1d652b49f3 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -2,133 +2,136 @@
   <div class="login-welcome-header">
     <h1 class="login-title">{{welcomeTitle}}</h1>
     <img src={{wavingHandURL}} alt="" class="waving-hand">
-    <p class="login-subheader">{{i18n "create_account.subheader_title"}}</p>
+    {{#unless successMessage}}
+      <p class="login-subheader">{{i18n "create_account.subheader_title"}}</p>
+    {{/unless}}
   </div>
 
-  <div class="two-col">
-    <div class="col-image">
-      <img src={{inviteImageUrl}} alt={{i18n "invites.emoji"}}>
-    </div>
+  <div class={{if successMessage "invite-success" "invite-form"}}>
+    <div class="two-col">
+      <div class="col-image">
+        <img src={{inviteImageUrl}} alt={{i18n "invites.emoji"}}>
+      </div>
 
-    <div class="col-form">
-      {{#if successMessage}}
-        <br><br>
-        <div class="alert alert-info">
-          <p>{{html-safe successMessage}}</p>
-        </div>
-      {{else}}
-        <p>{{i18n "invites.invited_by"}}</p>
-        <p>{{user-info user=invitedBy}}</p>
+      <div class="col-form">
+        {{#if successMessage}}
+          <div class="success-info">
+            <p>{{html-safe successMessage}}</p>
+          </div>
+        {{else}}
+          <p>{{i18n "invites.invited_by"}}</p>
+          <p>{{user-info user=invitedBy}}</p>
 
-        {{#if associateHtml}}
-          <p class="create-account-associate-link">
-            {{html-safe associateHtml}}
-          </p>
-        {{/if}}
-
-        {{#unless isInviteLink}}
-          <p class="email-message">
-            {{html-safe yourEmailMessage}}
-            {{#if showSocialLoginAvailable}}
-              {{i18n "invites.social_login_available"}}
-            {{/if}}
-          </p>
-        {{/unless}}
-
-        {{#if externalAuthsOnly}}
-          {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }}
-          {{#if authOptions}}
-            {{#unless isInviteLink}}
-              {{input-tip validation=emailValidation id="account-email-validation"}}
-            {{/unless}}
-          {{else}}
-            {{login-buttons externalLogin=(action "externalLogin")}}
+          {{#if associateHtml}}
+            <p class="create-account-associate-link">
+              {{html-safe associateHtml}}
+            </p>
           {{/if}}
-        {{/if}}
 
-        {{#if discourseConnectEnabled}}
-          <a class="btn btn-primary discourse-connect raw-link" href={{ssoPath}}>
-            {{i18n "continue"}}
-          </a>
-        {{/if}}
+          {{#unless isInviteLink}}
+            <p class="email-message">
+              {{html-safe yourEmailMessage}}
+              {{#if showSocialLoginAvailable}}
+                {{i18n "invites.social_login_available"}}
+              {{/if}}
+            </p>
+          {{/unless}}
 
-        {{#if shouldDisplayForm}}
-          <form>
-            {{#if isInviteLink}}
-              <div class="input email-input">
-                <label for="new-account-email">
-                  {{i18n "user.email.title"}}
-                  <span class="required">*</span>
-                </label>
-                {{input type="email" value=email id="new-account-email" name="email" autofocus="autofocus" disabled=externalAuthsOnly}}
+          {{#if externalAuthsOnly}}
+            {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }}
+            {{#if authOptions}}
+              {{#unless isInviteLink}}
                 {{input-tip validation=emailValidation id="account-email-validation"}}
-                <div class="instructions">{{i18n "user.email.instructions"}}</div>
-              </div>
+              {{/unless}}
+            {{else}}
+              {{login-buttons externalLogin=(action "externalLogin")}}
             {{/if}}
+          {{/if}}
 
-            <div class="input username-input">
-              <label for="new-account-username">
-                {{i18n "user.username.title"}}
-                <span class="required">*</span>
-              </label>
-              {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
-              {{input-tip validation=usernameValidation id="username-validation"}}
-              <div class="instructions">{{i18n "user.username.instructions"}}</div>
-            </div>
+          {{#if discourseConnectEnabled}}
+            <a class="btn btn-primary discourse-connect raw-link" href={{ssoPath}}>
+              {{i18n "continue"}}
+            </a>
+          {{/if}}
 
-            {{#if fullnameRequired}}
-              <div class="input name-input">
-                <label for="new-account-name">
-                  {{i18n "invites.name_label"}}
-                  {{#if siteSettings.full_name_required}}
+          {{#if shouldDisplayForm}}
+            <form>
+              {{#if isInviteLink}}
+                <div class="input email-input">
+                  <label for="new-account-email">
+                    {{i18n "user.email.title"}}
                     <span class="required">*</span>
-                  {{/if}}
-                </label>
-                {{input value=accountName id="new-account-name" name="name"}}
-                <div class="instructions">{{nameInstructions}}</div>
-              </div>
-            {{/if}}
+                  </label>
+                  {{input type="email" value=email id="new-account-email" name="email" autofocus="autofocus" disabled=externalAuthsOnly}}
+                  {{input-tip validation=emailValidation id="account-email-validation"}}
+                  <div class="instructions">{{i18n "user.email.instructions"}}</div>
+                </div>
+              {{/if}}
 
-            {{#unless externalAuthsOnly}}
-              <div class="input password-input">
-                <label for="new-account-password">
-                  {{i18n "invites.password_label"}}
+              <div class="input username-input">
+                <label for="new-account-username">
+                  {{i18n "user.username.title"}}
                   <span class="required">*</span>
                 </label>
-                {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}}
-                {{input-tip validation=passwordValidation}}
-                <div class="instructions">
-                  {{passwordInstructions}} {{i18n "invites.optional_description"}}
-                  <div class="caps-lock-warning {{unless capsLockOn "invisible"}}">
-                    {{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
+                {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
+                {{input-tip validation=usernameValidation id="username-validation"}}
+                <div class="instructions">{{i18n "user.username.instructions"}}</div>
+              </div>
+
+              {{#if fullnameRequired}}
+                <div class="input name-input">
+                  <label for="new-account-name">
+                    {{i18n "invites.name_label"}}
+                    {{#if siteSettings.full_name_required}}
+                      <span class="required">*</span>
+                    {{/if}}
+                  </label>
+                  {{input value=accountName id="new-account-name" name="name"}}
+                  <div class="instructions">{{nameInstructions}}</div>
+                </div>
+              {{/if}}
+
+              {{#unless externalAuthsOnly}}
+                <div class="input password-input">
+                  <label for="new-account-password">
+                    {{i18n "invites.password_label"}}
+                    <span class="required">*</span>
+                  </label>
+                  {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}}
+                  {{input-tip validation=passwordValidation}}
+                  <div class="instructions">
+                    {{passwordInstructions}} {{i18n "invites.optional_description"}}
+                    <div class="caps-lock-warning {{unless capsLockOn "invisible"}}">
+                      {{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
+                    </div>
                   </div>
                 </div>
-              </div>
-            {{/unless}}
+              {{/unless}}
 
-            {{#if userFields}}
-              <div class="user-fields">
-                {{#each userFields as |f|}}
-                  {{user-field field=f.field value=f.value}}
-                {{/each}}
-              </div>
-            {{/if}}
+              {{#if userFields}}
+                <div class="user-fields">
+                  {{#each userFields as |f|}}
+                    {{user-field field=f.field value=f.value}}
+                  {{/each}}
+                </div>
+              {{/if}}
 
-            {{d-button
-              class="btn-primary"
-              action=(action "submit")
-              type="submit"
-              disabled=submitDisabled
-              label="invites.accept_invite"
-            }}
+              {{d-button
+                class="btn-primary"
+                action=(action "submit")
+                type="submit"
+                disabled=submitDisabled
+                label="invites.accept_invite"
+              }}
 
-            {{#if errorMessage}}
-              <br><br>
-              <div class="alert alert-error">{{errorMessage}}</div>
-            {{/if}}
-          </form>
+              {{#if errorMessage}}
+                <br><br>
+                <div class="alert alert-error">{{errorMessage}}</div>
+              {{/if}}
+            </form>
+          {{/if}}
         {{/if}}
-      {{/if}}
+      </div>
     </div>
   </div>
 </div>
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 6bd0865112d..6535c5abe57 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -66,7 +66,6 @@
     display: inline;
   }
   .login-welcome-header {
-    z-index: z("modal", "content");
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
@@ -293,12 +292,31 @@
 }
 
 .invites-show {
+  display: grid;
+  justify-content: center;
   .two-col {
     position: relative;
-    display: flex;
+    display: grid;
     margin-top: 5px;
   }
 
+  .invite-form,
+  .invite-success {
+    border-radius: 10px;
+    margin-top: 25px;
+  }
+
+  .invite-form {
+    padding-left: 20px;
+    margin-bottom: 50px;
+    .tip {
+      display: block;
+    }
+    .col-image {
+      display: none;
+    }
+  }
+
   #login-buttons {
     .btn {
       background-color: var(--primary-low);
@@ -309,6 +327,7 @@
   .col-image {
     position: relative;
     margin-right: 20px;
+    justify-self: center;
     @media screen and (max-width: 600px) {
       display: none;
     }
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 514eabcf1e1..9d2c688f0aa 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -395,7 +395,7 @@
 .invites-show {
   .col-form {
     padding-left: 20px;
-    width: 400px;
+    width: 470px;
   }
   .col-image {
     width: 175px;
@@ -410,6 +410,10 @@
     // 80% width on checkboxes messes up the layout for custom fields
     width: 80%;
   }
+  .invite-form,
+  .invite-success {
+    box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+  }
 }
 
 .password-reset,
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 3c729fa272c..60d121b9eea 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -256,4 +256,7 @@
   .col-image {
     display: none;
   }
+  h1.login-title {
+    font-size: $font-up-3;
+  }
 }