From cc4c7a05e605388d4e36936e88db355284427671 Mon Sep 17 00:00:00 2001
From: Meghna <11170663+MeghnaAJ@users.noreply.github.com>
Date: Thu, 6 Jan 2022 16:31:32 +0530
Subject: [PATCH] UX: better invite accept form (#15472)

---
 .../discourse/app/templates/invites/show.hbs  | 29 ++++++++++---------
 app/assets/stylesheets/common/base/login.scss |  9 +++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index c1d652b49f3..42c385e0e74 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -57,47 +57,46 @@
           {{#if shouldDisplayForm}}
             <form>
               {{#if isInviteLink}}
-                <div class="input email-input">
-                  <label for="new-account-email">
+                <div class="input email-input input-group">
+                  {{input type="email" value=email id="new-account-email" name="email" class=(value-entered email) autofocus="autofocus" disabled=externalAuthsOnly}}
+                  <label class="alt-placeholder" 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}}
                   {{input-tip validation=emailValidation id="account-email-validation"}}
                   <div class="instructions">{{i18n "user.email.instructions"}}</div>
                 </div>
               {{/if}}
 
-              <div class="input username-input">
-                <label for="new-account-username">
+              <div class="input username-input input-group">
+                {{input value=accountUsername class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
+                <label class="alt-placeholder" 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 fullnameRequired}}
-                <div class="input name-input">
-                  <label for="new-account-name">
+                <div class="input name-input input-group">
+                  {{input value=accountName class=(value-entered accountName) id="new-account-name" name="name"}}
+                  <label class="alt-placeholder" 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">
+                <div class="input password-input input-group">
+                  {{password-field value=accountPassword class=(value-entered accountPassword) type="password" id="new-account-password" capsLockOn=capsLockOn}}
+                  <label class="alt-placeholder" 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"}}
@@ -111,7 +110,9 @@
               {{#if userFields}}
                 <div class="user-fields">
                   {{#each userFields as |f|}}
-                    {{user-field field=f.field value=f.value}}
+                    <div class="input-group">
+                      {{user-field field=f.field value=f.value class=(value-entered f.value)}}
+                    </div>
                   {{/each}}
                 </div>
               {{/if}}
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 6535c5abe57..e0f7e1ed37d 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -117,9 +117,11 @@
 
 // Login Form Styles
 .login-modal:not(.hidden),
-.create-account {
+.create-account,
+.invites-show {
   #login-form,
-  .login-form {
+  .login-form,
+  .invite-form {
     .input-group {
       position: relative;
       display: flex;
@@ -338,9 +340,6 @@
     button.btn-primary {
       margin-top: 10px;
     }
-    label:not(.checkbox-label) {
-      font-weight: bold;
-    }
     .controls,
     .input {
       margin-bottom: 10px;