From b092ccbdc51bcea0229d27fb906cffcc46736ea6 Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Wed, 28 Aug 2024 06:43:39 -0500 Subject: [PATCH] UX: Add progress bar to the registration flow (#27694) --- .../app/components/modal/create-account.hbs | 22 +- .../app/components/modal/create-account.js | 6 - .../discourse/app/components/modal/login.hbs | 31 +- .../discourse/app/components/modal/login.js | 5 - .../components/modal/login/welcome-header.hbs | 9 - .../app/components/signup-progress-bar.gjs | 80 ++++ .../app/components/welcome-header.gjs | 14 + .../app/controllers/account-created-index.js | 9 - .../discourse/app/controllers/invites-show.js | 7 - .../discourse/app/routes/invites-show.js | 19 +- .../app/templates/account-created.hbs | 9 +- .../templates/account-created/edit-email.hbs | 2 +- .../app/templates/account-created/index.hbs | 37 +- .../app/templates/account-created/resent.hbs | 1 + .../app/templates/activate-account.gjs | 109 ++--- .../discourse/app/templates/invites/show.hbs | 389 +++++++++--------- .../tests/acceptance/invite-accept-test.js | 5 +- .../stylesheets/common/base/activation.scss | 111 +++-- app/assets/stylesheets/common/base/login.scss | 10 - .../stylesheets/common/components/_index.scss | 2 + .../components/powered-by-discourse.scss | 3 +- .../components/signup-progress-bar.scss | 96 +++++ .../common/components/welcome-header.scss | 24 ++ .../common/login/invite-signup.scss | 41 +- .../stylesheets/common/modal/login-modal.scss | 37 +- .../stylesheets/desktop/invite-signup.scss | 16 +- .../stylesheets/mobile/components/_index.scss | 1 + .../mobile/components/welcome-header.scss | 14 + .../stylesheets/mobile/login-modal.scss | 18 + config/locales/client.en.yml | 5 + public/images/envelope.svg | 1 - .../page_objects/pages/activate_account.rb | 6 +- spec/system/user_activation_spec.rb | 2 +- 33 files changed, 674 insertions(+), 467 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/components/modal/login/welcome-header.hbs create mode 100644 app/assets/javascripts/discourse/app/components/signup-progress-bar.gjs create mode 100644 app/assets/javascripts/discourse/app/components/welcome-header.gjs create mode 100644 app/assets/stylesheets/common/components/signup-progress-bar.scss create mode 100644 app/assets/stylesheets/common/components/welcome-header.scss create mode 100644 app/assets/stylesheets/mobile/components/welcome-header.scss delete mode 100644 public/images/envelope.svg diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs index 1fc3d985eb8..01c39625d76 100644 --- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs +++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs @@ -21,16 +21,17 @@ this.model.authOptions.auth_provider }} > -
-

{{i18n "create_account.header_title"}}

- -

{{i18n "create_account.subheader_title"}}

+ + -
- + {{#if this.showCreateForm}}
{{#if this.associateHtml}} @@ -86,7 +87,6 @@ id="username-validation" /> {{#unless this.usernameValidation.reason}} - {{i18n "user.username.instructions"}} @@ -307,9 +307,11 @@ <:footer> {{#if (and this.showCreateForm this.site.mobileView)}} -
- {{html-safe this.disclaimerHtml}} -
+ {{#if this.disclaimerHtml}} +
+ {{html-safe this.disclaimerHtml}} +
+ {{/if}}
{{else}} {{#if this.site.mobileView}} - + + + {{#if this.showLoginButtons}} {{#if this.site.desktopView}} - + + + {{/if}}
{{/unless}} diff --git a/app/assets/javascripts/discourse/app/components/modal/login.js b/app/assets/javascripts/discourse/app/components/modal/login.js index 76ad67f1fc7..ea7f618a911 100644 --- a/app/assets/javascripts/discourse/app/components/modal/login.js +++ b/app/assets/javascripts/discourse/app/components/modal/login.js @@ -10,7 +10,6 @@ import { popupAjaxError } from "discourse/lib/ajax-error"; import cookie, { removeCookie } from "discourse/lib/cookie"; import { wantsNewWindow } from "discourse/lib/intercept-click"; import { areCookiesEnabled } from "discourse/lib/utilities"; -import { wavingHandURL } from "discourse/lib/waving-hand-url"; import { getPasskeyCredential, isWebauthnSupported, @@ -64,10 +63,6 @@ export default class Login extends Component { return this.loggingIn || this.loggedIn; } - get wavingHandURL() { - return wavingHandURL(); - } - get modalBodyClasses() { const classes = ["login-modal-body"]; if (this.awaitingApproval) { diff --git a/app/assets/javascripts/discourse/app/components/modal/login/welcome-header.hbs b/app/assets/javascripts/discourse/app/components/modal/login/welcome-header.hbs deleted file mode 100644 index 085bb3a5cf6..00000000000 --- a/app/assets/javascripts/discourse/app/components/modal/login/welcome-header.hbs +++ /dev/null @@ -1,9 +0,0 @@ -
-

{{i18n "login.header_title"}}

- - - -
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/signup-progress-bar.gjs b/app/assets/javascripts/discourse/app/components/signup-progress-bar.gjs new file mode 100644 index 00000000000..23de7497bb6 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/signup-progress-bar.gjs @@ -0,0 +1,80 @@ +import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; +import { concat } from "@ember/helper"; +import { action } from "@ember/object"; +import { inject as service } from "@ember/service"; +import { eq } from "truth-helpers"; +import concatClass from "discourse/helpers/concat-class"; +import dIcon from "discourse-common/helpers/d-icon"; +import I18n from "discourse-i18n"; + +export default class SignupProgressBar extends Component { + @service siteSettings; + @tracked steps = []; + + constructor() { + super(...arguments); + if (this.siteSettings.must_approve_users) { + this.steps = ["signup", "activate", "approve", "login"]; + } else { + this.steps = ["signup", "activate", "login"]; + } + } + + stepText(step) { + return I18n.t(`create_account.progress_bar.${step}`); + } + + get currentStepIndex() { + return this.steps.findIndex((step) => step === this.args.step); + } + + get lastStepIndex() { + return this.steps.length - 1; + } + + @action + getStepState(index) { + if (index === this.currentStepIndex) { + return "active"; + } else if (index < this.currentStepIndex) { + return "completed"; + } else if (index > this.currentStepIndex) { + return "incomplete"; + } + } + + +} diff --git a/app/assets/javascripts/discourse/app/components/welcome-header.gjs b/app/assets/javascripts/discourse/app/components/welcome-header.gjs new file mode 100644 index 00000000000..f0a03519e62 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/welcome-header.gjs @@ -0,0 +1,14 @@ +import { wavingHandURL } from "discourse/lib/waving-hand-url"; + +const WelcomeHeader = ; + +export default WelcomeHeader; diff --git a/app/assets/javascripts/discourse/app/controllers/account-created-index.js b/app/assets/javascripts/discourse/app/controllers/account-created-index.js index d0a86eb442f..aa9192fdc6d 100644 --- a/app/assets/javascripts/discourse/app/controllers/account-created-index.js +++ b/app/assets/javascripts/discourse/app/controllers/account-created-index.js @@ -2,16 +2,12 @@ import Controller from "@ember/controller"; import { action } from "@ember/object"; import { service } from "@ember/service"; import { resendActivationEmail } from "discourse/lib/user-activation"; -import { wavingHandURL } from "discourse/lib/waving-hand-url"; -import getUrl from "discourse-common/lib/get-url"; import discourseComputed from "discourse-common/utils/decorators"; import I18n from "discourse-i18n"; export default class AccountCreatedIndexController extends Controller { @service router; - envelopeImageUrl = getUrl("/images/envelope.svg"); - @discourseComputed welcomeTitle() { return I18n.t("invites.welcome_to", { @@ -19,11 +15,6 @@ export default class AccountCreatedIndexController extends Controller { }); } - @discourseComputed - wavingHandURL() { - return wavingHandURL(); - } - @action sendActivationEmail() { resendActivationEmail(this.get("accountCreated.username")).then(() => { diff --git a/app/assets/javascripts/discourse/app/controllers/invites-show.js b/app/assets/javascripts/discourse/app/controllers/invites-show.js index 653dad62a3d..c64e03f131c 100644 --- a/app/assets/javascripts/discourse/app/controllers/invites-show.js +++ b/app/assets/javascripts/discourse/app/controllers/invites-show.js @@ -6,7 +6,6 @@ import { ajax } from "discourse/lib/ajax"; import { extractError } from "discourse/lib/ajax-error"; import DiscourseURL from "discourse/lib/url"; import { emailValid } from "discourse/lib/utilities"; -import { wavingHandURL } from "discourse/lib/waving-hand-url"; import NameValidation from "discourse/mixins/name-validation"; import PasswordValidation from "discourse/mixins/password-validation"; import UserFieldsValidation from "discourse/mixins/user-fields-validation"; @@ -42,7 +41,6 @@ export default class InvitesShowController extends Controller.extend( errorMessage = null; userFields = null; authOptions = null; - inviteImageUrl = getUrl("/images/envelope.svg"); rejectedEmails = []; maskPassword = true; @@ -261,11 +259,6 @@ export default class InvitesShowController extends Controller.extend( return matchingProvider ? matchingProvider.get("prettyName") : providerName; } - @discourseComputed - wavingHandURL() { - return wavingHandURL(); - } - @discourseComputed ssoPath() { return getUrl("/session/sso"); diff --git a/app/assets/javascripts/discourse/app/routes/invites-show.js b/app/assets/javascripts/discourse/app/routes/invites-show.js index f7d0c08372a..f604d3fb1ac 100644 --- a/app/assets/javascripts/discourse/app/routes/invites-show.js +++ b/app/assets/javascripts/discourse/app/routes/invites-show.js @@ -1,9 +1,12 @@ +import { service } from "@ember/service"; import PreloadStore from "discourse/lib/preload-store"; import DiscourseRoute from "discourse/routes/discourse"; import { deepMerge } from "discourse-common/lib/object"; import I18n from "discourse-i18n"; export default class InvitesShow extends DiscourseRoute { + @service siteSettings; + titleToken() { return I18n.t("invites.accept_title"); } @@ -21,17 +24,21 @@ export default class InvitesShow extends DiscourseRoute { activate() { super.activate(...arguments); - this.controllerFor("application").setProperties({ - showSiteHeader: false, - }); + if (this.siteSettings.login_required) { + this.controllerFor("application").setProperties({ + showSiteHeader: false, + }); + } } deactivate() { super.deactivate(...arguments); - this.controllerFor("application").setProperties({ - showSiteHeader: true, - }); + if (this.siteSettings.login_required) { + this.controllerFor("application").setProperties({ + showSiteHeader: true, + }); + } } setupController(controller, model) { diff --git a/app/assets/javascripts/discourse/app/templates/account-created.hbs b/app/assets/javascripts/discourse/app/templates/account-created.hbs index a4b848bb67f..82da5c1dd8e 100644 --- a/app/assets/javascripts/discourse/app/templates/account-created.hbs +++ b/app/assets/javascripts/discourse/app/templates/account-created.hbs @@ -1,5 +1,6 @@ -
- +{{body-class "account-created-page"}} +{{hide-application-header-buttons "search" "login" "signup"}} +{{hide-application-sidebar}} + \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs b/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs index 396cf1b5797..ef9fb83188c 100644 --- a/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs +++ b/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs @@ -1,10 +1,10 @@ +
-
- - -
-
-
- -
-
-
- {{html-safe this.accountCreated.message}} -
- {{#if this.accountCreated.show_controls}} - - {{/if}} -
-
-
-
\ No newline at end of file + + +
+ {{html-safe this.accountCreated.message}} +
+{{#if this.accountCreated.show_controls}} + +{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/account-created/resent.hbs b/app/assets/javascripts/discourse/app/templates/account-created/resent.hbs index 0d96a1ad9e5..a5c2f33d60b 100644 --- a/app/assets/javascripts/discourse/app/templates/account-created/resent.hbs +++ b/app/assets/javascripts/discourse/app/templates/account-created/resent.hbs @@ -1,3 +1,4 @@ +
{{#if this.email}} {{html-safe diff --git a/app/assets/javascripts/discourse/app/templates/activate-account.gjs b/app/assets/javascripts/discourse/app/templates/activate-account.gjs index eac12373c45..fb3bdb73118 100644 --- a/app/assets/javascripts/discourse/app/templates/activate-account.gjs +++ b/app/assets/javascripts/discourse/app/templates/activate-account.gjs @@ -4,11 +4,13 @@ import { action } from "@ember/object"; import { service } from "@ember/service"; import RouteTemplate from "ember-route-template"; import DButton from "discourse/components/d-button"; +import SignupProgressBar from "discourse/components/signup-progress-bar"; +import WelcomeHeader from "discourse/components/welcome-header"; +import bodyClass from "discourse/helpers/body-class"; import hideApplicationHeaderButtons from "discourse/helpers/hide-application-header-buttons"; import hideApplicationSidebar from "discourse/helpers/hide-application-sidebar"; import { ajax } from "discourse/lib/ajax"; import { popupAjaxError } from "discourse/lib/ajax-error"; -import { wavingHandURL } from "discourse/lib/waving-hand-url"; import i18n from "discourse-common/helpers/i18n"; import getURL from "discourse-common/lib/get-url"; @@ -21,6 +23,16 @@ export default RouteTemplate( @tracked needsApproval = false; @tracked errorMessage = null; + get signupStep() { + if (this.needsApproval) { + return "approve"; + } else if (this.accountActivated) { + return "login"; + } else { + return "activate"; + } + } + @action async activate() { this.isLoading = true; @@ -71,59 +83,52 @@ export default RouteTemplate( } } ); diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs index 9efc30e251a..16b94c44992 100644 --- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs +++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs @@ -1,240 +1,241 @@ {{body-class "invite-page"}} +{{hide-application-header-buttons "search" "login" "signup"}} {{hide-application-sidebar}} -
- + {{#unless this.externalAuthsOnly}} + + {{/unless}} +
-
-
- -
+
+ {{#if this.successMessage}} +
+

{{html-safe this.successMessage}}

+
+ {{else}} +

{{i18n "invites.invited_by"}}

+

-
- {{#if this.successMessage}} -
-

{{html-safe this.successMessage}}

-
- {{else}} -

{{i18n "invites.invited_by"}}

-

+ {{#if this.associateHtml}} + + {{/if}} - {{#if this.associateHtml}} - + {{#unless this.isInviteLink}} + + {{/unless}} + + {{#if this.externalAuthsOnly}} + {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }} + {{#if this.authOptions}} + {{#unless this.isInviteLink}} + + {{/unless}} + {{else}} + {{/if}} + {{/if}} - {{#unless this.isInviteLink}} - - {{/unless}} + {{#if this.discourseConnectEnabled}} + + {{i18n "continue"}} + + {{/if}} - {{#if this.externalAuthsOnly}} - {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }} - {{#if this.authOptions}} - {{#unless this.isInviteLink}} + {{#if this.shouldDisplayForm}} + + {{#if this.isInviteLink}} + + {{/if}} -
- - - +
+ + + + {{#unless this.usernameValidation.reason}}
{{i18n "user.username.instructions" }}
-
+ {{/unless}} +
- {{#if this.fullnameRequired}} -
- - -
{{this.nameInstructions}}
-
- {{/if}} - - {{#unless this.externalAuthsOnly}} -
- - - diff --git a/app/assets/javascripts/discourse/tests/acceptance/invite-accept-test.js b/app/assets/javascripts/discourse/tests/acceptance/invite-accept-test.js index b39ca68f7e9..52dafa35191 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/invite-accept-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/invite-accept-test.js @@ -80,6 +80,7 @@ acceptance("Invite accept", function (needs) { }); test("invite link", async function (assert) { + this.siteSettings.login_required = true; PreloadStore.store("invite_info", { invited_by: { id: 123, @@ -166,7 +167,9 @@ acceptance("Invite accept", function (needs) { test("invite name is required only if full name is required", async function (assert) { preloadInvite(); await visit("/invites/my-valid-invite-token"); - assert.dom(".name-input .required").exists("Full name is required"); + assert + .dom(".name-input .required") + .doesNotExist("Full name is implicitly required"); }); }); diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss index 4e960434604..cb02adcea13 100644 --- a/app/assets/stylesheets/common/base/activation.scss +++ b/app/assets/stylesheets/common/base/activation.scss @@ -1,73 +1,70 @@ // Styles used before the user is logged into discourse. For example, activating their // account or changing their email. -.account-activation-page { - .desktop-view & { - background: var(--primary-very-low); - } - #main-outlet-wrapper { - display: block; - .sidebar-wrapper { - display: none; - } - } - .header-sidebar-toggle { - display: none; - } +.account-created-page, +.activate-account-page { + background: var(--secondary); + #main-outlet { padding: 0; height: 100%; } - #simple-container { +} + +.activate-account-page .alert-error { + margin: 1em; +} + +.account-created, +.activate-account { + max-width: 500px; + padding: 2rem 3rem; + background: var(--secondary); + box-shadow: var(--shadow-menu-panel); + margin: 10vh auto 1em auto; + @media screen and (max-height: 700px) { + margin: 1em auto 1em auto; + } +} + +.account-created { + .ac-message { + font-size: var(--font-up-1); + line-height: var(--line-height-large); + } + .activation-controls { display: flex; - align-items: center; - box-sizing: border-box; - border-radius: 10px; - width: 100%; - padding: 20px; - justify-content: center; - margin-top: var(--header-offset); - .account-created { - .ac-message { - font-size: var(--font-up-1); - line-height: var(--line-height-large); - } - .activation-controls { - display: flex; - flex-wrap: wrap; - gap: 0.5em; - } - .ac-page { - border-radius: 10px; - margin-top: 25px; - } - } + flex-wrap: wrap; + gap: 0.5em; + margin-top: 1em; + } + + .edit-cancel { + text-transform: capitalize; + } + + .success-info p:last-child { + margin-bottom: 0; } } .activate-account { - .activate-title { - text-align: center; - .waving-hand { - height: 32px; - margin-bottom: 13px; - } - } - #activate-account-button { - margin-top: 20px; - margin-left: auto; - margin-right: auto; + .activate-account-button, + .continue-button { + margin-top: 1em; + margin-inline: auto; display: block; + width: fit-content; } - .perform-activation { - border-top: 6px solid var(--tertiary); - box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25); - border-radius: 10px; - padding: 1em 2.5em 1em 2.5em; - .image { - width: 150px; - margin: auto; - padding-bottom: 1em; - } + + .login-welcome-header { + margin-inline: auto; + width: fit-content; + } + + .tada-image { + width: 150px; + margin: auto; + padding-bottom: 1em; } } diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss index 42fd87a0991..91277a932e6 100644 --- a/app/assets/stylesheets/common/base/login.scss +++ b/app/assets/stylesheets/common/base/login.scss @@ -97,16 +97,6 @@ body.invite-page { } } -.invite-error { - box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25); - border-radius: 10px; - padding: 1em 2.5em 1em 2.5em; - .error-image { - text-align: center; - padding-bottom: 1em; - } -} - .email-login { border-radius: 10px; background-color: var(--secondary); diff --git a/app/assets/stylesheets/common/components/_index.scss b/app/assets/stylesheets/common/components/_index.scss index 66b0cd91fed..fa8b57d9dbd 100644 --- a/app/assets/stylesheets/common/components/_index.scss +++ b/app/assets/stylesheets/common/components/_index.scss @@ -37,6 +37,7 @@ @import "sidebar/edit-navigation-menu/categories-modal"; @import "sidebar/edit-navigation-menu/modal"; @import "sidebar/edit-navigation-menu/tags-modal"; +@import "signup-progress-bar"; @import "svg"; @import "tap-tile"; @import "time-input"; @@ -51,3 +52,4 @@ @import "user-stream"; @import "widget-dropdown"; @import "dropdown-menu"; +@import "welcome-header"; diff --git a/app/assets/stylesheets/common/components/powered-by-discourse.scss b/app/assets/stylesheets/common/components/powered-by-discourse.scss index 754a7bba1ea..20254a82ad2 100644 --- a/app/assets/stylesheets/common/components/powered-by-discourse.scss +++ b/app/assets/stylesheets/common/components/powered-by-discourse.scss @@ -3,7 +3,8 @@ .has-full-page-chat &, .static-login &, .invite-page &, - .account-activation-page & { + .account-created-page &, + .activate-account-page & { display: none !important; } grid-area: below-content; diff --git a/app/assets/stylesheets/common/components/signup-progress-bar.scss b/app/assets/stylesheets/common/components/signup-progress-bar.scss new file mode 100644 index 00000000000..0bbf7d8b585 --- /dev/null +++ b/app/assets/stylesheets/common/components/signup-progress-bar.scss @@ -0,0 +1,96 @@ +$progress-bar-line-width: 2px; +$progress-bar-circle-size: 1.2rem; +$progress-bar-icon-size: 0.8rem; + +.signup-progress-bar { + width: 100%; + display: flex; + color: var(--primary-low-mid); + box-sizing: border-box; + margin-bottom: 1.2em; + + &__segment { + width: 100%; + display: flex; + flex-direction: column; + gap: 0.5rem; + + &:first-child .signup-progress-bar__circle { + transform: translateX(50%); + z-index: 1; + } + + &:last-child { + width: $progress-bar-circle-size; + .signup-progress-bar__circle { + transform: translateX(-50%); + z-index: 1; + } + } + } + + &__step-text { + white-space: nowrap; + width: fit-content; + transform: translateX(calc(calc($progress-bar-circle-size / 2) - 50%)); + + .signup-progress-bar__segment:first-child & { + transform: translateX(0%); + } + + .signup-progress-bar__segment:last-child & { + transform: translateX( + calc(calc($progress-bar-circle-size + $progress-bar-line-width) - 100%) + ); + } + } + + &__step { + display: flex; + } + + &__line { + transform: translateY( + calc(calc($progress-bar-circle-size + $progress-bar-line-width) / 2) + ); + height: $progress-bar-line-width; + width: 100%; + background-color: var(--primary-low-mid); + } + + &__circle { + flex-shrink: 0; + font-size: $progress-bar-icon-size; + color: var(--secondary); + display: flex; + justify-content: center; + align-items: center; + height: $progress-bar-circle-size; + width: $progress-bar-circle-size; + border-radius: 50%; + border: $progress-bar-line-width solid var(--primary-low-mid); + background-color: var(--secondary); + } + + &__step.--completed { + color: var(--primary); + + .signup-progress-bar__circle { + background-color: var(--success); + border: $progress-bar-line-width solid var(--success); + } + } + + &__line.--completed { + background-color: var(--success); + } + + &__step.--active { + .signup-progress-bar__circle { + border: $progress-bar-line-width solid var(--success); + } + + .signup-progress-bar__step-text { + font-weight: bold; + } + } +} diff --git a/app/assets/stylesheets/common/components/welcome-header.scss b/app/assets/stylesheets/common/components/welcome-header.scss new file mode 100644 index 00000000000..e8c7cf672bb --- /dev/null +++ b/app/assets/stylesheets/common/components/welcome-header.scss @@ -0,0 +1,24 @@ +.login-welcome-header { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + overflow-wrap: anywhere; + + .login-title { + font-size: var(--font-up-6); + margin: 0; + line-height: var(--line-height-medium); + } + + .login-subheader { + font-size: var(--font-up-1); + margin: 0; + } + + .waving-hand { + width: 35px; + height: 35px; + margin-left: 0.5em; + align-self: center; + } +} diff --git a/app/assets/stylesheets/common/login/invite-signup.scss b/app/assets/stylesheets/common/login/invite-signup.scss index 1db480c346e..cdff92eef94 100644 --- a/app/assets/stylesheets/common/login/invite-signup.scss +++ b/app/assets/stylesheets/common/login/invite-signup.scss @@ -2,28 +2,8 @@ padding: 2rem 3rem; background: var(--secondary); - .login-welcome-header { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; - overflow-wrap: anywhere; - } - - .login-title { - font-size: var(--font-up-6); - margin: 0; - } - - .waving-hand { - width: 35px; - height: 35px; - margin-left: 0.5em; - align-self: center; - } - - .login-subheader { - font-size: var(--font-up-1); - margin: 0; + .success-info p:last-child { + margin-bottom: 0; } .user-info { @@ -36,10 +16,6 @@ height: 30px; } - .col-image { - display: none; - } - .create-account__password { &-info { display: flex; @@ -65,4 +41,17 @@ color: var(--primary-medium); margin-top: 0.5em; } + + .invite-form form { + display: flex; + flex-direction: column; + + .input-group { + &.email-input, + &.username-input, + &.name-input.name-required { + order: -1; + } + } + } } diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss index 8d46dd431e8..7489a66adea 100644 --- a/app/assets/stylesheets/common/modal/login-modal.scss +++ b/app/assets/stylesheets/common/modal/login-modal.scss @@ -36,11 +36,6 @@ } } - .login-subheader { - font-size: var(--font-up-1); - margin: 0; - } - .login-left-side { box-sizing: border-box; width: 100%; @@ -48,25 +43,6 @@ overflow: auto; } - .login-welcome-header { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; - } - - .login-title { - font-size: var(--font-up-6); - margin: 0; - line-height: var(--line-height-medium); - } - - .waving-hand { - width: 35px; - height: 35px; - margin-left: 0.5em; - align-self: center; - } - .login-right-side { background: var(--tertiary-or-tertiary-low); padding: 3.5rem 3rem; @@ -151,13 +127,12 @@ flex-direction: column; overflow: auto; gap: 1em; - .login-welcome-header, .d-modal__footer { font-size: var(--font-down-1); } .login-left-side { overflow: unset; - padding: 1em 2.75em 1em 1em; + padding: 1em; } .login-right-side { padding: 1em; @@ -166,6 +141,9 @@ #login-form { margin: 1.5em 0; } + .signup-progress-bar { + display: none; + } } } } @@ -173,7 +151,14 @@ /* end shared styles */ .d-modal.create-account { + &:not(:has(.has-alt-auth)) .d-modal__container { + max-width: 500px; + } + .d-modal { + &__container { + width: 100%; + } &__footer { flex-direction: column; align-items: flex-start; diff --git a/app/assets/stylesheets/desktop/invite-signup.scss b/app/assets/stylesheets/desktop/invite-signup.scss index 5c5c1b6a995..3d3e9655f24 100644 --- a/app/assets/stylesheets/desktop/invite-signup.scss +++ b/app/assets/stylesheets/desktop/invite-signup.scss @@ -1,8 +1,9 @@ .invite-page { - background: var(--primary-50); + background: var(--secondary); } -.invites-show { +.invites-show, +#simple-container .invite-error { max-width: 500px; padding: 2rem 3rem; background: var(--secondary); @@ -12,3 +13,14 @@ margin: 1em auto 1em auto; } } + +#simple-container .invite-error { + .error-info { + text-align: center; + } + + .error-image { + text-align: center; + padding-bottom: 1em; + } +} diff --git a/app/assets/stylesheets/mobile/components/_index.scss b/app/assets/stylesheets/mobile/components/_index.scss index c4dd3996f9a..5af7ecf3147 100644 --- a/app/assets/stylesheets/mobile/components/_index.scss +++ b/app/assets/stylesheets/mobile/components/_index.scss @@ -4,3 +4,4 @@ @import "topic-map"; @import "user-card"; @import "user-stream-item"; +@import "welcome-header"; diff --git a/app/assets/stylesheets/mobile/components/welcome-header.scss b/app/assets/stylesheets/mobile/components/welcome-header.scss new file mode 100644 index 00000000000..e488e923fe7 --- /dev/null +++ b/app/assets/stylesheets/mobile/components/welcome-header.scss @@ -0,0 +1,14 @@ +.login-welcome-header { + .login-title { + font-size: var(--font-up-5); + } + + .login-subheader { + font-size: var(--font-0); + } + + .waving-hand { + width: 30px; + height: 30px; + } +} diff --git a/app/assets/stylesheets/mobile/login-modal.scss b/app/assets/stylesheets/mobile/login-modal.scss index e07ed522776..77c041f17a3 100644 --- a/app/assets/stylesheets/mobile/login-modal.scss +++ b/app/assets/stylesheets/mobile/login-modal.scss @@ -97,3 +97,21 @@ display: none; } } + +.d-modal.create-account { + .d-modal__footer-buttons { + flex-direction: row; + gap: 8px; + button { + width: auto; + } + } + + .login-welcome-header { + padding-bottom: 0.25rem; + } + + .signup-progress-bar { + display: none; + } +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 55820ed18d0..4b2766d735c 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2336,6 +2336,11 @@ en: associate: "Already have an account? Log In to link your %{provider} account." activation_title: "Activate your account" already_have_account: "Already have an account?" + progress_bar: + signup: "Sign Up" + activate: "Activate" + approve: "Approve" + login: "Log In" forgot_password: title: "Password Reset" diff --git a/public/images/envelope.svg b/public/images/envelope.svg deleted file mode 100644 index 6400f5af466..00000000000 --- a/public/images/envelope.svg +++ /dev/null @@ -1 +0,0 @@ -image/svg+xml diff --git a/spec/system/page_objects/pages/activate_account.rb b/spec/system/page_objects/pages/activate_account.rb index 3adc95a3246..4516d871353 100644 --- a/spec/system/page_objects/pages/activate_account.rb +++ b/spec/system/page_objects/pages/activate_account.rb @@ -4,15 +4,15 @@ module PageObjects module Pages class ActivateAccount < PageObjects::Pages::Base def click_activate_account - find("#activate-account-button").click + find(".activate-account-button").click end def click_continue - find(".perform-activation .continue-button").click + find(".account-activated .continue-button").click end def has_error? - has_css?("#simple-container .alert-error") + has_css?(".alert-error") has_content?(I18n.t("js.user.activate_account.already_done")) end end diff --git a/spec/system/user_activation_spec.rb b/spec/system/user_activation_spec.rb index 4ed63d8cca5..4bf5b0576cd 100644 --- a/spec/system/user_activation_spec.rb +++ b/spec/system/user_activation_spec.rb @@ -30,7 +30,7 @@ describe "Account activation", type: :system do expect(user.reload.active).to eq(false) - find("#activate-account-button").click + find(".activate-account-button").click wait_for(timeout: 5) { user.reload.active } end