mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #7778 from scratchfoundation/revert-7770-revert-far
Revert "Revert "Merge pull request #7762 from scratchfoundation/revert-7759-F…"
This commit is contained in:
Tom Lum
GitHub
commit
9e391bc427
5 changed files with 443 additions and 1 deletions
|
|
@ -16,6 +16,7 @@ const banGoodListPaths = [
|
|||
'/ip_ban_appeal',
|
||||
'/vpn_required',
|
||||
'/accounts/banned-response',
|
||||
'/accounts/bad-username',
|
||||
'/community_guidelines',
|
||||
'/privacy_policy',
|
||||
'/terms_of_use'
|
||||
|
|
@ -85,7 +86,11 @@ const handleSessionResponse = (dispatch, body) => {
|
|||
body.user.banned &&
|
||||
banGoodListPaths.every(goodPath => window.location.pathname.indexOf(goodPath) === -1)
|
||||
) {
|
||||
window.location = '/accounts/banned-response/';
|
||||
if (body.user.banned_status === 'far_banned'){
|
||||
window.location = '/accounts/bad-username/';
|
||||
} else {
|
||||
window.location = '/accounts/banned-response/';
|
||||
}
|
||||
return;
|
||||
} else if (
|
||||
body.flags &&
|
||||
|
|
|
|||
|
|
@ -430,6 +430,13 @@
|
|||
"view": "microbit/microbit",
|
||||
"title": "micro:bit"
|
||||
},
|
||||
{
|
||||
"name": "bad-username-splash",
|
||||
"pattern": "^/accounts/bad-username/?(\\?.*)?$",
|
||||
"routeAlias": "/accounts/bad-username/?$",
|
||||
"view": "bad-username-splash/bad-username-splash",
|
||||
"title": "Account Blocked"
|
||||
},
|
||||
{
|
||||
"name": "vernier",
|
||||
"pattern": "^/vernier/?(\\?.*)?$",
|
||||
|
|
|
|||
293
src/views/bad-username-splash/bad-username-splash.jsx
Normal file
293
src/views/bad-username-splash/bad-username-splash.jsx
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
const injectIntl = require('react-intl').injectIntl;
|
||||
const React = require('react');
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
import {connect} from 'react-redux';
|
||||
import {selectUser, selectHasFetchedSession} from '../../redux/session';
|
||||
const messageActions = require('../../redux/messages.js');
|
||||
const JoinFlowStep = require('../../components/join-flow/join-flow-step.jsx');
|
||||
const FormikInput = require('../../components/formik-forms/formik-input.jsx');
|
||||
import {Formik} from 'formik';
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
const api = require('../../lib/api');
|
||||
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 PIIUsernameMessage = 'username appears to contain personal information';
|
||||
const BadUsernameMessage = 'an inappropriate 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 latestAdminMessage = adminMessages && adminMessages[0] && adminMessages[0].message;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (user && user.username && user.token){
|
||||
getAdminMessages(user.username, user.token);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const handleUpdateUsernameUnbanSubmit = (formData, formikBag) => {
|
||||
setUnauthorizedError(false);
|
||||
setBadUsernameError(false);
|
||||
setAPIError(false);
|
||||
formikBag.setSubmitting(false); // formik makes us do this ourselves
|
||||
|
||||
api({
|
||||
host: '',
|
||||
uri: '/accounts/update_username/',
|
||||
method: 'post',
|
||||
useCsrf: true,
|
||||
json: {
|
||||
new_username: formData.newUsername,
|
||||
username: formData.username,
|
||||
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 {
|
||||
window.location = '/';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (hasSession && (!user || !user.banned)){
|
||||
window.location = '/';
|
||||
}
|
||||
|
||||
if (user && user.banned){
|
||||
return (<div id="bad-username-splash">
|
||||
<div id="force-account-rename">
|
||||
<div id="force-account-rename-inner">
|
||||
<div
|
||||
id="force-account-rename-text"
|
||||
className="col"
|
||||
>
|
||||
<span>
|
||||
<img
|
||||
className="banned-icon"
|
||||
src={bannedIcon}
|
||||
/>
|
||||
<h1 className="inline"><FormattedMessage id="renameAccount.accountBlocked" /></h1>
|
||||
</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) &&
|
||||
(<div>
|
||||
<p><FormattedMessage id="renameAccount.yourScratchAccountInappropriate" /></p>
|
||||
<p><FormattedMessage id="renameAccount.scratchIsForKids" /></p>
|
||||
<p><FormattedMessage
|
||||
id="renameAccount.rememberToFollow"
|
||||
values={{
|
||||
communityGuidelinesLink: (
|
||||
<a
|
||||
href="/community_guidelines"
|
||||
className="white-underline-link"
|
||||
>
|
||||
<FormattedMessage id="renameAccount.CommunityGuidelines" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/></p>
|
||||
</div>)
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<Formik
|
||||
initialValues={{
|
||||
newUsername: '',
|
||||
newUsernameConfirm: '',
|
||||
username: user.username,
|
||||
password: '',
|
||||
canValidate: false
|
||||
}}
|
||||
validate={validateNewUsernameForm}
|
||||
validateOnBlur
|
||||
validateOnChange={false}
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
onSubmit={handleUpdateUsernameUnbanSubmit}
|
||||
>
|
||||
{({
|
||||
errors,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
setFieldError,
|
||||
setFieldTouched,
|
||||
setFieldValue,
|
||||
validateForm
|
||||
}) => (
|
||||
<JoinFlowStep
|
||||
description={<FormattedMessage
|
||||
id="renameAccount.makeSure"
|
||||
values={{
|
||||
communityGuidelinesLink: (
|
||||
<a href="/community_guidelines">
|
||||
<FormattedMessage id="renameAccount.scratchsCommunityGuidelines" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>}
|
||||
innerClassName="change-username-inner"
|
||||
outerClassName="change-username-outer"
|
||||
title={<FormattedMessage id="renameAccount.changeYourUsername" />}
|
||||
waiting={isSubmitting}
|
||||
onSubmit={handleSubmit}
|
||||
nextButton={<FormattedMessage id="renameAccount.change" />}
|
||||
>
|
||||
<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>
|
||||
</JoinFlowStep>)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="admin-message-list">
|
||||
<div id="admin-message-list-title">
|
||||
<b><FormattedMessage id="renameAccount.pastNotifications" /></b>
|
||||
</div>
|
||||
{adminMessages.map(message => (
|
||||
<div
|
||||
className="admin-message"
|
||||
key={message.id}
|
||||
>
|
||||
<div className="admin-message-date">
|
||||
{new Date(message.datetime_created).toDateString()}
|
||||
</div>
|
||||
{/* eslint-disable-next-line react/no-danger */}
|
||||
<div dangerouslySetInnerHTML={{__html: message.message}} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div />;
|
||||
};
|
||||
|
||||
BannedSplash.propTypes = {
|
||||
user: PropTypes.shape({
|
||||
username: PropTypes.string,
|
||||
banned: PropTypes.bool,
|
||||
token: PropTypes.string
|
||||
}),
|
||||
hasSession: PropTypes.bool,
|
||||
adminMessages: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.number.isRequired,
|
||||
datetimeCreated: PropTypes.string.isRequired,
|
||||
message: PropTypes.string.isRequired
|
||||
})),
|
||||
getAdminMessages: PropTypes.func
|
||||
};
|
||||
|
||||
const ConnectedBannedSplash = connect(
|
||||
state => ({
|
||||
user: selectUser(state),
|
||||
hasSession: selectHasFetchedSession(state),
|
||||
adminMessages: state.messages.messages &&
|
||||
state.messages.messages.admin &&
|
||||
state.messages.messages.admin.sort((a, b) =>
|
||||
(b.id - a.id)
|
||||
)
|
||||
}),
|
||||
dispatch => ({
|
||||
getAdminMessages: (username, token) => {
|
||||
dispatch(messageActions.getAdminMessages(
|
||||
username, token, 0
|
||||
));
|
||||
}
|
||||
})
|
||||
)(BannedSplash);
|
||||
|
||||
|
||||
const WrappedBannedSplash = injectIntl(ConnectedBannedSplash);
|
||||
|
||||
render(<Page><WrappedBannedSplash /></Page>, document.getElementById('app'),
|
||||
{messages: messageActions.messagesReducer});
|
||||
134
src/views/bad-username-splash/bad-username-splash.scss
Normal file
134
src/views/bad-username-splash/bad-username-splash.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
.validation-left {
|
||||
transform: translate(-20.5rem, 0);
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
.validation-full-width-input {
|
||||
box-sizing: border-box;
|
||||
transform: unset;
|
||||
margin-bottom: .75rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.inline{
|
||||
display:inline;
|
||||
}
|
||||
|
||||
#bad-username-splash{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#force-account-rename{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
#force-account-rename-inner{
|
||||
max-width: 1094px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@media only screen and (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
|
||||
input{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
background-color: #575E75;
|
||||
.col{
|
||||
padding: 40px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#admin-message-list{
|
||||
display: inline-block;
|
||||
padding: 25px;
|
||||
max-width: 1094px;
|
||||
|
||||
#admin-message-list-title{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-message{
|
||||
text-align: left;
|
||||
.admin-message-date{
|
||||
color: #575E75;
|
||||
font-size: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background-color: #E5F0FF;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#force-account-rename-text{
|
||||
h1, h3, p{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.empty{
|
||||
text-align: left;
|
||||
|
||||
.admin-message{
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.banned-message-box{
|
||||
margin: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.join-flow-outer-content{
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
color: #575e75;
|
||||
max-width: 468px;
|
||||
min-height: auto !important;
|
||||
@media only screen and (max-width: 800px) {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.banned-icon{
|
||||
margin-right: 10px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.modal-flush-bottom-button{
|
||||
background-color: #855CD6;
|
||||
}
|
||||
.modal-flush-bottom-button:hover{
|
||||
background-color: #855CD6;
|
||||
}
|
||||
|
||||
.join-flow-outer-content{
|
||||
border: solid 4px #818698;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.mt5{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.white-underline-link{
|
||||
color: white !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
3
src/views/bad-username-splash/blocked-account.svg
Normal file
3
src/views/bad-username-splash/blocked-account.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66463 34.3035C3.16405 34.7261 3.91148 34.6638 4.33407 34.1643L30.3944 3.36576C30.817 2.86634 30.7547 2.11891 30.2553 1.69632C29.7559 1.27374 29.0084 1.33602 28.5859 1.83544L25.5707 5.39883H7.19999C4.21765 5.39883 1.79999 7.81649 1.79999 10.7988V25.1988C1.79999 27.2974 2.99711 29.1164 4.74571 30.0102L2.52551 32.634C2.10293 33.1335 2.16521 33.8809 2.66463 34.3035ZM6.59065 27.8298L18.6752 13.548H4.49999V25.1988C4.49999 26.4804 5.39295 27.5535 6.59065 27.8298ZM28.8 30.5988H10.4308L12.7154 27.8988H28.8C30.2912 27.8988 31.5 26.69 31.5 25.1988V13.548H24.8584L31.2553 5.98803C33.0033 6.88198 34.2 8.70066 34.2 10.7988V25.1988C34.2 28.1812 31.7823 30.5988 28.8 30.5988Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 838 B |
Loading…
Reference in a new issue