From a3ccb87a689fb79396a573f915667140674ee8ba Mon Sep 17 00:00:00 2001
From: tomlum <tomlumperson@gmail.com>
Date: Thu, 3 Aug 2023 14:08:48 -0400
Subject: [PATCH] new FAR design and bug fix

---
 src/l10n.json                                 |   3 +
 .../bad-username-splash.jsx                   | 170 ++++++++++--------
 2 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/src/l10n.json b/src/l10n.json
index 3a6403519..0c66069e4 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -473,8 +473,11 @@
     "renameAccount.rememberToFollow": "When creating a username, please remember to follow the {communityGuidelinesLink}",
     "renameAccount.CommunityGuidelines": "Community Guidelines",
     "renameAccount.changeYourUsername": "Change your Username",
+    "renameAccount.changeYourUsernameSuccess": "Your username has successfully been changed!",
     "renameAccount.makeSure": "Make sure the username you chose is aligned with {communityGuidelinesLink}",
+    "renameAccount.welcomeBack": "You're now allowed to use Scratch again, welcome back!",
     "renameAccount.scratchsCommunityGuidelines": "Scratch's Community Guidelines",
     "renameAccount.change": "Change",
+    "renameAccount.goToProfile": "Go to your profile",
     "renameAccount.pastNotifications": "Here are your past admin notifications"
 }
diff --git a/src/views/bad-username-splash/bad-username-splash.jsx b/src/views/bad-username-splash/bad-username-splash.jsx
index 4c5e2e40e..7acd3572b 100644
--- a/src/views/bad-username-splash/bad-username-splash.jsx
+++ b/src/views/bad-username-splash/bad-username-splash.jsx
@@ -25,16 +25,18 @@ const validateNewUsernameForm = values => {
     return errors;
 };
 
-const PIIUsernameMessage = 'username appears to contain personal information';
-const BadUsernameMessage = 'an inappropriate username';
+// PII bans won't include the old username
+const PIIUsernameMessage = 'New username: ';
+const BadUsernameMessage = 'Old username: ';
 
 const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
 
     const [unauthorizedError, setUnauthorizedError] = React.useState(false);
     const [badUsernameError, setBadUsernameError] = React.useState(false);
     const [apiError, setAPIError] = React.useState(false);
+    const [usernameChangeSuccess, setUsernameChangeSuccess] = React.useState(false);
 
-    const latestAdminMessage = adminMessages && adminMessages[0] && adminMessages[0].message;
+    const latestAdminMessage = adminMessages && adminMessages.find(message => message.message.includes('New username: '));
 
     React.useEffect(() => {
         if (user && user.username && user.token){
@@ -66,7 +68,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
             } else if (res.body.error){
                 setAPIError('error message for API error');
             } else {
-                window.location = '/';
+                setUsernameChangeSuccess(true);
             }
         });
     };
@@ -92,14 +94,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
                         </span>
                         <h3><FormattedMessage id="renameAccount.toRecover" /></h3>
                         
-                        {latestAdminMessage && latestAdminMessage.includes(PIIUsernameMessage) &&
-                            (<div>
-                                <p><FormattedMessage id="renameAccount.yourScratchAccount" /></p>
-                                <p><FormattedMessage id="renameAccount.privacyIssue" /></p>
-                                <p><FormattedMessage id="renameAccount.thingsToAvoid" /></p>
-                            </div>)
-                        }
-                        {latestAdminMessage && latestAdminMessage.includes(BadUsernameMessage) &&
+                        {latestAdminMessage && latestAdminMessage.message.includes(BadUsernameMessage) ?
                             (<div>
                                 <p><FormattedMessage id="renameAccount.yourScratchAccountInappropriate" /></p>
                                 <p><FormattedMessage id="renameAccount.scratchIsForKids" /></p>
@@ -116,6 +111,10 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
                                         )
                                     }}
                                 /></p>
+                            </div>) : (<div>
+                                <p><FormattedMessage id="renameAccount.yourScratchAccount" /></p>
+                                <p><FormattedMessage id="renameAccount.privacyIssue" /></p>
+                                <p><FormattedMessage id="renameAccount.thingsToAvoid" /></p>
                             </div>)
                         }
                     </div>
@@ -135,6 +134,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
                             /* eslint-disable react/jsx-no-bind */
                             onSubmit={handleUpdateUsernameUnbanSubmit}
                         >
