UX: improved invite accept page layout (#15418)
This commit is contained in:
Meghna
GitHub
parent
8e6988163f
commit
f6db99b56a
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -256,4 +256,7 @@
|
|||
.col-image {
|
||||
display: none;
|
||||
}
|
||||
h1.login-title {
|
||||
font-size: $font-up-3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue