UX: better account-created page (#17452)

UX: minor styling updates to accept invite pages
This commit is contained in:
Meghna 2022-07-14 20:43:00 +05:30 committed by GitHub
parent b9ac8e5748
commit 72889573e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 10 deletions

View File

@ -1,7 +1,23 @@
import I18n from "I18n";
import Controller from "@ember/controller";
import getUrl from "discourse-common/lib/get-url";
import discourseComputed from "discourse-common/utils/decorators";
import { resendActivationEmail } from "discourse/lib/user-activation";
import { wavingHandURL } from "discourse/lib/waving-hand-url";
export default Controller.extend({
envelopeImageUrl: getUrl("/images/envelope.svg"),
@discourseComputed
welcomeTitle() {
return I18n.t("invites.welcome_to", {
site_name: this.siteSettings.title,
});
},
@discourseComputed
wavingHandURL: () => wavingHandURL(),
actions: {
sendActivationEmail() {
resendActivationEmail(this.get("accountCreated.username")).then(() => {

View File

@ -1,6 +1,22 @@
<div class="ac-message">
{{html-safe this.accountCreated.message}}
<div class="container invites-show">
<div class="login-welcome-header">
<h1 class="login-title">{{this.welcomeTitle}}</h1>
<img src={{this.wavingHandURL}} alt="" class="waving-hand">
</div>
<div class="ac-page">
<div class="two-col">
<div class="col-image">
<img src={{this.envelopeImageUrl}} alt={{i18n "invites.emoji"}}>
</div>
<div class="col-form">
<div class="success-info">
{{html-safe this.accountCreated.message}}
</div>
{{#if this.accountCreated.show_controls}}
<ActivationControls @sendActivationEmail={{action "sendActivationEmail"}} @editActivationEmail={{action "editActivationEmail"}} />
{{/if}}
</div>
</div>
</div>
</div>
{{#if this.accountCreated.show_controls}}
<ActivationControls @sendActivationEmail={{action "sendActivationEmail"}} @editActivationEmail={{action "editActivationEmail"}} />
{{/if}}

View File

@ -16,7 +16,7 @@ acceptance("Account Created", function () {
assert.ok(exists(".account-created"));
assert.strictEqual(
query(".account-created .ac-message").innerText.trim(),
query(".account-created .success-info").innerText.trim(),
"Hello World",
"it displays the message"
);
@ -35,7 +35,7 @@ acceptance("Account Created", function () {
assert.ok(exists(".account-created"));
assert.strictEqual(
query(".account-created .ac-message").innerText.trim(),
query(".account-created .success-info").innerText.trim(),
"Hello World",
"it displays the message"
);
@ -43,7 +43,7 @@ acceptance("Account Created", function () {
await click(".activation-controls .resend");
assert.strictEqual(currentRouteName(), "account-created.resent");
const email = query(".account-created .ac-message b").innerText;
const email = query(".account-created b").innerText;
assert.strictEqual(email, "eviltrout@example.com");
});
@ -88,7 +88,7 @@ acceptance("Account Created", function () {
await click(".activation-controls .btn-primary");
assert.strictEqual(currentRouteName(), "account-created.resent");
const email = query(".account-created .ac-message b").innerText;
const email = query(".account-created b").innerText;
assert.strictEqual(email, "newemail@example.com");
});
});

View File

@ -13,11 +13,16 @@
font-size: $font-up-1;
line-height: $line-height-large;
}
.activation-controls {
button {
margin-right: 0.5em;
}
}
.ac-page {
border-radius: 10px;
margin-top: 25px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
border-top: 6px solid var(--tertiary);
}
}
}

View File

@ -309,11 +309,13 @@
.invite-success {
border-radius: 10px;
margin-top: 25px;
border-top: 6px solid var(--tertiary);
}
.invite-form {
margin-bottom: 50px;
max-width: 33em;
border-top: 6px solid var(--tertiary);
.tip {
display: block;
}