From c0e7fc3db94610087598f21b16162949fb9171e8 Mon Sep 17 00:00:00 2001 From: Lauren Davidson <32903719+1aurend@users.noreply.github.com> Date: Mon, 26 Feb 2024 14:53:05 -0800 Subject: [PATCH] [E] Update user verification BE messaging --- .../components/layout/DrawerHeader/styles.js | 21 ++++++- .../users/{Edit.js => Edit/index.js} | 59 +++++++++++++++---- .../backend/containers/users/Edit/styles.js | 25 ++++++++ .../__tests__/__snapshots__/Edit-test.js.snap | 2 +- .../locale/en-US/json/backend/records.json | 10 +++- 5 files changed, 101 insertions(+), 16 deletions(-) rename client/src/backend/containers/users/{Edit.js => Edit/index.js} (85%) create mode 100644 client/src/backend/containers/users/Edit/styles.js diff --git a/client/src/backend/components/layout/DrawerHeader/styles.js b/client/src/backend/components/layout/DrawerHeader/styles.js index 1c59e402af..a0fb8c45b5 100644 --- a/client/src/backend/components/layout/DrawerHeader/styles.js +++ b/client/src/backend/components/layout/DrawerHeader/styles.js @@ -2,7 +2,8 @@ import styled from "@emotion/styled"; import { fluidScale, headingQuaternary, - subtitlePrimary + subtitlePrimary, + respond } from "theme/styles/mixins"; import Utility from "global/components/utility"; @@ -41,5 +42,21 @@ export const ButtonGroup = styled.div` ${({ $grid }) => $grid && - `display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;`} + ` + > *:not(:last-child) { + margin-right: 1em; + } + ${respond( + ` + display: grid; + grid-template-columns: 1.25fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 12px; + + > *:not(:last-child) { + margin-right: 0; + } + `, + 40 + )}`} `; diff --git a/client/src/backend/containers/users/Edit.js b/client/src/backend/containers/users/Edit/index.js similarity index 85% rename from client/src/backend/containers/users/Edit.js rename to client/src/backend/containers/users/Edit/index.js index be485cca8e..5d14623e91 100644 --- a/client/src/backend/containers/users/Edit.js +++ b/client/src/backend/containers/users/Edit/index.js @@ -12,6 +12,7 @@ import FormContainer from "global/containers/form"; import get from "lodash/get"; import lh from "helpers/linkHandler"; import Layout from "backend/components/layout"; +import * as Styled from "./styles"; const { request, flush } = entityStoreActions; @@ -145,20 +146,55 @@ export class UsersEditContainer extends PureComponent { ); }; + humanReadableDate = date => { + return this.props.t("dates.date", { + val: new Date(date), + formatParams: { + val: { year: "numeric", month: "long", day: "numeric" } + } + }); + }; + + get noPublicEngagement() { + const attr = this.user.attributes; + return !(attr.trusted || attr.established); + } + + get userVerificationList() { + const t = this.props.t; + const attr = this.user.attributes; + + const emailMessage = attr.emailConfirmed + ? t("records.users.email_verified_at", { + date: this.humanReadableDate(attr.emailConfirmedAt) + }) + : t("records.users.email_not_verified"); + + return ( + <> +
  • + {emailMessage} +
    • + {attr.trusted && ( +
  • + {t("records.users.trusted")} +
    • + )} + {this.noPublicEngagement && ( +
  • + {t("records.users.no_public_engagement")} +
    • + )} + + ); + } + render() { if (!this.user) return null; const attr = this.user.attributes; const user = this.user; const t = this.props.t; - const establishedWarningProps = - !user.attributes.established && !user.attributes.trusted - ? { - instructions: t("records.users.not_established_warning"), - instructionsAreWarning: true - } - : {}; - return (
    {this.state.resetPassword ? ( @@ -196,9 +232,12 @@ export class UsersEditContainer extends PureComponent { } ]} buttonLayout="grid" - {...establishedWarningProps} /> - + + {this.userVerificationList} +
    + $warn ? `var(--error-color)` : `var(--color-accent-primary)`}; + + > li + li { + margin-block-start: 3px; + } + + > li > span { + margin-inline-start: -8px; + } + + ${respond(`margin-block-start: -20px;`, 65)} +`; diff --git a/client/src/backend/containers/users/__tests__/__snapshots__/Edit-test.js.snap b/client/src/backend/containers/users/__tests__/__snapshots__/Edit-test.js.snap index c78fc646ad..4269269d68 100644 --- a/client/src/backend/containers/users/__tests__/__snapshots__/Edit-test.js.snap +++ b/client/src/backend/containers/users/__tests__/__snapshots__/Edit-test.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`backend/containers/users/Edit matches the snapshot when rendered 1`] = `"

    Rowan Ida

    records.users.not_established_warning
    "`; +exports[`backend/containers/users/Edit matches the snapshot when rendered 1`] = `"

    Rowan Ida

    • records.users.email_not_verified
    • records.users.no_public_engagement
    "`; diff --git a/client/src/config/app/locale/en-US/json/backend/records.json b/client/src/config/app/locale/en-US/json/backend/records.json index 2bd0ece1b5..089e7351d7 100644 --- a/client/src/config/app/locale/en-US/json/backend/records.json +++ b/client/src/config/app/locale/en-US/json/backend/records.json @@ -32,9 +32,13 @@ "submit_label": "Save User", "unsubscribe": "Unsubscribe", "reset_password": "Reset Password", - "verify": "Verify", - "block": "Revoke Verification", - "not_established_warning": "This user has not yet verified their email and will not be able to engage with public projects and reading groups." + "verify": "Admin Verify", + "block": "Revoke Admin Verification", + "not_established_warning": "This user has not yet verified their email and will not be able to engage with public projects and reading groups.", + "email_verified_at": "Email confirmed {{date}}", + "email_not_verified": "Email not confirmed", + "trusted": "Trusted account", + "no_public_engagement": "Public engagement disabled" }, "pages": { "header": "Manage Pages",