From f7105e71853f3b9e72e160df2f7c002abb426d30 Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Tue, 5 Nov 2024 18:55:16 -0500 Subject: [PATCH 1/7] Disable email changing if user is regular member --- .../security/email/emailSection.component.tsx | 52 ++++++++++++------- .../security/email/emailSection.module.scss | 5 ++ 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index e350affae5..04f8678a0c 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -22,6 +22,7 @@ import {formatTime, notify} from 'js/utils'; // Styles import styles from './emailSection.module.scss'; import securityStyles from 'js/account/security/securityRoute.module.scss'; +import {useOrganizationQuery} from 'js/account/stripe.api'; interface EmailState { emails: EmailResponse[]; @@ -33,6 +34,8 @@ interface EmailState { export default function EmailSection() { const [session] = useState(() => sessionStore); + const orgQuery = useOrganizationQuery(); + let initialEmail = ''; if ('email' in session.currentAccount) { initialEmail = session.currentAccount.email; @@ -112,6 +115,14 @@ export default function EmailSection() { } } + function userCanChangeEmail() { + if (orgQuery.data?.is_mmo) { + return orgQuery.data.request_user_role !== 'member'; + } else { + return true; + } + } + const currentAccount = session.currentAccount; const unverifiedEmail = email.emails.find( (userEmail) => !userEmail.verified && !userEmail.primary @@ -120,20 +131,24 @@ export default function EmailSection() { return (
-

{t('Email address')}

+

+ {t('Email address')} +

