diff --git a/src/l10n.json b/src/l10n.json index 256ee3cb0..6e1af76b9 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -438,5 +438,16 @@ "extensions.otherComputerConnectedText": "Only one computer can be connected to a {deviceName} at a time. If you have another computer connected to your {deviceName}, disconnect the {deviceName} or close Scratch on that computer and try again.", "bluetooth.enableLocationServicesTitle": "Make sure you have location services enabled on Chromebooks or Android tablets", - "bluetooth.enableLocationServicesText": "Bluetooth can be used to provide location data to the app. In addition to granting the Scratch App permission to access location, location must be enabled in your general device settings. Search for 'Location' in your settings, and make sure it is on. On Chromebooks search for 'Location' in the Google Play Store Android preferences." + "bluetooth.enableLocationServicesText": "Bluetooth can be used to provide location data to the app. In addition to granting the Scratch App permission to access location, location must be enabled in your general device settings. Search for 'Location' in your settings, and make sure it is on. On Chromebooks search for 'Location' in the Google Play Store Android preferences.", + + "renameAccount.accountBlocked": "Account Blocked", + "renameAccount.toRecover": "To recover a access to your account, change your username.", + "renameAccount.yourScratchAccount": "Your scratch account has been temporarily blocked because your usernamed appears to contain personal information.", + "renameAccount.privacyIssue": "This is a serious privacy issue. When you share information like this, it is visible to everyone on the internet, so please be careful what you share", + "renameAccount.thingsToAvoid": "When creating an username, please remember to avoid using last names, school names, or other private information in your username.", + "renameAccount.changeYourUsername": "Change your Username", + "renameAccount.makeSure": "Make sure the username you chose is aligned with {communityGuidelinesLink}", + "renameAccount.communityGuidelines": "Scratch's Community Guidelines", + "renameAccount.change": "Change", + "renameAccount.pastNotifications": "Here are your past admin notifications" } diff --git a/src/redux/session.js b/src/redux/session.js index f9aa89dc0..761deb4fc 100644 --- a/src/redux/session.js +++ b/src/redux/session.js @@ -17,8 +17,7 @@ const banGoodListPaths = [ '/accounts/bad-username', '/community_guidelines', '/privacy_policy', - '/terms_of_use', - '/accounts/update_username' + '/terms_of_use' ]; module.exports.Status = keyMirror({ diff --git a/src/views/bad-username-splash/bad-username-splash.jsx b/src/views/bad-username-splash/bad-username-splash.jsx index 28bcaa60f..6a68251d7 100644 --- a/src/views/bad-username-splash/bad-username-splash.jsx +++ b/src/views/bad-username-splash/bad-username-splash.jsx @@ -1,4 +1,3 @@ -/* eslint-disable */ const injectIntl = require('react-intl').injectIntl; // const intlShape = require('react-intl').intlShape; // const FormattedMessage = require('react-intl').FormattedMessage; @@ -20,12 +19,19 @@ import bannedIcon from './blocked-account.svg'; require('../../components/extension-landing/extension-landing.scss'); require('./bad-username-splash.scss'); +const validateNewUsernameForm = values => { + const errors = {}; + if (values.canValidate && (values.newUsername !== values.newUsernameConfirm && values.newUsernameConfirm !== '')){ + errors.newUsernameConfirm = "usernames don't match"; + } + return errors; +}; + 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 [unauthorizedError, setUnauthorizedError] = React.useState(false); + const [badUsernameError, setBadUsernameError] = React.useState(false); + const [apiError, setAPIError] = React.useState(false); React.useEffect(() => { if (user && user.username && user.token){ @@ -34,12 +40,11 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { }, [user]); const handleUpdateUsernameUnbanSubmit = (formData, formikBag) => { - setUnauthorizedError(false) - setBadUsernameError(false) - setAPIError(false) + setUnauthorizedError(false); + setBadUsernameError(false); + setAPIError(false); formikBag.setSubmitting(false); // formik makes us do this ourselves - console.log("attempting submit!") api({ host: '', uri: '/accounts/update_username/', @@ -51,19 +56,17 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { password: formData.password } }, (err, body, res) => { - if(res.body.error === "Unauthorized"){ - setUnauthorizedError("error message for unauthorized access") - } - else if(res.body.error === "Invalid username"){ - setBadUsernameError("error message for invalid username") - } - else if(res.body.error){ - setAPIError("error message for API error") - } else{ + if (res.body.error === 'Unauthorized'){ + setUnauthorizedError('error message for unauthorized access'); + } else if (res.body.error === 'Invalid username'){ + setBadUsernameError('error message for invalid username'); + } else if (res.body.error){ + setAPIError('error message for API error'); + } else { window.location = '/'; } }); - } + }; if (hasSession && (!user || !user.banned)){ window.location = '/'; @@ -82,12 +85,12 @@ const BannedSplash = ({hasSession, user, adminMessages, getAdminMessages}) => { className="banned-icon" src={bannedIcon} /> -

+

-

-

-

-

+

+

+

+

{ newUsername: '', newUsernameConfirm: '', username: user.username, - password: '' + password: '', + canValidate: false }} - validateOnBlur={true} + validate={validateNewUsernameForm} + validateOnBlur validateOnChange={false} + /* eslint-disable react/jsx-no-bind */ onSubmit={handleUpdateUsernameUnbanSubmit} > {({ - errors, - handleSubmit, - isSubmitting, - setFieldError, - setFieldTouched, - setFieldValue, - // touched, - validateField, - values - }) => { - return ( - } - innerClassName="change-username-inner" - outerClassName="change-username-outer" - title={}}/>} - waiting={isSubmitting} - onSubmit={handleSubmit} - nextButton={} - > -
- validateField('newUsername')} - onChange={e => { - setFieldValue('newUsername', e.target.value.substring(0, 30)); - setFieldTouched('newUsername'); - setFieldError('newUsername', null); - }} - /> - { - setFieldValue('newUsernameConfirm', e.target.value.substring(0, 30)); - setFieldTouched('newUsernameConfirm'); - setFieldError('newUsernameConfirm', null); - }} - /> - { - setFieldValue('password', e.target.value); - setFieldTouched('password'); - setFieldError('password', null); - }} - /> -
- ); - }} + errors, + handleSubmit, + isSubmitting, + setFieldError, + setFieldTouched, + setFieldValue, + validateForm + }) => ( + } + innerClassName="change-username-inner" + outerClassName="change-username-outer" + title={)}} + />} + waiting={isSubmitting} + onSubmit={handleSubmit} + nextButton={} + > +
+ { + 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()); + }} + /> + { + setFieldValue('password', e.target.value); + setFieldTouched('password'); + setFieldError('password', null); + }} + /> +
+ )}
- +
+ {console.log(adminMessages)} {adminMessages.map(message => (
{
{new Date(message.datetime_created).toDateString()}
- {/* // eslint-disable-next-line react/no-danger */} + {/* eslint-disable-next-line react/no-danger */}
))} diff --git a/src/views/bad-username-splash/blocked-account.svg b/src/views/bad-username-splash/blocked-account.svg new file mode 100644 index 000000000..897a34da9 --- /dev/null +++ b/src/views/bad-username-splash/blocked-account.svg @@ -0,0 +1,3 @@ + + +