scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #7762 from scratchfoundation/revert-7759-FAR-Revert

Browse source 
Revert "revert FAR"
This commit is contained in:
Tom Lum 2023-07-26 13:23:12 -04:00 committed by GitHub
commit faf84d0cfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 440 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/redux/session.js
View file

@ -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 &&

7
src/routes.json
View file

@ -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/?(\\?.*)?$",

290
src/views/bad-username-splash/bad-username-splash.jsx Normal file
View file

@ -0,0 +1,290 @@
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
View 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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 838 B