-
{!session.isPending && - session.isInitialLoadComplete && - 'email' in currentAccount && ( - - )} + session.isInitialLoadComplete && + 'email' in currentAccount && + userCanChangeEmail() ? ( + + ) : ( +
{email.newEmail}
+ )} {unverifiedEmail?.email && !session.isPending && @@ -185,7 +200,6 @@ export default function EmailSection() { )}
-
{ @@ -193,12 +207,14 @@ export default function EmailSection() { handleSubmit(); }} > -
); diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss index 7675c0999f..ef54a484eb 100644 --- a/jsapp/js/account/security/email/emailSection.module.scss +++ b/jsapp/js/account/security/email/emailSection.module.scss @@ -34,3 +34,8 @@ display: flex; gap: 10px; } + +.emailText { + font-weight: 600; + color: colors.$kobo-gray-500; +} From 3a1ddbbdf98540928b614d0af43a2a830c0f327c Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Tue, 5 Nov 2024 19:50:29 -0500 Subject: [PATCH 2/7] Moved some elements and CSS around to fit logic --- .../security/email/emailSection.component.tsx | 51 +++++++++++-------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index 04f8678a0c..3111ece8f0 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -58,15 +58,20 @@ export default function EmailSection() { }, []); function setNewUserEmail(newEmail: string) { - setUserEmail(newEmail).then(() => { - getUserEmails().then((data) => { - setEmail({ - ...email, - emails: data.results, - newEmail: '', + setUserEmail(newEmail).then( + () => { + getUserEmails().then((data) => { + setEmail({ + ...email, + emails: data.results, + newEmail: '', + }); }); - }); - }, () => {/* Avoid crashing app when 500 error happens */}); + }, + () => { + /* Avoid crashing app when 500 error happens */ + } + ); } function deleteNewUserEmail() { @@ -200,22 +205,24 @@ export default function EmailSection() { )} -
{ - e.preventDefault(); - handleSubmit(); - }} - > +
{userCanChangeEmail() && ( -
); } From 3ade52f921e4dd88ddae0bcd0479648bb5a9274c Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Thu, 7 Nov 2024 16:29:33 -0500 Subject: [PATCH 3/7] Remove some linting, simplify booleans --- .../security/email/emailSection.component.tsx | 143 ++++++++---------- .../security/email/emailSection.module.scss | 1 - 2 files changed, 66 insertions(+), 78 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index 3111ece8f0..4b84286f00 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -58,20 +58,15 @@ export default function EmailSection() { }, []); function setNewUserEmail(newEmail: string) { - setUserEmail(newEmail).then( - () => { - getUserEmails().then((data) => { - setEmail({ - ...email, - emails: data.results, - newEmail: '', - }); + setUserEmail(newEmail).then(() => { + getUserEmails().then((data) => { + setEmail({ + ...email, + emails: data.results, + newEmail: '', }); - }, - () => { - /* Avoid crashing app when 500 error happens */ - } - ); + }); + }, () => {/* Avoid crashing app when 500 error happens */}); } function deleteNewUserEmail() { @@ -120,31 +115,29 @@ export default function EmailSection() { } } - function userCanChangeEmail() { - if (orgQuery.data?.is_mmo) { - return orgQuery.data.request_user_role !== 'member'; - } else { - return true; - } - } - const currentAccount = session.currentAccount; const unverifiedEmail = email.emails.find( (userEmail) => !userEmail.verified && !userEmail.primary ); + const isReady = + !session.isPending && + session.isInitialLoadComplete && + 'email' in currentAccount; + + // Only users who are members in a MMO cannot change their email + const userCanChangeEmail = orgQuery.data?.is_mmo + ? orgQuery.data.request_user_role !== 'member' + : true; + return (
-

- {t('Email address')} -

+

{t('Email address')}

+
- {!session.isPending && - session.isInitialLoadComplete && - 'email' in currentAccount && - userCanChangeEmail() ? ( + {isReady && userCanChangeEmail ? ( {email.newEmail}
)} - {unverifiedEmail?.email && - !session.isPending && - session.isInitialLoadComplete && - 'email' in currentAccount && ( - <> -
- -

- - {t('Check your email ##UNVERIFIED_EMAIL##. ').replace( - '##UNVERIFIED_EMAIL##', - unverifiedEmail.email - )} - - - {t( - 'A verification link has been sent to confirm your ownership. Once confirmed, this address will replace ##UNVERIFIED_EMAIL##' - ).replace('##UNVERIFIED_EMAIL##', currentAccount.email)} -

-
- -
-
- - {email.refreshedEmail && ( - - )} - - )} + + + {t( + 'A verification link has been sent to confirm your ownership. Once confirmed, this address will replace ##UNVERIFIED_EMAIL##' + ).replace('##UNVERIFIED_EMAIL##', currentAccount.email)} +

+ + +
+
+ + {email.refreshedEmail && ( + + )} + + )}
- {userCanChangeEmail() && ( + {userCanChangeEmail && (
{ e.preventDefault(); @@ -219,7 +209,6 @@ export default function EmailSection() { type='primary' onClick={handleSubmit} /> - )
)}
diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss index ef54a484eb..fdcfe5a957 100644 --- a/jsapp/js/account/security/email/emailSection.module.scss +++ b/jsapp/js/account/security/email/emailSection.module.scss @@ -37,5 +37,4 @@ .emailText { font-weight: 600; - color: colors.$kobo-gray-500; } From c660d4a0e835aa7819449873c8c24fbb42f52540 Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Thu, 7 Nov 2024 19:49:25 -0500 Subject: [PATCH 4/7] Remove redundant session status check --- jsapp/js/account/security/email/emailSection.component.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index 4b84286f00..8efd58615a 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -119,12 +119,7 @@ export default function EmailSection() { const unverifiedEmail = email.emails.find( (userEmail) => !userEmail.verified && !userEmail.primary ); - - const isReady = - !session.isPending && - session.isInitialLoadComplete && - 'email' in currentAccount; - + const isReady = session.isInitialLoadComplete && 'email' in currentAccount; // Only users who are members in a MMO cannot change their email const userCanChangeEmail = orgQuery.data?.is_mmo ? orgQuery.data.request_user_role !== 'member' From c1c9c549eee47219debc47836564e72336bb714f Mon Sep 17 00:00:00 2001 From: Anji Tong Date: Wed, 20 Nov 2024 21:16:46 -0500 Subject: [PATCH 5/7] Conditional CSS for disbabling email --- .../security/email/emailSection.component.tsx | 17 +++++++++++------ .../security/email/emailSection.module.scss | 6 ++++++ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index 8efd58615a..6d38c9530e 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -120,7 +120,6 @@ export default function EmailSection() { (userEmail) => !userEmail.verified && !userEmail.primary ); const isReady = session.isInitialLoadComplete && 'email' in currentAccount; - // Only users who are members in a MMO cannot change their email const userCanChangeEmail = orgQuery.data?.is_mmo ? orgQuery.data.request_user_role !== 'member' : true; @@ -131,7 +130,13 @@ export default function EmailSection() {

{t('Email address')}

-
+
{isReady && userCanChangeEmail ? ( )}
-
- {userCanChangeEmail && ( + {userCanChangeEmail && ( +
{ e.preventDefault(); @@ -205,8 +210,8 @@ export default function EmailSection() { onClick={handleSubmit} />
- )} -
+
+ )}
); } diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss index fdcfe5a957..7061d426ed 100644 --- a/jsapp/js/account/security/email/emailSection.module.scss +++ b/jsapp/js/account/security/email/emailSection.module.scss @@ -38,3 +38,9 @@ .emailText { font-weight: 600; } + +.bodyNoEmailChange { + flex: 5; + // To compensate for the `options` class not displaying when there is no email + margin-right: calc(30% + 8px); +} From fd533562209eb9727e6f65fd77654edb61a2f1c0 Mon Sep 17 00:00:00 2001 From: James Kiger Date: Thu, 21 Nov 2024 14:51:58 -0500 Subject: [PATCH 6/7] Fix import and minor style adjustment --- .../account/security/email/emailSection.component.tsx | 11 +++++------ .../account/security/email/emailSection.module.scss | 6 ++---- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx index 6d38c9530e..4877dcc8a8 100644 --- a/jsapp/js/account/security/email/emailSection.component.tsx +++ b/jsapp/js/account/security/email/emailSection.component.tsx @@ -10,6 +10,7 @@ import { deleteUnverifiedUserEmails, } from './emailSection.api'; import type {EmailResponse} from './emailSection.api'; +import {useOrganizationQuery} from '../../organization/organizationQuery'; // Partial components import Button from 'jsapp/js/components/common/button'; @@ -22,7 +23,6 @@ import {formatTime, notify} from 'js/utils'; // Styles import styles from './emailSection.module.scss'; import securityStyles from 'js/account/security/securityRoute.module.scss'; -import {useOrganizationQuery} from 'js/account/stripe.api'; interface EmailState { emails: EmailResponse[]; @@ -131,11 +131,10 @@ export default function EmailSection() {
{isReady && userCanChangeEmail ? ( Date: Thu, 21 Nov 2024 15:18:41 -0500 Subject: [PATCH 7/7] Revert flex size change --- jsapp/js/account/security/email/emailSection.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss index 026b7a7230..3350c95c9d 100644 --- a/jsapp/js/account/security/email/emailSection.module.scss +++ b/jsapp/js/account/security/email/emailSection.module.scss @@ -40,5 +40,7 @@ } .emailUpdateDisabled { - flex: 8; + flex: 5; + // To compensate for the `options` class not displaying when there is no email + margin-right: calc(30% + 8px); }