UX: better account-created page (#17452)

UX: minor styling updates to accept invite pages

app/assets/javascripts/discourse/app/controllers/account-created-index.js

@@ -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(() => {

app/assets/javascripts/discourse/app/templates/account-created/index.hbs

@@ -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}}

app/assets/javascripts/discourse/tests/acceptance/account-created-test.js

@@ -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");
   });
 });

app/assets/stylesheets/common/base/activation.scss

@@ -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);
+    }
   }
 }

app/assets/stylesheets/common/base/login.scss

@@ -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;
     }