Merge branch 'develop' into fixes/editor-is-a-focus-trap

Author: raclim

client/modules/IDE/components/Editor/MobileEditor.jsx

@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {

client/modules/IDE/components/Editor/index.jsx

@@ -517,7 +517,7 @@ class Editor extends React.Component {
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <header className="editor__header">
+              <div className="editor__header">
                 <button
                   aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__contract"
@@ -542,7 +542,7 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-              </header>
+              </div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -559,7 +559,7 @@ class Editor extends React.Component {
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
-              <header>
+              <>
                 <IconButton
                   onClick={this.props.expandSidebar}
                   icon={FolderIcon}
@@ -568,7 +568,7 @@ class Editor extends React.Component {
                   {this.props.file.name}
                   <UnsavedChangesIndicator />
                 </span>
-              </header>
+              </>
               <section>
                 <EditorHolder
                   ref={(element) => {

client/modules/IDE/components/Header/Nav.jsx

@@ -270,7 +270,7 @@ const UnauthenticatedUserMenu = () => {
           </span>
         </Link>
       </li>
-      <span className="nav__item-or">{t('Nav.LoginOr')}</span>
+      <li className="nav__item-or">{t('Nav.LoginOr')}</li>
       <li className="nav__item">
         <Link to="/signup" className="nav__auth-button">
           <span className="nav__item-header" title="SignUp">

client/modules/IDE/components/Header/index.jsx

@@ -12,12 +12,12 @@ const Header = (props) => {
   const isMobile = useIsMobile();
 
   return (
-    <header>
+    <>
       <Nav />
       {!isMobile && (
         <Toolbar syncFileContent={props.syncFileContent} key={project.id} />
       )}
-    </header>
+    </>
   );
 };
 

client/modules/IDE/hooks/useSketchActions.js

@@ -16,6 +16,7 @@ const useSketchActions = () => {
   const unsavedChanges = useSelector((state) => state.ide.unsavedChanges);
   const authenticated = useSelector((state) => state.user.authenticated);
   const project = useSelector((state) => state.project);
+  const user = useSelector((state) => state.user);
   const canEditProjectName = useSelector(selectCanEditSketch);
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -40,8 +41,10 @@ const useSketchActions = () => {
   }
 
   function downloadSketch() {
-    dispatch(autosaveProject());
-    exportProjectAsZip(project.id);
+    if (authenticated && user.id === project.owner.id) {
+      dispatch(autosaveProject());
+      exportProjectAsZip(project.id);
+    }
   }
 
   function shareSketch() {

kubernetes_app.yml

@@ -65,7 +65,7 @@ spec:
   selector:
     matchLabels:
       app: web-editor
-  replicas: 3
+  replicas: 4
   template:
     metadata:
       labels:
@@ -99,8 +99,8 @@ metadata:
   name: web-editor-node
   namespace: production
 spec:
-  maxReplicas: 6
-  minReplicas: 2
+  maxReplicas: 9
+  minReplicas: 3
   scaleTargetRef:
     apiVersion: extensions/v1beta1
     kind: Deployment

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.12.11",
+  "version": "2.12.13",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

@@ -295,6 +295,16 @@ export async function updateSettings(req, res) {
     }
     user.username = req.body.username;
 
+    if (req.body.newPassword) {
+      if (user.password === undefined) {
+        user.password = req.body.newPassword;
+        saveUser(res, user);
+      }
+      if (!req.body.currentPassword) {
+        res.status(401).json({ error: 'Current password is not provided.' });
+        return;
+      }
+    }
     if (req.body.currentPassword) {
       const isMatch = await user.comparePassword(req.body.currentPassword);
       if (!isMatch) {

server/controllers/user.controller.js

@@ -9,8 +9,8 @@ function draw() {
 export const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 

server/domain-objects/createDefaultFiles.js

@@ -15,12 +15,24 @@ const app = new Express();
 // This also works if you take out the mongoose connection
 // but i have no idea why
 const mongoConnectionString = process.env.MONGO_URL;
+
 // Connect to MongoDB
-mongoose.Promise = global.Promise;
-mongoose.connect(mongoConnectionString, {
-  useNewUrlParser: true,
-  useUnifiedTopology: true
-});
+const connectToMongoDB = async () => {
+  try {
+    await mongoose.connect(mongoConnectionString, {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+      useCreateIndex: true,
+      useFindAndModify: false
+    });
+  } catch (error) {
+    console.error('Failed to connect to MongoDB: ', error);
+    process.exit(1);
+  }
+};
+
+connectToMongoDB();
+
 mongoose.set('useCreateIndex', true);
 mongoose.connection.on('error', () => {
   console.error(

server/previewServer.js

@@ -152,11 +152,22 @@ app.use('/', passportRoutes);
 require('./config/passport');
 
 // Connect to MongoDB
-mongoose.Promise = global.Promise;
-mongoose.connect(mongoConnectionString, {
-  useNewUrlParser: true,
-  useUnifiedTopology: true
-});
+const connectToMongoDB = async () => {
+  try {
+    await mongoose.connect(mongoConnectionString, {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+      useCreateIndex: true,
+      useFindAndModify: false
+    });
+  } catch (error) {
+    console.error('Failed to connect to MongoDB: ', error);
+    process.exit(1);
+  }
+};
+
+connectToMongoDB();
+
 mongoose.set('useCreateIndex', true);
 mongoose.connection.on('error', () => {
   console.error(

server/server.js

@@ -109,7 +109,6 @@
       "PrivacyPolicy": "गोपनीयता नीति",
       "TermsOfUse": "उपयोग की शर्तें",
       "CodeOfConduct": "आचार संहिता"
-      "WebEditor": "वेब एडिटर"
     },
     "Toast": {
       "OpenedNewSketch": "नया स्केच खोला",

translations/locales/hi/translations.json

@@ -358,7 +358,8 @@
       "Description": "ユーザー登録",
       "Or": "もしくは",
       "AlreadyHave": "既にアカウントをお持ちですか？",
-      "Login": "ログイン"
+      "Login": "ログイン",
+      "Warning": "アカウント作成をすると、p5.js エディターの <0>利用規約</0> と <1>プライバシー ポリシー</1> に同意したことになります。"
     },
     "EmailVerificationView": {
       "Title": "p5.js ウェブエディター | メールアドレス認証",