+                            
                             {({
                                 errors,
                                 handleSubmit,
@@ -142,11 +142,15 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
                                 setFieldError,
                                 setFieldTouched,
                                 setFieldValue,
-                                validateForm
+                                validateForm,
+                                values
                             }) => (
                                 <JoinFlowStep
+                                    headerImgClass="welcome-step-image"
+                                    headerImgSrc={usernameChangeSuccess ? '/images/join-flow/welcome-header.png' : null}
                                     description={<FormattedMessage
-                                        id="renameAccount.makeSure"
+                                        className="test123"
+                                        id={usernameChangeSuccess ? 'renameAccount.welcomeBack' : 'renameAccount.makeSure'}
                                         values={{
                                             communityGuidelinesLink: (
                                                 <a href="/community_guidelines">
@@ -157,73 +161,81 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
                                     />}
                                     innerClassName="change-username-inner"
                                     outerClassName="change-username-outer"
-                                    title={<FormattedMessage id="renameAccount.changeYourUsername" />}
+                                    title={<FormattedMessage id={usernameChangeSuccess ? 'renameAccount.changeYourUsernameSuccess' : 'renameAccount.changeYourUsername'} />}
                                     waiting={isSubmitting}
-                                    onSubmit={handleSubmit}
-                                    nextButton={<FormattedMessage id="renameAccount.change" />}
+                                    onSubmit={!usernameChangeSuccess ? () => {
+                                        window.location = `${window.location.origin}/users/${values.newUsername}`;
+                                    } : handleSubmit}
+                                    nextButton={<React.Fragment><FormattedMessage id={usernameChangeSuccess ? 'renameAccount.goToProfile' : 'renameAccount.change'} /> <img
+                                        className="join-flow-next-button-arrow"
+                                        src="/svgs/project/r-arrow.svg"
+                                    /></React.Fragment>}
                                 >
-                                    <div>
-                                        <b>Create a new username</b>
-                                        <FormikInput
-                                            autoCapitalize="off"
-                                            autoComplete="off"
-                                            autoCorrect="off"
-                                            className={'join-flow-input mt5'}
-                                            error={errors.newUsername}
-                                            id="newUsername"
-                                            name="newUsername"
-                                            placeholder={'Type your new username'}
-                                            spellCheck={false}
-                                            validationClassName="validation-left validation-full-width-input"
-                                            /* eslint-disable react/jsx-no-bind */
-                                            onChange={e => {
-                                                setFieldValue('newUsername', e.target.value.substring(0, 30));
-                                                setFieldValue('canValidate', false);
-                                                setFieldTouched('newUsername');
-                                                setFieldError('newUsername', null);
-                                            }}
-                                        />
-                                        <FormikInput
-                                            autoCapitalize="off"
-                                            autoComplete="off"
-                                            autoCorrect="off"
-                                            className={'join-flow-input'}
-                                            error={errors.newUsernameConfirm || badUsernameError}
-                                            id="newUsernameConfirm"
-                                            name="newUsernameConfirm"
-                                            placeholder={'Type your new username again'}
-                                            spellCheck={false}
-                                            validationClassName="validation-left validation-full-width-input"
-                                            onChange={e => {
-                                                setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30));
-                                                setFieldTouched('newUsernameConfirm');
-                                                setFieldError('newUsernameConfirm', null);
-                                                setFieldValue('canValidate', false);
-                                            }}
-                                            onBlur={() => {
-                                                setFieldValue('canValidate', true).then(validateForm());
-                                            }}
-                                        />
-                                        <b>Password</b>
-                                        <FormikInput
-                                            type="password"
-                                            autoCapitalize="off"
-                                            autoComplete="off"
-                                            autoCorrect="off"
-                                            className={'join-flow-input mt5'}
-                                            id="password"
-                                            name="password"
-                                            placeholder={'Enter your password'}
-                                            spellCheck={false}
-                                            error={unauthorizedError || apiError}
-                                            validationClassName="validation-left validation-full-width-input"
-                                            onChange={e => {
-                                                setFieldValue('password', e.target.value);
-                                                setFieldTouched('password');
-                                                setFieldError('password', null);
-                                            }}
-                                        />
-                                    </div>
+                                    {usernameChangeSuccess ?
+                                        (<div />) :
+                                        (<div>
+                                            <b>Create a new username</b>
+                                            <FormikInput
+                                                autoCapitalize="off"
+                                                autoComplete="off"
+                                                autoCorrect="off"
+                                                className={'join-flow-input mt5'}
+                                                error={errors.newUsername}
+                                                id="newUsername"
+                                                name="newUsername"
+                                                placeholder={'Type your new username'}
+                                                spellCheck={false}
+                                                validationClassName="validation-left validation-full-width-input"
+                                                /* eslint-disable react/jsx-no-bind */
+                                                onChange={e => {
+                                                    setFieldValue('newUsername', e.target.value.substring(0, 30));
+                                                    setFieldValue('canValidate', false);
+                                                    setFieldTouched('newUsername');
+                                                    setFieldError('newUsername', null);
+                                                }}
+                                            />
+                                            <FormikInput
+                                                autoCapitalize="off"
+                                                autoComplete="off"
+                                                autoCorrect="off"
+                                                autocomplete="off"
+                                                className={'join-flow-input'}
+                                                error={errors.newUsernameConfirm || badUsernameError}
+                                                id="newUsernameConfirm"
+                                                name="newUsernameConfirm"
+                                                placeholder={'Type your new username again'}
+                                                spellCheck={false}
+                                                validationClassName="validation-left validation-full-width-input"
+                                                onChange={e => {
+                                                    setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30));
+                                                    setFieldTouched('newUsernameConfirm');
+                                                    setFieldError('newUsernameConfirm', null);
+                                                    setFieldValue('canValidate', false);
+                                                }}
+                                                onBlur={() => {
+                                                    setFieldValue('canValidate', true).then(validateForm());
+                                                }}
+                                            />
+                                            <b>Password</b>
+                                            <FormikInput
+                                                type="password"
+                                                autoCapitalize="off"
+                                                autoComplete="off"
+                                                autoCorrect="off"
+                                                className={'join-flow-input mt5'}
+                                                id="password"
+                                                name="password"
+                                                placeholder={'Enter your password'}
+                                                spellCheck={false}
+                                                error={unauthorizedError || apiError}
+                                                validationClassName="validation-left validation-full-width-input"
+                                                onChange={e => {
+                                                    setFieldValue('password', e.target.value);
+                                                    setFieldTouched('password');
+                                                    setFieldError('password', null);
+                                                }}
+                                            />
+                                        </div>)}
                                 </JoinFlowStep>)}
                         </Formik>
                     </div>