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.rememberToFollow": "When creating a username, please remember to follow the {communityGuidelinesLink}",
"renameAccount.CommunityGuidelines": "Community Guidelines", "renameAccount.CommunityGuidelines": "Community Guidelines",
"renameAccount.changeYourUsername": "Change your Username", "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.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.scratchsCommunityGuidelines": "Scratch's Community Guidelines",
"renameAccount.change": "Change", "renameAccount.change": "Change",
"renameAccount.goToProfile": "Go to your profile",
"renameAccount.pastNotifications": "Here are your past admin notifications" "renameAccount.pastNotifications": "Here are your past admin notifications"
} }

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

@ -25,16 +25,18 @@ const validateNewUsernameForm = values => {
return errors; return errors;
}; };
const PIIUsernameMessage = 'username appears to contain personal information'; // PII bans won't include the old username
const BadUsernameMessage = 'an inappropriate username'; const PIIUsernameMessage = 'New username: ';
const BadUsernameMessage = 'Old username: ';
const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
const [unauthorizedError, setUnauthorizedError] = React.useState(false); const [unauthorizedError, setUnauthorizedError] = React.useState(false);
const [badUsernameError, setBadUsernameError] = React.useState(false); const [badUsernameError, setBadUsernameError] = React.useState(false);
const [apiError, setAPIError] = 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(() => { React.useEffect(() => {
if (user && user.username && user.token){ if (user && user.username && user.token){
@ -66,7 +68,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
} else if (res.body.error){ } else if (res.body.error){
setAPIError('error message for API error'); setAPIError('error message for API error');
} else { } else {
window.location = '/'; setUsernameChangeSuccess(true);
} }
}); });
}; };
@ -92,14 +94,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
</span> </span>
<h3><FormattedMessage id="renameAccount.toRecover" /></h3> <h3><FormattedMessage id="renameAccount.toRecover" /></h3>
{latestAdminMessage && latestAdminMessage.includes(PIIUsernameMessage) && {latestAdminMessage && latestAdminMessage.message.includes(BadUsernameMessage) ?
(<div>
<p><FormattedMessage id="renameAccount.yourScratchAccount" /></p>
<p><FormattedMessage id="renameAccount.privacyIssue" /></p>
<p><FormattedMessage id="renameAccount.thingsToAvoid" /></p>
</div>)
}
{latestAdminMessage && latestAdminMessage.includes(BadUsernameMessage) &&
(<div> (<div>
<p><FormattedMessage id="renameAccount.yourScratchAccountInappropriate" /></p> <p><FormattedMessage id="renameAccount.yourScratchAccountInappropriate" /></p>
<p><FormattedMessage id="renameAccount.scratchIsForKids" /></p> <p><FormattedMessage id="renameAccount.scratchIsForKids" /></p>
@ -116,6 +111,10 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
) )
}} }}
/></p> /></p>
</div>) : (<div>
<p><FormattedMessage id="renameAccount.yourScratchAccount" /></p>
<p><FormattedMessage id="renameAccount.privacyIssue" /></p>
<p><FormattedMessage id="renameAccount.thingsToAvoid" /></p>
</div>) </div>)
} }
</div> </div>
@ -135,6 +134,7 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onSubmit={handleUpdateUsernameUnbanSubmit} onSubmit={handleUpdateUsernameUnbanSubmit}
> >
{({ {({
errors, errors,
handleSubmit, handleSubmit,
@ -142,11 +142,15 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
setFieldError, setFieldError,
setFieldTouched, setFieldTouched,
setFieldValue, setFieldValue,
validateForm validateForm,
values
}) => ( }) => (
<JoinFlowStep <JoinFlowStep
headerImgClass="welcome-step-image"
headerImgSrc={usernameChangeSuccess ? '/images/join-flow/welcome-header.png' : null}
description={<FormattedMessage description={<FormattedMessage
id="renameAccount.makeSure" className="test123"
id={usernameChangeSuccess ? 'renameAccount.welcomeBack' : 'renameAccount.makeSure'}
values={{ values={{
communityGuidelinesLink: ( communityGuidelinesLink: (
<a href="/community_guidelines"> <a href="/community_guidelines">
@ -157,73 +161,81 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => {
/>} />}
innerClassName="change-username-inner" innerClassName="change-username-inner"
outerClassName="change-username-outer" outerClassName="change-username-outer"
title={<FormattedMessage id="renameAccount.changeYourUsername" />} title={<FormattedMessage id={usernameChangeSuccess ? 'renameAccount.changeYourUsernameSuccess' : 'renameAccount.changeYourUsername'} />}
waiting={isSubmitting} waiting={isSubmitting}
onSubmit={handleSubmit} onSubmit={!usernameChangeSuccess ? () => {
nextButton={<FormattedMessage id="renameAccount.change" />} 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 ?
<b>Create a new username</b> (<div />) :
<FormikInput (<div>
autoCapitalize="off" <b>Create a new username</b>
autoComplete="off" <FormikInput
autoCorrect="off" autoCapitalize="off"
className={'join-flow-input mt5'} autoComplete="off"
error={errors.newUsername} autoCorrect="off"
id="newUsername" className={'join-flow-input mt5'}
name="newUsername" error={errors.newUsername}
placeholder={'Type your new username'} id="newUsername"
spellCheck={false} name="newUsername"
validationClassName="validation-left validation-full-width-input" placeholder={'Type your new username'}
/* eslint-disable react/jsx-no-bind */ spellCheck={false}
onChange={e => { validationClassName="validation-left validation-full-width-input"
setFieldValue('newUsername', e.target.value.substring(0, 30)); /* eslint-disable react/jsx-no-bind */
setFieldValue('canValidate', false); onChange={e => {
setFieldTouched('newUsername'); setFieldValue('newUsername', e.target.value.substring(0, 30));
setFieldError('newUsername', null); setFieldValue('canValidate', false);
}} setFieldTouched('newUsername');
/> setFieldError('newUsername', null);
<FormikInput }}
autoCapitalize="off" />
autoComplete="off" <FormikInput
autoCorrect="off" autoCapitalize="off"
className={'join-flow-input'} autoComplete="off"
error={errors.newUsernameConfirm || badUsernameError} autoCorrect="off"
id="newUsernameConfirm" autocomplete="off"
name="newUsernameConfirm" className={'join-flow-input'}
placeholder={'Type your new username again'} error={errors.newUsernameConfirm || badUsernameError}
spellCheck={false} id="newUsernameConfirm"
validationClassName="validation-left validation-full-width-input" name="newUsernameConfirm"
onChange={e => { placeholder={'Type your new username again'}
setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30)); spellCheck={false}
setFieldTouched('newUsernameConfirm'); validationClassName="validation-left validation-full-width-input"
setFieldError('newUsernameConfirm', null); onChange={e => {
setFieldValue('canValidate', false); setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30));
}} setFieldTouched('newUsernameConfirm');
onBlur={() => { setFieldError('newUsernameConfirm', null);
setFieldValue('canValidate', true).then(validateForm()); setFieldValue('canValidate', false);
}} }}
/> onBlur={() => {
<b>Password</b> setFieldValue('canValidate', true).then(validateForm());
<FormikInput }}
type="password" />
autoCapitalize="off" <b>Password</b>
autoComplete="off" <FormikInput
autoCorrect="off" type="password"
className={'join-flow-input mt5'} autoCapitalize="off"
id="password" autoComplete="off"
name="password" autoCorrect="off"
placeholder={'Enter your password'} className={'join-flow-input mt5'}
spellCheck={false} id="password"
error={unauthorizedError || apiError} name="password"
validationClassName="validation-left validation-full-width-input" placeholder={'Enter your password'}
onChange={e => { spellCheck={false}
setFieldValue('password', e.target.value); error={unauthorizedError || apiError}
setFieldTouched('password'); validationClassName="validation-left validation-full-width-input"
setFieldError('password', null); onChange={e => {
}} setFieldValue('password', e.target.value);
/> setFieldTouched('password');
</div> setFieldError('password', null);
}}
/>
</div>)}
</JoinFlowStep>)} </JoinFlowStep>)}
</Formik> </Formik>
</div> </div>