Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: improved invite accept page layout (#15418)

This commit is contained in:
Meghna 2021-12-29 09:12:18 +05:30 committed by GitHub
parent 8e6988163f
commit f6db99b56a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
app/assets/javascripts/discourse/app/templates/invites/show.hbs
View File

@ -2,133 +2,136 @@
<div class="login-welcome-header"> <div class="login-welcome-header">
<h1 class="login-title">{{welcomeTitle}}</h1> <h1 class="login-title">{{welcomeTitle}}</h1>
<img src={{wavingHandURL}} alt="" class="waving-hand"> <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>
<div class="two-col"> <div class={{if successMessage "invite-success" "invite-form"}}>
<div class="col-image"> <div class="two-col">
<img src={{inviteImageUrl}} alt={{i18n "invites.emoji"}}> <div class="col-image">
</div> <img src={{inviteImageUrl}} alt={{i18n "invites.emoji"}}>
</div>
<div class="col-form"> <div class="col-form">
{{#if successMessage}} {{#if successMessage}}
<br><br> <div class="success-info">
<div class="alert alert-info"> <p>{{html-safe successMessage}}</p>
<p>{{html-safe successMessage}}</p> </div>
</div> {{else}}
{{else}} <p>{{i18n "invites.invited_by"}}</p>
<p>{{i18n "invites.invited_by"}}</p> <p>{{user-info user=invitedBy}}</p>
<p>{{user-info user=invitedBy}}</p>
{{#if associateHtml}} {{#if associateHtml}}
<p class="create-account-associate-link"> <p class="create-account-associate-link">
{{html-safe associateHtml}} {{html-safe associateHtml}}
</p> </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}} {{/if}}
{{/if}}
{{#if discourseConnectEnabled}} {{#unless isInviteLink}}
<a class="btn btn-primary discourse-connect raw-link" href={{ssoPath}}> <p class="email-message">
{{i18n "continue"}} {{html-safe yourEmailMessage}}
</a> {{#if showSocialLoginAvailable}}
{{/if}} {{i18n "invites.social_login_available"}}
{{/if}}
</p>
{{/unless}}
{{#if shouldDisplayForm}} {{#if externalAuthsOnly}}
<form> {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }}
{{#if isInviteLink}} {{#if authOptions}}
<div class="input email-input"> {{#unless isInviteLink}}
<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}}
{{input-tip validation=emailValidation id="account-email-validation"}} {{input-tip validation=emailValidation id="account-email-validation"}}
<div class="instructions">{{i18n "user.email.instructions"}}</div> {{/unless}}
</div> {{else}}
{{login-buttons externalLogin=(action "externalLogin")}}
{{/if}} {{/if}}
{{/if}}
<div class="input username-input"> {{#if discourseConnectEnabled}}
<label for="new-account-username"> <a class="btn btn-primary discourse-connect raw-link" href={{ssoPath}}>
{{i18n "user.username.title"}} {{i18n "continue"}}
<span class="required">*</span> </a>
</label> {{/if}}
{{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}} {{#if shouldDisplayForm}}
<div class="input name-input"> <form>
<label for="new-account-name"> {{#if isInviteLink}}
{{i18n "invites.name_label"}} <div class="input email-input">
{{#if siteSettings.full_name_required}} <label for="new-account-email">
{{i18n "user.email.title"}}
<span class="required">*</span> <span class="required">*</span>
{{/if}} </label>
</label> {{input type="email" value=email id="new-account-email" name="email" autofocus="autofocus" disabled=externalAuthsOnly}}
{{input value=accountName id="new-account-name" name="name"}} {{input-tip validation=emailValidation id="account-email-validation"}}
<div class="instructions">{{nameInstructions}}</div> <div class="instructions">{{i18n "user.email.instructions"}}</div>
</div> </div>
{{/if}} {{/if}}
{{#unless externalAuthsOnly}} <div class="input username-input">
<div class="input password-input"> <label for="new-account-username">
<label for="new-account-password"> {{i18n "user.username.title"}}
{{i18n "invites.password_label"}}
<span class="required">*</span> <span class="required">*</span>
</label> </label>
{{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}} {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
{{input-tip validation=passwordValidation}} {{input-tip validation=usernameValidation id="username-validation"}}
<div class="instructions"> <div class="instructions">{{i18n "user.username.instructions"}}</div>
{{passwordInstructions}} {{i18n "invites.optional_description"}} </div>
<div class="caps-lock-warning {{unless capsLockOn "invisible"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}} {{#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> </div>
</div> {{/unless}}
{{/unless}}
{{#if userFields}} {{#if userFields}}
<div class="user-fields"> <div class="user-fields">
{{#each userFields as |f|}} {{#each userFields as |f|}}
{{user-field field=f.field value=f.value}} {{user-field field=f.field value=f.value}}
{{/each}} {{/each}}
</div> </div>
{{/if}} {{/if}}
{{d-button {{d-button
class="btn-primary" class="btn-primary"
action=(action "submit") action=(action "submit")
type="submit" type="submit"
disabled=submitDisabled disabled=submitDisabled
label="invites.accept_invite" label="invites.accept_invite"
}} }}
{{#if errorMessage}} {{#if errorMessage}}
<br><br> <br><br>
<div class="alert alert-error">{{errorMessage}}</div> <div class="alert alert-error">{{errorMessage}}</div>
{{/if}} {{/if}}
</form> </form>
{{/if}}
{{/if}} {{/if}}
{{/if}} </div>
</div> </div>
</div> </div>
</div> </div>

23
app/assets/stylesheets/common/base/login.scss
View File

@ -66,7 +66,6 @@
display: inline; display: inline;
} }
.login-welcome-header { .login-welcome-header {
z-index: z("modal", "content");
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
@ -293,12 +292,31 @@
} }
.invites-show { .invites-show {
display: grid;
justify-content: center;
.two-col { .two-col {
position: relative; position: relative;
display: flex; display: grid;
margin-top: 5px; 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 { #login-buttons {
.btn { .btn {
background-color: var(--primary-low); background-color: var(--primary-low);
@ -309,6 +327,7 @@
.col-image { .col-image {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
justify-self: center;
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
display: none; display: none;
} }

6
app/assets/stylesheets/desktop/login.scss
View File

@ -395,7 +395,7 @@
.invites-show { .invites-show {
.col-form { .col-form {
padding-left: 20px; padding-left: 20px;
width: 400px; width: 470px;
} }
.col-image { .col-image {
width: 175px; width: 175px;
@ -410,6 +410,10 @@
// 80% width on checkboxes messes up the layout for custom fields // 80% width on checkboxes messes up the layout for custom fields
width: 80%; width: 80%;
} }
.invite-form,
.invite-success {
box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
}
} }
.password-reset, .password-reset,

3
app/assets/stylesheets/mobile/login.scss
View File

@ -256,4 +256,7 @@
.col-image { .col-image {
display: none; display: none;
} }
h1.login-title {
font-size: $font-up-3;
}
} }