scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

new FAR design and bug fix

Browse source
This commit is contained in:
tomlum 2023-08-03 14:08:48 -04:00
parent 9e391bc427
commit a3ccb87a68
2 changed files with 94 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/l10n.json
View file

@ -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"
}

50
src/views/bad-username-splash/bad-username-splash.jsx
View file

@ -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,12 +161,19 @@ 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>
{usernameChangeSuccess ?
(<div />) :
(<div>
<b>Create a new username</b>
<FormikInput
autoCapitalize="off"
@ -187,6 +198,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
autocomplete="off"
className={'join-flow-input'}
error={errors.newUsernameConfirm || badUsernameError}
id="newUsernameConfirm"
@ -223,7 +235,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
setFieldError('password', null);
}}
/>
</div>
</div>)}
</JoinFlowStep>)}
</Formik>
</div>