mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Tom Lum
GitHub
commit
ddc63f11f8
5 changed files with 1 additions and 440 deletions
|
|
@ -16,7 +16,6 @@ const banGoodListPaths = [
|
|||
'/ip_ban_appeal',
|
||||
'/vpn_required',
|
||||
'/accounts/banned-response',
|
||||
'/accounts/bad-username',
|
||||
'/community_guidelines',
|
||||
'/privacy_policy',
|
||||
'/terms_of_use'
|
||||
|
|
@ -86,11 +85,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,290 +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;
|
||||
};
|
||||
|
||||
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});
|
||||
|
|
@ -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