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}) => {

- {latestAdminMessage && latestAdminMessage.includes(PIIUsernameMessage) && - (
-

-

-

-
) - } - {latestAdminMessage && latestAdminMessage.includes(BadUsernameMessage) && + {latestAdminMessage && latestAdminMessage.message.includes(BadUsernameMessage) ? (

@@ -116,6 +111,10 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { ) }} />

+
) : (
+

+

+

) } @@ -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 }) => ( @@ -157,73 +161,81 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { />} innerClassName="change-username-inner" outerClassName="change-username-outer" - title={} + title={} waiting={isSubmitting} - onSubmit={handleSubmit} - nextButton={} + onSubmit={!usernameChangeSuccess ? () => { + window.location = `${window.location.origin}/users/${values.newUsername}`; + } : handleSubmit} + nextButton={ } > -
- Create a new username - { - setFieldValue('newUsername', e.target.value.substring(0, 30)); - setFieldValue('canValidate', false); - setFieldTouched('newUsername'); - setFieldError('newUsername', null); - }} - /> - { - setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30)); - setFieldTouched('newUsernameConfirm'); - setFieldError('newUsernameConfirm', null); - setFieldValue('canValidate', false); - }} - onBlur={() => { - setFieldValue('canValidate', true).then(validateForm()); - }} - /> - Password - { - setFieldValue('password', e.target.value); - setFieldTouched('password'); - setFieldError('password', null); - }} - /> -
+ {usernameChangeSuccess ? + (
) : + (
+ Create a new username + { + setFieldValue('newUsername', e.target.value.substring(0, 30)); + setFieldValue('canValidate', false); + setFieldTouched('newUsername'); + setFieldError('newUsername', null); + }} + /> + { + setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30)); + setFieldTouched('newUsernameConfirm'); + setFieldError('newUsernameConfirm', null); + setFieldValue('canValidate', false); + }} + onBlur={() => { + setFieldValue('canValidate', true).then(validateForm()); + }} + /> + Password + { + setFieldValue('password', e.target.value); + setFieldTouched('password'); + setFieldError('password', null); + }} + /> +
)} )}