+ 
-
-
- + ) } } @@ -48,18 +58,18 @@ const EmailConfirmationModal = ({
{email}
-
+ {showFooter && (
)}
);
};
EmailConfirmationModal.propTypes = {
email: PropTypes.string,
isOpen: PropTypes.bool,
+ userUsesParentEmail: PropTypes.bool,
onRequestClose: PropTypes.func
};
const mapStateToProps = state => ({
diff --git a/src/components/onboarding-navigation/onboarding-navigation.jsx b/src/components/onboarding-navigation/onboarding-navigation.jsx
new file mode 100644
index 000000000..71d5421c1
--- /dev/null
+++ b/src/components/onboarding-navigation/onboarding-navigation.jsx
@@ -0,0 +1,80 @@
+import React, {useEffect, useMemo} from 'react';
+import Button from '../forms/button.jsx';
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+
+import './onboarding-navigation.scss';
+import classNames from 'classnames';
+
+const OnboardingNavigation = ({
+ currentPage,
+ totalDots,
+ onNextPage,
+ onBackPage,
+ nextButtonText
+}) => {
+ useEffect(() => {
+ new Image().src = '/images/onboarding/right-arrow.svg';
+ new Image().src = '/images/onboarding/left-arrow.svg';
+ }, []);
+
+ const dots = useMemo(() => {
+ const dotsComponents = [];
+ if (currentPage >= 0 && totalDots){
+ for (let i = 0; i < totalDots; i++){
+ dotsComponents.push();
+ }
+ }
+ return dotsComponents;
+ }, [currentPage, totalDots]);
+
+ return (
+
{showEmailTips ?
(
) :
(
{ // eslint-disable-line react/jsx-no-bind
@@ -83,17 +93,18 @@ const EmailConfirmationModal = ({
setShowEmailTips(true);
}}
>
- )}
-
+
+ {
+ }
+ {(currentPage >= 0 && totalDots) &&
+
+
+ );
+};
+OnboardingNavigation.propTypes = {
+ currentPage: PropTypes.number,
+ totalDots: PropTypes.number,
+ onNextPage: PropTypes.func,
+ onBackPage: PropTypes.func,
+ nextButtonText: PropTypes.node
+};
+
+export default OnboardingNavigation;
diff --git a/src/components/onboarding-navigation/onboarding-navigation.scss b/src/components/onboarding-navigation/onboarding-navigation.scss
new file mode 100644
index 000000000..dbfa2e11d
--- /dev/null
+++ b/src/components/onboarding-navigation/onboarding-navigation.scss
@@ -0,0 +1,68 @@
+@import "../../colors";
+@import "../../frameless";
+
+.button{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: .3rem;
+
+ .left-arrow{
+ padding-right: 4px;
+ @media #{$small} {
+ padding: 0px;
+ }
+ }
+ .right-arrow{
+ padding-left: 4px;
+ @media #{$small} {
+ padding: 0px;
+ }
+ }
+}
+
+.hidden{
+ visibility: hidden;
+}
+
+.navigation{
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ align-items: center;
+ margin-bottom: 40px;
+
+ .dotRow{
+ display: flex;
+ justify-content: space-between;
+ width: 244px;
+ min-width: 0px;
+ padding: 0px 5px;
+ }
+
+ .dot{
+ width: 20px;
+ height: 20px;
+ border-radius: 100%;
+ background-color: #d9d9d9;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .active{
+ border: solid 2px #4280d9;
+ background-color: #4c97fe;
+ margin-top: -2px;
+ }
+
+ .navText{
+ @media #{$small} {
+ display: none;
+ }
+ }
+
+ .buttonPlaceholder{
+ width: 20px,
+ }
+}
\ No newline at end of file
diff --git a/src/l10n.json b/src/l10n.json
index d30b11b1b..caf294525 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -209,6 +209,8 @@
"registration.genderOptionAnother": "Another gender:",
"registration.genderOptionPreferNotToSay": "Prefer not to say",
"registration.emailStepTitle": "What's your email?",
+ "registration.under16.emailStepTitle": "What's your parent's email address?",
+ "registration.under16.emailStepDescription": "We'll send them a link to verify your account.",
"registration.emailStepInfo": "This will help if you forget your password. This information will not be made public on your account.",
"registration.goToClass": "Go to Class",
"registration.invitedBy": "invited by",
@@ -226,6 +228,7 @@
"registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
"registration.private": "We will keep this information private.",
"registration.problemsAre": "The problems are:",
+ "registration.reviewGuidelines": "Review Community Guidelines",
"registration.selectCountry": "Select country",
"registration.startOverInstruction": "Click \"Start over.\"",
"registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",
@@ -262,6 +265,7 @@
"registration.welcomeStepDescription": "You have successfully set up a Scratch account! You are now a member of the class:",
"registration.welcomeStepDescriptionNonEducator": "You’re now logged in! You can start exploring and creating projects.",
"registration.welcomeStepInstructions": "Want to share and comment? Click the link on the email we sent to {email}.",
+ "registration.under16.welcomeStepInstructions": "In order to share projects and participate in the Scratch community, your parent needs to confirm your account. They can click on the link in the email we sent to {email}.",
"registration.welcomeStepPrompt": "To get started, click on the button below.",
"registration.welcomeStepTitle": "Hurray! Welcome to Scratch!",
"registration.welcomeStepTitleNonEducator": "Welcome to Scratch, {username}!",
@@ -270,6 +274,9 @@
"emailConfirmationBanner.confirmLinkText": "Confirm your email",
"emailConfirmationBanner.faqLinkText": "Having trouble?",
+ "emailConfirmationBanner.parentEmail.confirm": "A parent needs to {confirmLink} before you can share projects.",
+ "emailConfirmationBanner.parentEmail.confirmLinkText": "confirm your account",
+
"emailConfirmationModal.confirm": "Confirm your email",
"emailConfirmationModal.wantToShare": "Want to share on Scratch?",
"emailConfirmationModal.clickEmailLink": "Confirm your email address by clicking the link in the email we sent to:",
@@ -284,6 +291,18 @@
"emailConfirmationModal.havingTrouble": "Having Trouble? {tipsLink}",
"emailConfirmationModal.checkOutTips": "Check out these tips",
+ "emailConfirmationModal.parentEmail.confirm": "Confirm your account",
+ "emailConfirmationModal.parentEmail.wantToShare": "Want to share on Scratch?",
+ "emailConfirmationModal.parentEmail.clickEmailLink": "Your parent needs to click on the link in the email we sent to:",
+ "emailConfirmationModal.parentEmail.resendEmail": "Resend confirmation email",
+ "emailConfirmationModal.parentEmail.confirmingTips": "Tips for confirming your email address",
+ "emailConfirmationModal.parentEmail.tipWaitTenMinutes": "Wait for ten minutes. The email may take a while to arrive.",
+ "emailConfirmationModal.parentEmail.tipCheckSpam": "Ask your parent to check their spam folder.",
+ "emailConfirmationModal.parentEmail.correctEmail": "Make sure your parent's email address is correct. Check your {accountSettings}.",
+ "emailConfirmationModal.parentEmail.accountSettings": "Account Settings",
+ "emailConfirmationModal.parentEmail.havingTrouble": "Having Trouble? {tipsLink}",
+ "emailConfirmationModal.parentEmail.checkOutTips": "Check out these tips",
+
"thumbnail.by": "by",
"report.error": "Something went wrong when trying to send your message. Please try again.",
"report.project": "Report Project",
@@ -463,7 +482,7 @@
"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.",
"privacyBanner.update": "The Scratch privacy policy has been updated, effective May 25, 2023. You can see the new policy here.",
-
+
"renameAccount.accountBlocked": "Account Blocked",
"renameAccount.toRecover": "To recover access to your account, change your username.",
"renameAccount.yourScratchAccount": "Your scratch account has been temporarily blocked because your username appears to contain personal information.",
@@ -480,5 +499,33 @@
"renameAccount.scratchsCommunityGuidelines": "Scratch's Community Guidelines",
"renameAccount.change": "Change",
"renameAccount.goToProfile": "Go to your profile",
- "renameAccount.pastNotifications": "Here are your past admin notifications"
+ "renameAccount.pastNotifications": "Here are your past admin notifications",
+
+ "communityGuidelines.buttons.back": "Back",
+ "communityGuidelines.buttons.next": "Next",
+ "communityGuidelines.buttons.finish": "I Agree",
+ "communityGuidelines.guidelines.respectSection": "Become a New Scratcher - Treat everyone with respect",
+ "communityGuidelines.guidelines.respectHeader": "New Scratchers treat everyone with respect.",
+ "communityGuidelines.guidelines.respectBody": "Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same.",
+ "communityGuidelines.guidelines.safeSection": "Become a New Scratcher - Be safe",
+ "communityGuidelines.guidelines.safeHeader": "New Scratchers are safe: we keep personal and contact information private.",
+ "communityGuidelines.guidelines.safeBody": "This includes not sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.",
+ "communityGuidelines.guidelines.feedbackSection": "Become a New Scratcher - Give helpful feedback",
+ "communityGuidelines.guidelines.feedbackHeader": "New Scratchers give helpful feedback.",
+ "communityGuidelines.guidelines.feedbackBody": "When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical.",
+ "communityGuidelines.guidelines.remix1Section": "Become a New Scratcher - Embrace remix culture",
+ "communityGuidelines.guidelines.remix1Header": "New Scratchers embrace remix culture.",
+ "communityGuidelines.guidelines.remix1Body": "Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.",
+ "communityGuidelines.guidelines.remix2Section": "Become a New Scratcher - Embrace remix culture",
+ "communityGuidelines.guidelines.remix2Header": "Remixing is a great way to collaborate and connect with other Scratchers.",
+ "communityGuidelines.guidelines.remix2Body": "You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. ",
+ "communityGuidelines.guidelines.remix3Section": "Become a New Scratcher - Embrace remix culture",
+ "communityGuidelines.guidelines.remix3Header": "Remixing means sharing with others.",
+ "communityGuidelines.guidelines.remix3Body": "When you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.",
+ "communityGuidelines.guidelines.honestSection": "Become a New Scratcher - Be honest",
+ "communityGuidelines.guidelines.honestHeader": "New Scratchers are honest.",
+ "communityGuidelines.guidelines.honestBody": "It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account.",
+ "communityGuidelines.guidelines.friendlySection": "Become a New Scratcher - Keep the site friendly",
+ "communityGuidelines.guidelines.friendlyHeader": "New Scratchers help keep the site friendly.",
+ "communityGuidelines.guidelines.friendlyBody": "It’s important to keep your creations and conversations friendly and appropriate for all ages. If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it."
}
diff --git a/src/redux/navigation.js b/src/redux/navigation.js
index 5c2c37623..a1857e7ae 100644
--- a/src/redux/navigation.js
+++ b/src/redux/navigation.js
@@ -15,7 +15,9 @@ const Types = keyMirror({
TOGGLE_LOGIN_OPEN: null,
SET_CANCELED_DELETION_OPEN: null,
SET_REGISTRATION_OPEN: null,
- HANDLE_REGISTRATION_REQUESTED: null
+ HANDLE_REGISTRATION_REQUESTED: null,
+ HANDLE_REGISTRATION_COMPLETED: null,
+ REVIEW_COMMUNITY_GUIDELINES: null
});
module.exports.getInitialState = () => ({
@@ -25,6 +27,9 @@ module.exports.getInitialState = () => ({
loginError: null,
loginOpen: false,
registrationOpen: false,
+ // This is set shortly before changing the window.location (hence refreshing the page)
+ // We need something more durable than redux state in that case -> so we use `localStorage`
+ shouldReviewCommunityGuidelines: localStorage.getItem('shouldReviewCommunityGuidelines') === 'true',
searchTerm: ''
});
@@ -56,6 +61,12 @@ module.exports.navigationReducer = (state, action) => {
return state;
}
return defaults({registrationOpen: true}, state);
+ case Types.HANDLE_REGISTRATION_COMPLETED:
+ localStorage.setItem('shouldReviewCommunityGuidelines', 'true');
+ return defaults({shouldReviewCommunityGuidelines: true}, state);
+ case Types.REVIEW_COMMUNITY_GUIDELINES:
+ localStorage.setItem('shouldReviewCommunityGuidelines', 'false');
+ return defaults({shouldReviewCommunityGuidelines: false}, state);
default:
return state;
}
@@ -103,6 +114,14 @@ module.exports.handleRegistrationRequested = () => ({
type: Types.HANDLE_REGISTRATION_REQUESTED
});
+module.exports.handleRegistrationCompleted = () => ({
+ type: Types.HANDLE_REGISTRATION_COMPLETED
+});
+
+module.exports.reviewCommunityGuidelines = () => ({
+ type: Types.REVIEW_COMMUNITY_GUIDELINES
+});
+
module.exports.handleCompleteRegistration = createProject => (dispatch => {
if (createProject) {
// TODO: Ideally this would take you to the editor with the getting started
@@ -114,6 +133,7 @@ module.exports.handleCompleteRegistration = createProject => (dispatch => {
dispatch(module.exports.setRegistrationOpen(false))
);
}
+ dispatch(module.exports.handleRegistrationCompleted());
});
module.exports.handleLogIn = (formData, callback) => (dispatch => {
diff --git a/src/views/become-a-scratcher/become-a-scratcher.jsx b/src/views/become-a-scratcher/become-a-scratcher.jsx
index 2a05cad3d..e674847d1 100644
--- a/src/views/become-a-scratcher/become-a-scratcher.jsx
+++ b/src/views/become-a-scratcher/become-a-scratcher.jsx
@@ -1,5 +1,5 @@
/* eslint-disable react/jsx-no-bind */
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
import useWindowSize from 'react-use/lib/useWindowSize';
import Confetti from 'react-confetti';
import {FormattedMessage, injectIntl} from 'react-intl';
@@ -14,63 +14,14 @@ import Button from '../../components/forms/button.jsx';
import Modal from '../../components/modal/base/modal.jsx';
import NotAvailable from '../../components/not-available/not-available.jsx';
import WarningBanner from '../../components/title-banner/warning-banner.jsx';
+import OnboardingNavigation from '../../components/onboarding-navigation/onboarding-navigation.jsx';
+import {
+ CommunityGuidelines,
+ communityGuidelines
+} from '../../components/community-guidelines/community-guidelines.jsx';
import './become-a-scratcher.scss';
-const communityGuidelines = [
- {
- section: 'becomeAScratcher.guidelines.respectSection',
- header: 'becomeAScratcher.guidelines.respectHeader',
- body: 'becomeAScratcher.guidelines.respectBody',
- image: 'respect-illustration.svg',
- imageLeft: true
- },
- {
- section: 'becomeAScratcher.guidelines.safeSection',
- header: 'becomeAScratcher.guidelines.safeHeader',
- body: 'becomeAScratcher.guidelines.safeBody',
- image: 'safe-illustration.svg'
- },
- {
- section: 'becomeAScratcher.guidelines.feedbackSection',
- header: 'becomeAScratcher.guidelines.feedbackHeader',
- body: 'becomeAScratcher.guidelines.feedbackBody',
- image: 'feedback-illustration.svg',
- imageLeft: true
- },
- {
- section: 'becomeAScratcher.guidelines.remix1Section',
- header: 'becomeAScratcher.guidelines.remix1Header',
- body: 'becomeAScratcher.guidelines.remix1Body',
- image: 'remix-illustration-1.svg'
- },
- {
- section: 'becomeAScratcher.guidelines.remix2Section',
- header: 'becomeAScratcher.guidelines.remix2Header',
- body: 'becomeAScratcher.guidelines.remix2Body',
- image: 'remix-illustration-2.svg'
- },
- {
- section: 'becomeAScratcher.guidelines.remix3Section',
- header: 'becomeAScratcher.guidelines.remix3Header',
- body: 'becomeAScratcher.guidelines.remix3Body',
- image: 'remix-illustration-3.svg'
- },
- {
- section: 'becomeAScratcher.guidelines.honestSection',
- header: 'becomeAScratcher.guidelines.honestHeader',
- body: 'becomeAScratcher.guidelines.honestBody',
- image: 'honest-illustration.svg',
- imageLeft: true
- },
- {
- section: 'becomeAScratcher.guidelines.friendlySection',
- header: 'becomeAScratcher.guidelines.friendlyHeader',
- body: 'becomeAScratcher.guidelines.friendlyBody',
- image: 'friendly-illustration.svg'
- }
-];
-
/* eslint-disable max-len */
const confettiPaths = [
new Path2D('M34.549 3.1361L40.613 15.4191L54.1718 17.3947C58.7918 18.0636 60.6345 23.7378 57.2946 26.9979L47.4788 36.5612L49.7954 50.0668C50.5839 54.6646 45.7557 58.1728 41.6274 56.0024L29.4994 49.6239L17.3714 56.0024C13.2386 58.1728 8.4149 54.6646 9.19893 50.0668L11.52 36.5612L1.70862 26.9979C-1.63567 23.7378 0.20701 18.0636 4.82699 17.3947L18.3902 15.4191L24.4497 3.1361C26.5183 -1.04537 32.4805 -1.04537 34.549 3.1361Z'),
@@ -78,9 +29,9 @@ const confettiPaths = [
new Path2D('M10.9967 45.1305C5.99892 36.9346 5.59074 25.9968 9.99448 17.3259C14.5575 8.00641 22.2367 3.87569 25.3229 2.53264C27.178 1.67111 29.1327 0.999586 31.2366 0.504948L33.3008 0.0594462C34.8174 -0.25175 36.3273 0.68839 36.6558 2.18868C36.9877 3.69225 36.022 5.17289 34.4988 5.50047L32.491 5.93286C30.8218 6.32595 29.2223 6.87628 27.6625 7.6035C25.6349 8.4814 18.9281 11.8783 15.0586 19.786C12.1217 25.5612 11.2456 34.7431 15.8683 42.3199C20.0564 49.6183 28.6315 54.0929 36.7654 53.3395C44.4578 52.7859 51.5164 47.6659 53.992 40.8851C56.5042 34.5072 54.835 27.9688 52.0772 24.2869C48.7553 19.75 44.6204 18.3545 42.9976 17.9647C42.7554 17.8926 37.074 16.186 32.0563 18.6985C29.8959 19.7336 27.1017 22.0627 25.605 25.5612C23.9889 29.1743 24.407 33.8193 26.5973 36.9051C28.8008 40.2136 32.9556 42.0873 36.5297 41.4518C40.0872 40.8917 42.4932 38.2449 43.064 35.9191C43.7343 33.4197 42.7056 31.3068 41.9025 30.5468C40.5386 29.2005 39.3605 29.1776 39.3107 29.1743C38.7532 29.1579 38.4777 29.2005 38.3118 29.2267C37.6746 29.4593 36.772 29.9703 36.5065 30.5075C36.46 30.596 36.3406 30.8384 36.5696 31.4444C37.1171 32.8825 36.3771 34.4908 34.9202 35.0313C33.47 35.5751 31.8373 34.8446 31.2864 33.4033C30.3804 31.0186 30.8815 29.1514 31.4623 28.0049C32.9789 25.0207 36.4999 23.9397 36.8981 23.825C37.0806 23.7693 37.2731 23.7366 37.4623 23.7202C37.8505 23.6612 38.5342 23.5695 39.46 23.6055C41.5806 23.6317 43.9965 24.7389 45.8483 26.5701C48.0352 28.6338 49.7476 32.7809 48.533 37.2883C47.3483 42.1135 42.7952 46.1034 37.4822 46.9387C31.7676 47.9575 25.3329 45.1403 21.9347 40.0334C18.6593 35.431 18.032 28.696 20.4281 23.3533C23.0564 17.2014 28.0773 14.4171 29.5508 13.7095C36.6359 10.1717 44.2089 12.5073 44.5275 12.6056C46.5651 13.0871 52.2299 14.9838 56.6336 21.0013C60.0186 25.5284 62.763 33.9831 59.2752 42.8342C56.0894 51.5575 47.0197 58.1843 37.2399 58.8886C36.4733 58.9607 35.6968 59 34.9236 59C25.4325 59 15.8186 53.5295 10.9967 45.1305Z')
];
-const OnboardingHeader = ({user, sectionText, secondary}) => {
+// eslint-disable-next-line no-unused-vars
+const OnboardingHeader = ({user, section, secondary}) => {
const [showModal, setShowModal] = useState(false);
-
return (
+ {dots}
+
}
+
+
{/* Finish Later Modal */}
@@ -126,7 +77,11 @@ const OnboardingHeader = ({user, sectionText, secondary}) => {
- {sectionText}
+
+ {/* TODO: The section prop was never actually visualised here (previously the prop name differed from the one passed).
+ Should it be visualised, or should it be removed from the guidelines entirely? */}
+ {null}
+