mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
removes far temporarily
This commit is contained in:
tomlum
parent
be2a8ac73d
commit
d121de84e9
5 changed files with 1 additions and 474 deletions
|
|
@ -86,11 +86,7 @@ const handleSessionResponse = (dispatch, body) => {
|
|||
body.user.banned &&
|
||||
banGoodListPaths.every(goodPath => window.location.pathname.indexOf(goodPath) === -1)
|
||||
) {
|
||||
if (body.user.banned_status === 'far_banned'){
|
||||
window.location = '/accounts/bad-username/';
|
||||
} else {
|
||||
window.location = '/accounts/banned-response/';
|
||||
}
|
||||
window.location = '/accounts/banned-response/';
|
||||
return;
|
||||
} else if (
|
||||
body.flags &&
|
||||
|
|
|
|||
|
|
@ -430,13 +430,6 @@
|
|||
"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/?(\\?.*)?$",
|
||||
|
|
|
|||
|
|
@ -1,325 +0,0 @@
|
|||
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;
|
||||
};
|
||||
|
||||
// PII bans won't include the old username
|
||||
const FARUsernameMessage = '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.find(
|
||||
message => message.message.includes(FARUsernameMessage)
|
||||
);
|
||||
|
||||
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 {
|
||||
setUsernameChangeSuccess(true);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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.message.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>
|
||||
<p><FormattedMessage id="renameAccount.yourScratchAccount" /></p>
|
||||
<p><FormattedMessage id="renameAccount.privacyIssue" /></p>
|
||||
<p><FormattedMessage id="renameAccount.thingsToAvoid" /></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,
|
||||
values
|
||||
}) => (
|
||||
<JoinFlowStep
|
||||
headerImgClass="welcome-step-image"
|
||||
headerImgSrc={usernameChangeSuccess ? '/images/join-flow/welcome-header.png' : null}
|
||||
description={<FormattedMessage
|
||||
className="test123"
|
||||
id={usernameChangeSuccess ?
|
||||
'renameAccount.welcomeBack' :
|
||||
'renameAccount.makeSure'
|
||||
}
|
||||
values={{
|
||||
communityGuidelinesLink: (
|
||||
<a href="/community_guidelines">
|
||||
<FormattedMessage id="renameAccount.scratchsCommunityGuidelines" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>}
|
||||
innerClassName="change-username-inner"
|
||||
outerClassName="change-username-outer"
|
||||
title={<FormattedMessage
|
||||
id={usernameChangeSuccess ?
|
||||
'renameAccount.changeYourUsernameSuccess' :
|
||||
'renameAccount.changeYourUsername'}
|
||||
/>}
|
||||
waiting={isSubmitting}
|
||||
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>
|
||||
}
|
||||
>
|
||||
{usernameChangeSuccess ?
|
||||
(<div />) :
|
||||
(<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"
|
||||
autocomplete="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});
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 838 B |
Loading…
Reference in a new issue