add message if images take long when loading so that user is not stuck

fix google profile picture issue
fix coloring for meal categories
hide plan button if user navigates from plans
change nickname to username

client/package-lock.json

@@ -36,7 +36,6 @@
         "react-scripts": "^2.1.3",
         "react-select": "^4.3.0",
         "react-swipeable-views": "^0.13.9",
-        "react-switch-selector": "^1.2.1",
         "web-vitals": "^0.2.4"
       },
       "devDependencies": {
@@ -2130,125 +2129,11 @@
         "stylis": "4.1.3"
       }
     },
-    "node_modules/@emotion/core": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz",
-      "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/cache": "^10.0.27",
-        "@emotion/css": "^10.0.27",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/sheet": "0.9.4",
-        "@emotion/utils": "0.11.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/cache": {
-      "version": "10.0.29",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "dependencies": {
-        "@emotion/sheet": "0.9.4",
-        "@emotion/stylis": "0.8.5",
-        "@emotion/utils": "0.11.3",
-        "@emotion/weak-memoize": "0.2.5"
-      }
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dependencies": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      }
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/sheet": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-    },
-    "node_modules/@emotion/core/node_modules/@emotion/weak-memoize": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-    },
-    "node_modules/@emotion/css": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "dependencies": {
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3",
-        "babel-plugin-emotion": "^10.0.27"
-      }
-    },
-    "node_modules/@emotion/css/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "node_modules/@emotion/css/node_modules/@emotion/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dependencies": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      }
-    },
-    "node_modules/@emotion/css/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "node_modules/@emotion/css/node_modules/@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
     "node_modules/@emotion/memoize": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
@@ -2304,66 +2189,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
       "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
-    "node_modules/@emotion/styled": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz",
-      "integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==",
-      "dependencies": {
-        "@emotion/styled-base": "^10.3.0",
-        "babel-plugin-emotion": "^10.0.27"
-      },
-      "peerDependencies": {
-        "@emotion/core": "^10.0.27",
-        "react": ">=16.3.0"
-      }
-    },
-    "node_modules/@emotion/styled-base": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz",
-      "integrity": "sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/is-prop-valid": "0.8.8",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3"
-      },
-      "peerDependencies": {
-        "@emotion/core": "^10.0.28",
-        "react": ">=16.3.0"
-      }
-    },
-    "node_modules/@emotion/styled-base/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "node_modules/@emotion/styled-base/node_modules/@emotion/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dependencies": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      }
-    },
-    "node_modules/@emotion/styled-base/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "node_modules/@emotion/styled-base/node_modules/@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-    },
-    "node_modules/@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
@@ -4604,66 +4429,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "node_modules/babel-plugin-emotion": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
-      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/serialize": "^0.11.16",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      }
-    },
-    "node_modules/babel-plugin-emotion/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "node_modules/babel-plugin-emotion/node_modules/@emotion/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dependencies": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      }
-    },
-    "node_modules/babel-plugin-emotion/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "node_modules/babel-plugin-emotion/node_modules/@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-    },
-    "node_modules/babel-plugin-emotion/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/babel-plugin-emotion/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/babel-plugin-istanbul": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
@@ -5030,11 +4795,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
-    },
     "node_modules/babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -24851,19 +24611,6 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
       "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
     },
-    "node_modules/react-switch-selector": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/react-switch-selector/-/react-switch-selector-1.2.1.tgz",
-      "integrity": "sha512-Ep018wZ6OwtPpAbD6eYrFuXri/S+Ggic9BaJLO2ENR4h2PCNAtPfI8t8dssshnUcgP8OVWTs7Nr/fvOZDhfeBw==",
-      "dependencies": {
-        "@emotion/core": "^10.0.27",
-        "@emotion/styled": "^10.0.27"
-      },
-      "peerDependencies": {
-        "react": "^16.10.2",
-        "react-dom": "^16.10.2"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -31234,128 +30981,11 @@
         "stylis": "4.1.3"
       }
     },
-    "@emotion/core": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz",
-      "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/cache": "^10.0.27",
-        "@emotion/css": "^10.0.27",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/sheet": "0.9.4",
-        "@emotion/utils": "0.11.3"
-      },
-      "dependencies": {
-        "@emotion/cache": {
-          "version": "10.0.29",
-          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-          "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-          "requires": {
-            "@emotion/sheet": "0.9.4",
-            "@emotion/stylis": "0.8.5",
-            "@emotion/utils": "0.11.3",
-            "@emotion/weak-memoize": "0.2.5"
-          }
-        },
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-        },
-        "@emotion/serialize": {
-          "version": "0.11.16",
-          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-          "requires": {
-            "@emotion/hash": "0.8.0",
-            "@emotion/memoize": "0.7.4",
-            "@emotion/unitless": "0.7.5",
-            "@emotion/utils": "0.11.3",
-            "csstype": "^2.5.7"
-          }
-        },
-        "@emotion/sheet": {
-          "version": "0.9.4",
-          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-          "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
-        },
-        "@emotion/unitless": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-        },
-        "@emotion/utils": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-        },
-        "@emotion/weak-memoize": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-          "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-        }
-      }
-    },
-    "@emotion/css": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "requires": {
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3",
-        "babel-plugin-emotion": "^10.0.27"
-      },
-      "dependencies": {
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-        },
-        "@emotion/serialize": {
-          "version": "0.11.16",
-          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-          "requires": {
-            "@emotion/hash": "0.8.0",
-            "@emotion/memoize": "0.7.4",
-            "@emotion/unitless": "0.7.5",
-            "@emotion/utils": "0.11.3",
-            "csstype": "^2.5.7"
-          }
-        },
-        "@emotion/unitless": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-        },
-        "@emotion/utils": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-        }
-      }
-    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
-    "@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "requires": {
-        "@emotion/memoize": "0.7.4"
-      },
-      "dependencies": {
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-        }
-      }
-    },
     "@emotion/memoize": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
@@ -31405,60 +31035,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
       "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
-    "@emotion/styled": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz",
-      "integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==",
-      "requires": {
-        "@emotion/styled-base": "^10.3.0",
-        "babel-plugin-emotion": "^10.0.27"
-      }
-    },
-    "@emotion/styled-base": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz",
-      "integrity": "sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/is-prop-valid": "0.8.8",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3"
-      },
-      "dependencies": {
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-        },
-        "@emotion/serialize": {
-          "version": "0.11.16",
-          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-          "requires": {
-            "@emotion/hash": "0.8.0",
-            "@emotion/memoize": "0.7.4",
-            "@emotion/unitless": "0.7.5",
-            "@emotion/utils": "0.11.3",
-            "csstype": "^2.5.7"
-          }
-        },
-        "@emotion/unitless": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-        },
-        "@emotion/utils": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-        }
-      }
-    },
-    "@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
     "@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
@@ -33230,62 +32806,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-emotion": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
-      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/serialize": "^0.11.16",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      },
-      "dependencies": {
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-        },
-        "@emotion/serialize": {
-          "version": "0.11.16",
-          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-          "requires": {
-            "@emotion/hash": "0.8.0",
-            "@emotion/memoize": "0.7.4",
-            "@emotion/unitless": "0.7.5",
-            "@emotion/utils": "0.11.3",
-            "csstype": "^2.5.7"
-          }
-        },
-        "@emotion/unitless": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-        },
-        "@emotion/utils": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
-        }
-      }
-    },
     "babel-plugin-istanbul": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
@@ -33575,11 +33095,6 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
-    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -48982,15 +48497,6 @@
         }
       }
     },
-    "react-switch-selector": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/react-switch-selector/-/react-switch-selector-1.2.1.tgz",
-      "integrity": "sha512-Ep018wZ6OwtPpAbD6eYrFuXri/S+Ggic9BaJLO2ENR4h2PCNAtPfI8t8dssshnUcgP8OVWTs7Nr/fvOZDhfeBw==",
-      "requires": {
-        "@emotion/core": "^10.0.27",
-        "@emotion/styled": "^10.0.27"
-      }
-    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

client/src/components/ContentWrapper.jsx

@@ -15,7 +15,6 @@ import EditProfile from "./Settings/EditProfile";
 import ShoppingList from "./Plans/ShoppingList";
 import OwnMeals from "./Meals/OwnMeals";
 import AddMeal from "./Meals/AddMeal";
-import MealDetailViewExtern from "./Meals/MealDetailViewExtern";
 import MealDetailView from "./Meals/MealDetailView";
 import EditMeal from "./Meals/EditMeal";
 import EditPlanItem from "./Plans/EditPlanItem";
@@ -48,7 +47,6 @@ const ContentWrapper = (props) => {
           <Route path="/meals/">
             <Route index element={<OwnMeals />} />
             <Route path="add" element={<AddMeal />} />
-            <Route path={'view/:mealId'} element={<MealDetailViewExtern />} />
             <Route path={'detail/:mealId'} element={<MealDetailView />} />
             <Route path={'edit/:mealId'} element={<EditMeal />} />
           </Route>
@@ -74,7 +72,7 @@ const ContentWrapper = (props) => {
   );
 }
 
-AdvancedSettings.propTypes = {
+ContentWrapper.propTypes = {
   /** needs to receive a function that can toggle dark mode directly from the App.jsx component to pass to component that has dark mode settings */
   setDarkMode: func.isRequired,
 }

client/src/components/Images/CircleImage.jsx

@@ -29,7 +29,7 @@ const CircleImage = (props) => {
   return (
     <Box className={classes.imageCropper}>
       {loading ? <CircularProgress color="secondary" style={{ width: '110px', height: '110px', }} /> :
-        <img src={src} alt={altText} className={classes.image} />}
+        <img referrerPolicy="no-referrer" src={src} alt={altText} className={classes.image} />}
     </Box>
   );
 }

client/src/components/Images/ImageUpload.jsx

@@ -169,7 +169,6 @@ const ImageUpload = (props) => {
   const deleteImage = (image) => {
     axios.post(serverURL + "/images/deleteImage", image)
          .then(res => {
-           console.log('result of deleting planItem image', res);
            const newUploadedImages = uploadedImages.filter(i => i !== image);
            if (image.isMain && newUploadedImages.length > 0) {
              newUploadedImages[0].isMain = true;
@@ -179,8 +178,6 @@ const ImageUpload = (props) => {
   }
 
   const chooseImageAsMain = (image) => {
-    console.log('trying to set image as main', image);
-
     const changedUploadedImages = uploadedImages.map(i => {
       i.isMain = i._id === image._id;
       return i;

client/src/components/Meals/AddMeal.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button } from '@material-ui/core';
+import { alpha, Button, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import { v4 as uuidv4 } from 'uuid';
 import Navbar from "../Navbar";
@@ -17,6 +17,21 @@ const useStyles = makeStyles(theme => ({
     padding: '1rem 1.5rem',
     overflowY: 'auto',
   },
+  waitForPictures: {
+    fontSize: '0.9rem',
+    color: theme.palette.error.main,
+    textAlign: "right",
+  },
+  submitWithoutImagesButton: {
+    margin: '0.5em 0 0 auto',
+    display: 'block',
+    color: theme.palette.error.main,
+    borderColor: theme.palette.error.main,
+    '&:hover': {
+      borderColor: theme.palette.error.dark,
+      backgroundColor: alpha(theme.palette.error.dark, 0.04),
+    }
+  },
   submitButton: {
     margin: '0.5em 0 0 auto',
     display: 'block',
@@ -48,7 +63,8 @@ const AddMeal = () => {
   }, [user]);
 
   const [meal, setMeal] = useState(emptyMeal);
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingImagesTakesLong, setLoadingImagesTakesLong] = useState(false);
 
   const updateMeal = (key, value) => {
     setMeal(prevState => ({
@@ -73,11 +89,17 @@ const AddMeal = () => {
           deleteAllImagesFromMeal(meal._id);
         }
         navigate(-1);
-      }} />} rightSideComponent={meal.title && !loading ? <DoneButton onClick={addNewMeal} /> : null} />
+      }} />} rightSideComponent={meal.title && !isLoading ? <DoneButton onClick={addNewMeal} /> : null} />
 
       <form noValidate onSubmit={addNewMeal} className={classes.form}>
-        <EditMealCore updateMeal={updateMeal} meal={meal} autoFocusFirstInput setImagesLoading={setLoading} />
-        <Button type="submit" disabled={!meal.title || loading} className={classes.submitButton} variant='contained' color='primary'>{t('Add')}</Button>
+        <EditMealCore updateMeal={updateMeal} meal={meal} autoFocusFirstInput  setImagesLoading={setIsLoading} setLoadingImagesTakesLong={setLoadingImagesTakesLong}  />
+        {meal.title && isLoading && loadingImagesTakesLong ?
+          <>
+          <Typography className={classes.waitForPictures} color="error">{t('LOADING_IMAGES_TAKES_LONG')}</Typography>
+          <Button type="submit" disabled={!meal.title} className={classes.submitWithoutImagesButton} variant='outlined'>{t('Add without images')}</Button>
+          </> : ''
+        }
+        <Button type="submit" disabled={!meal.title || isLoading} className={classes.submitButton} variant='contained' color='primary'>{t('Add')}</Button>
       </form>
 
     </>

client/src/components/Meals/EditMeal.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Grid } from '@material-ui/core';
+import { alpha, Button, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
 import { arrayOf, func, shape, string } from "prop-types";
@@ -31,6 +31,16 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
     flexGrow: 4,
   },
+  submitWithoutImagesButton: {
+    margin: '1em auto 0.5em',
+    display: 'block',
+    color: theme.palette.error.main,
+    borderColor: theme.palette.error.main,
+    '&:hover': {
+      borderColor: theme.palette.error.dark,
+      backgroundColor: alpha(theme.palette.error.dark, 0.04),
+    }
+  },
   actionButtonWrapper: {
     margin: '1.5em 0 0',
   },
@@ -48,7 +58,8 @@ const EditMeal = (props) => {
   let { mealId } = useParams();
 
   const [meal, setMeal] = useState();
-  const [loading, setLoading] = useState(false);
+  const [imagesLoading, setImagesLoading] = useState(false);
+  const [loadingImagesTakesLong, setLoadingImagesTakesLong] = useState(false);
 
   useEffect(() => {
     fetchAndUpdateMeal(mealId, setMeal);
@@ -56,8 +67,8 @@ const EditMeal = (props) => {
 
   // set the meal that is given in state as a temporary option while the one from the server is loaded
   useEffect(() => {
-    if(!meal) {
-      if(state && state.meal) setMeal(state.meal);
+    if (!meal) {
+      if (state && state.meal) setMeal(state.meal);
     }
   }, [state]);
 
@@ -84,7 +95,6 @@ const EditMeal = (props) => {
   // todo check if Snackbars work
   const { Snackbars, showDeletedItemMessage, showReaddedItemMessage } = useSnackbars('Meal', deletedItem, undoDeletion);
 
-
   useEffect(() => {
     console.log('state', state, 'params', mealId);
   }, [state, mealId]);
@@ -107,25 +117,25 @@ const EditMeal = (props) => {
     if (meal.title) {
       axios.post(serverURL + '/meals/edit/' + meal._id, meal).then((result) => {
         console.log('edit request sent', result.data);
-        navigate(-1, { state: {meal: result.data.meal} });
+        navigate(-1, { state: { meal: result.data.meal } });
       });
     }
   }
 
   const closeEdit = () => {
-    navigate(-1, { state: {meal} });
+    navigate(-1, { state: { meal } });
   }
 
   return (
     <>
       <Navbar pageTitle={t('Edit Meal')}
               leftSideComponent={<BackButton onClick={closeEdit} />}
-              rightSideComponent={meal && meal.title && !loading ? <DoneButton onClick={editAndClose} /> : null}
+              rightSideComponent={meal && meal.title && !imagesLoading ? <DoneButton onClick={editAndClose} /> : null}
               secondary={inverseColors} />
       {meal ?
         <form noValidate onSubmit={editAndClose} className={classes.form}>
-          <EditMealCore updateMeal={updateMeal} meal={meal} isSecondary={inverseColors} setImagesLoading={setLoading} />
-          <Grid container spacing={0} justify="space-between" alignItems="center" wrap="nowrap" className={classes.actionButtonWrapper}>
+          <EditMealCore updateMeal={updateMeal} meal={meal} isSecondary={inverseColors} setImagesLoading={setImagesLoading} setLoadingImagesTakesLong={setLoadingImagesTakesLong} />
+          <Grid container spacing={0} justifyContent="space-between" alignItems="center" wrap="nowrap" className={classes.actionButtonWrapper}>
             <Grid item xs className={classes.cancelButton}>
               <Button type="button" color={inverseColors ? "secondary" : "primary"} variant="outlined" onClick={closeEdit}>{t('Cancel')}</Button>
             </Grid>
@@ -133,9 +143,10 @@ const EditMeal = (props) => {
               <DeleteButton onClick={deleteMeal} />
             </Grid>
             <Grid item xs className={classes.saveButton}>
-              <Button type="submit" disabled={!meal.title || loading} color={inverseColors ? "secondary" : "primary"} variant="contained">{t('Save')}</Button>
+              <Button type="submit" disabled={!meal.title || imagesLoading} color={inverseColors ? "secondary" : "primary"} variant="contained">{t('Save')}</Button>
             </Grid>
           </Grid>
+          {meal.title && imagesLoading && loadingImagesTakesLong ? <Button type="submit" className={classes.submitWithoutImagesButton} disabled={!meal.title} variant="outlined">{t('Save without new images')}</Button> : null }
         </form>
         : ''}
     </>

client/src/components/Meals/EditMealCore.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { arrayOf, bool, func, shape, string } from "prop-types";
+import { arrayOf, bool, func, number, shape, string } from "prop-types";
 import { useTranslation } from "react-i18next";
 import ImageUpload from "../Images/ImageUpload";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
@@ -29,12 +29,16 @@ const EditMealCore = (props) => {
     isSecondary,
     autoFocusFirstInput,
     setImagesLoading,
+    setLoadingImagesTakesLong,
+    loadingImagesTakesLongAfter,
   } = props;
 
   const [placeholder, setPlaceholder] = useState(t('Recipe, instructions, comments, etc.'));
   const [, updateState] = useState();
   const forceUpdate = React.useCallback(() => updateState({}), []);
 
+  const [loadingImagesTakesLongTimeout, setLoadingImagesTakesLongTimeout] = useState(0);
+
   const onChangeUploadedImages = (newUploadedImages) => {
     console.log('updated uploadedImages', newUploadedImages);
     updateMeal('images', newUploadedImages);
@@ -50,6 +54,22 @@ const EditMealCore = (props) => {
     // eslint-disable-next-line
   }, [user]);
 
+  const setLoadingAndStartTimeout = (value) => {
+    if(setImagesLoading) setImagesLoading(value);
+    if(setLoadingImagesTakesLong) {
+      if (value === true) {
+        setLoadingImagesTakesLongTimeout(setTimeout(() => {
+          setLoadingImagesTakesLong(true);
+        }, loadingImagesTakesLongAfter));
+      }
+      if (value === false) {
+        clearTimeout(loadingImagesTakesLongTimeout);
+        setLoadingImagesTakesLongTimeout(0);
+        setLoadingImagesTakesLong(false);
+      }
+    }
+  };
+
   return (
     <>
       <OutlinedTextField name="title"
@@ -80,7 +100,7 @@ const EditMealCore = (props) => {
                    onChangeUploadedImages={onChangeUploadedImages}
                    imageName={title}
                    tags={tags}
-                   setLoading={setImagesLoading} />
+                   setLoading={setLoadingAndStartTimeout} />
     </>
   );
 }
@@ -108,12 +128,18 @@ EditMealCore.propTypes = {
   autoFocusFirstInput: bool,
   /** this is a function to update the state of the calling component. It will receive false, if all images of the meal have been uploaded, and true otherwise */
   setImagesLoading: func,
+  /** this is a function to update the state of the calling component. It will receive true, if all images have not loaded after the specified interval */
+  setLoadingImagesTakesLong: func,
+  /** interval for setLoadingImagesTakesLong  */
+  loadingImagesTakesLongAfter: number,
 }
 
 EditMealCore.defaultProps = {
   isSecondary: false,
   autoFocusFirstInput: false,
   setImagesLoading: undefined,
+  setLoadingImagesTakesLong: undefined,
+  loadingImagesTakesLongAfter: 6000,
 }
 
 export default withAuthenticationRequired(EditMealCore, {

client/src/components/Meals/MealDetailView.jsx

@@ -40,6 +40,7 @@ const MealDetailView = () => {
 
   const [own, setOwn] = useState(false);
   const [meal, setMeal] = useState();
+  const [comingFromPlans, setComingFromPlans] = useState(false);
   // const [/*mealUser*/, setMealUser] = useState(null);
 
   /*  useEffect(() => {
@@ -58,8 +59,12 @@ const MealDetailView = () => {
 
   // set the meal that is given in state as a temporary option while the one from the server is loaded
   useEffect(() => {
-    if(!meal) {
-      if(state && state.meal) setMeal(state.meal);
+    if(state) {
+      if (!meal) {
+        if (state.meal) setMeal(state.meal);
+      }
+      console.log(state.prevRoute);
+      if (state.prevRoute && state.prevRoute === '/plans') setComingFromPlans(true);
     }
   }, [state]);
 
@@ -92,14 +97,14 @@ const MealDetailView = () => {
     <>
       {meal ?
         <>
-          <Navbar pageTitle={t('Meal')} rightSideComponent={rightSideComponent()} leftSideComponent={isAuthenticated && <BackButton onClick={goBack} />} />
+          <Navbar secondary={!own} pageTitle={t('Meal')} rightSideComponent={rightSideComponent()} leftSideComponent={isAuthenticated && <BackButton onClick={goBack} />} />
           <Box className={classes.content}>
-            <Grid container spacing={0} justify="space-between" alignItems="flex-start" wrap="nowrap">
+            <Grid container spacing={0} justifyContent="space-between" alignItems="flex-start" wrap="nowrap">
               <Grid item xs className={classes.mealTitle}>
                 <Typography variant="h4">{meal.title}</Typography>
               </Grid>
               <Grid item xs>
-                <ShareButton link={window.location.origin + '/meals/view/' + meal._id} title={meal.title} text={t('Check out the following meal: {{mealTitle}}', meal.title)} />
+                <ShareButton link={window.location.origin + '/meals/detail/' + meal._id} title={meal.title} text={t('Check out the following meal: {{mealTitle}}', meal.title)} />
               </Grid>
             </Grid>
             {meal.recipeLink ? <Typography><Link href={meal.recipeLink} target="_blank">{meal.recipeLink}</Link></Typography> : ''}
@@ -107,7 +112,7 @@ const MealDetailView = () => {
             {meal.images && meal.images.length > 0 ? <ImageGrid images={meal.images} allowChoosingMain={false} /> : ''}
           </Box>
 
-          {own ? <PlanMealButton meal={meal} /> : ''}
+          {(own && !comingFromPlans) ? <PlanMealButton meal={meal} /> : ''}
         </>
         : ''}
     </>

client/src/components/Meals/MealDetailViewExtern.jsx

@@ -16,13 +16,11 @@ const MealDetailViewExtern = (props) => {
   const [own, setOwn] = useState(false);
 
   useEffect(() => {
-    console.log('fetching');
     fetchAndUpdateMeal(mealId, (meal) => {
       setMeal(meal);
       if (user) {
         setOwn(user.sub === meal.userId);
       }
-      console.log('get meal', meal);
     });
   }, [mealId, user]);
 

client/src/components/Meals/MealImportButton.jsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.background.default,
   },
   form: {
-    padding: '1rem 2.5rem',
+    padding: '1rem 1.5rem 1.5rem',
     overflowY: 'auto',
   },
   snackbar: {
@@ -128,7 +128,7 @@ const MealImportButton = (props) => {
               leftSideComponent={<BackButton onClick={cancel} />} />
       <form noValidate onSubmit={submitImport} className={classes.form}>
         <EditMealCore meal={newMeal} updateMeal={updateMeal} isSecondary={true} />
-        <Grid container spacing={0} justify="space-between" alignItems="center" wrap="nowrap">
+        <Grid container spacing={0} justifyContent="space-between" alignItems="center" wrap="nowrap">
           <Grid item xs>
             <Button type="button" color="secondary" variant="outlined" onClick={cancel}>{t('Cancel')}</Button>
           </Grid>

client/src/components/Meals/MealWrapper.jsx

@@ -1,7 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import React from "react";
 import OwnMeals from "./OwnMeals";
-import MealDetailViewExtern from "./MealDetailViewExtern";
 import AddMeal from "./AddMeal";
 import EditMeal from "./EditMeal";
 import MealDetailView from "./MealDetailView";
@@ -17,7 +16,6 @@ const MealWrapper = () => {
       <Routes>
         <Route index element={<OwnMeals />} />
         <Route path="add" element={<AddMeal />} />
-        <Route path={'view/:mealId'} element={<MealDetailViewExtern />} />
         <Route path={'detail/:mealId'} element={<MealDetailView />} />
         <Route path={'edit/:mealId'} element={<EditMeal />} />
       </Routes>

client/src/components/Meals/Meals.jsx

@@ -19,12 +19,12 @@ const useStyles = makeStyles(theme => ({
     fontSize: "1.3rem",
     lineHeight: "1.4rem",
   },
-  category: {
-    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+  category: props => ({
+    backgroundColor: alpha(props.own ? theme.palette.primary.main : theme.palette.secondary.main, 0.1),
     '&:hover': {
-      backgroundColor: alpha(theme.palette.primary.main, 0.2),
+      backgroundColor: alpha(props.own ? theme.palette.primary.main : theme.palette.secondary.main, 0.2),
     }
-  },
+  }),
   listItemIcon: {
     fontSize: "1rem",
     color: theme.palette.text.primary,
@@ -58,7 +58,7 @@ const useStyles = makeStyles(theme => ({
  * todo: restructure to have logic in a wrapper component, so that refresh can be triggered
  * todo: Snackbar visualization */
 const Meals = (props) => {
-  const classes = useStyles();
+  const classes = useStyles(props);
   const { t } = useTranslation();
   let navigate = useNavigate();
 
@@ -153,7 +153,7 @@ const Meals = (props) => {
 
   const openMealDetailView = (meal) => {
     if(own) navigate('detail/' + meal._id, {state: {meal}});
-    else navigate('/meals/view/' + meal._id, {state: {meal}});
+    else navigate('/meals/detail/' + meal._id, {state: {meal}});
   };
 
   const getListItems = () => {

client/src/components/Meals/SelectMealTags.jsx

@@ -91,7 +91,7 @@ const SelectMealTags = (props) => {
     // getNewOptionData is necessary because otherwise the new option will be an object with identical label and value attributes
     return <CreatableSelect {...commonProps} getNewOptionData={(value) => value} noOptionsMessage={() => t('Type to add Tags')} />;
   } else {
-    return <ReactSelect {...commonProps} noOptionsMessage={() => t('No Tags so far')}/>;
+    return <ReactSelect {...commonProps} noOptionsMessage={() => t('No results')}/>;
   }
 }
 

client/src/components/Plans/AddPlanItem.jsx

@@ -14,7 +14,7 @@ import { addPlan } from "./plans.util";
 
 const useStyles = makeStyles(theme => ({
   form: {
-    padding: '1em 2.5em',
+    padding: '1.5em 2.5em',
     overflowY: 'auto',
   },
   submitButton: {

client/src/components/Plans/EditPlanItem.jsx

@@ -114,7 +114,7 @@ const EditPlanItem = (props) => {
 
         <form noValidate onSubmit={editAndClose} className={classes.form}>
           <EditPlanItemCore planItem={planItem} updatePlanItem={updatePlanItem} isSecondary={inverseColors} />
-          <Grid container spacing={0} justify="space-between" alignItems="center" wrap="nowrap" className={classes.actionButtonWrapper}>
+          <Grid container spacing={0} justifyContent="space-between" alignItems="center" wrap="nowrap" className={classes.actionButtonWrapper}>
             <Grid item xs className={classes.cancelButton}>
               <Button type="button" color={inverseColors ? "secondary" : "primary"} variant="outlined" onClick={goBackToPlans}>{t('Cancel')}</Button>
             </Grid>

client/src/components/Plans/EditPlanItemCore.jsx

@@ -183,7 +183,7 @@ const EditPlanItemCore = (props) => {
         <Checkbox checked={gotEverything} onChange={e => updatePlanItem('gotEverything', e.target.checked)} color={colorB} />
       } />
       <Box className={classes.missingIngredientsBox} hidden={gotEverything}>
-        <Grid container spacing={1} justify="space-between" alignItems="flex-end" className={classes.newIngredientInputGrid}>
+        <Grid container spacing={1} justifyContent="space-between" alignItems="flex-end" className={classes.newIngredientInputGrid}>
           <Grid item xs style={{ width: 'calc(100% - (2em + 8px))' }}>
             <TextField value={newIngredient}
                        color={colorA}
@@ -208,7 +208,7 @@ const EditPlanItemCore = (props) => {
         </Grid>
 
         {missingIngredients.map((ingredient, index) =>
-          <Grid container spacing={1} justify="space-between" alignItems="center" key={index + ingredient.name} className={classes.missingIngredientsGrid}>
+          <Grid container spacing={1} justifyContent="space-between" alignItems="center" key={index + ingredient.name} className={classes.missingIngredientsGrid}>
             <Grid item className={classes.missingIngredientLeftGridCell}>
               <FormControlLabel label={ingredient.name} classes={{ root: classes.missingIngredientItem, label: classes.missingIngredientLabel }} control={
                 <Checkbox className={classes.missingIngredientCheckbox}

client/src/components/Plans/Plans.jsx

@@ -90,7 +90,7 @@ const Plans = (props) => {
   useEffect(fetchAndUpdatePlans, [userId, pathname]);
 
   const openMealDetailView = (meal) => {
-    navigate('/meals/view/' + meal._id, { from: 'own plans' });
+    navigate('/meals/detail/' + meal._id, {state: { prevRoute: pathname }});
   };
 
   const goToEdit = (planItem) => {
@@ -101,7 +101,9 @@ const Plans = (props) => {
   }
 
   const openShoppingList = () => {
-    navigate('shoppingList/' + userId, { state: { plans } });
+    if (own) {
+      navigate('shoppingList/' + userId, { state: { plans } });
+    }
   }
 
   const undoDeletion = () => {
@@ -151,7 +153,7 @@ const Plans = (props) => {
         <TableRow key={plan._id + index} className={pastPlansDone ? '' : classes.pastPlanRow}>
           <TableCell className={classes.tableCell}>
             {plan.connectedMeal ?
-              <Grid container spacing={1} justify="space-between" alignItems="center">
+              <Grid container spacing={1} justifyContent="space-between" alignItems="center">
                 <Grid item xs={9} onClick={() => {goToEdit(plan);}}>{plan.title}</Grid>
                 <Grid item xs={3} onClick={() => {openMealDetailView(plan.connectedMeal);}}><MealAvatar meal={plan.connectedMeal} /></Grid>
               </Grid>

client/src/components/Settings/EditProfile.jsx

@@ -83,7 +83,7 @@ const EditProfile = () => {
 
   const [profileImage, setProfileImage] = useState(metadata.picture || userData.picture);
   const [showReset, setShowReset] = useState(!!metadata.picture);
-  const [nickname, setNickname] = useState(metadata.nickname);
+  const [username, setUsername] = useState(metadata.username);
   const [name, setName] = useState(userName);
   const [email, setEmail] = useState(userEmail);
   const [usingOAuth, setUsingOAuth] = useState(false);
@@ -98,10 +98,10 @@ const EditProfile = () => {
   }, [userId]);
 
   const updateUserData = () => {
-    updateUserMetadata(userId, { nickname: nickname }, null);
+    updateUserMetadata(userId, { username: username }, null);
     if (!usingOAuth) {
       const newUserData = {
-        name, email, nickname
+        name, email, nickname: username
       };
       updateUser(userId, newUserData, null);
     }
@@ -135,7 +135,7 @@ const EditProfile = () => {
 
   const goToSettings = () => {
     // send state to make Profile reload new data
-    navigate('../', { state: { newNickname: nickname } });
+    navigate('../', { state: { newUsername: username } });
   }
 
   return (
@@ -162,7 +162,7 @@ const EditProfile = () => {
                 {t(`Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.`, { provider: foreignAccountProvider })}
               </Typography>
               <Typography variant="body2" color="textSecondary" component="p">
-                {t('You can, however, set a custom profile picture and nickname.')}
+                {t('You can, however, set a custom profile picture and username.')}
               </Typography>
             </CardContent>
           </Collapse>
@@ -179,9 +179,9 @@ const EditProfile = () => {
                   </TableCell>
                 </TableRow>
                 <TableRow>
-                  <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Nickname')}</Typography></TableCell>
+                  <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Username')}</Typography></TableCell>
                   <TableCell className={classes.tableCell}>
-                    <InputBase value={nickname} name="nickname" onChange={e => setNickname(e.target.value)} label={t('Nickname')} />
+                    <InputBase value={username} name="username" onChange={e => setUsername(e.target.value)} label={t('Username')} />
                   </TableCell>
                 </TableRow>
                 <TableRow>

client/src/components/Settings/Profile.jsx

@@ -64,8 +64,8 @@ const Profile = (props) => {
               <TableCell className={classes.tableCell}><Typography className={classes.text}>{name}</Typography></TableCell>
             </TableRow>
             <TableRow>
-              <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Nickname')}</Typography></TableCell>
-              <TableCell className={classes.tableCell}><Typography className={classes.text}>{metadata.nickname}</Typography></TableCell>
+              <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Username')}</Typography></TableCell>
+              <TableCell className={classes.tableCell}><Typography className={classes.text}>{metadata.username}</Typography></TableCell>
             </TableRow>
             <TableRow>
               <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Email address')}</Typography></TableCell>
@@ -79,7 +79,7 @@ const Profile = (props) => {
 };
 
 Profile.propTypes = {
-  /** user data to be displayed, currently displays name, metadata.nickname, email and metadata.picture (or picture if no metadata.picture is set) */
+  /** user data to be displayed, currently displays name, metadata.username, email and metadata.picture (or picture if no metadata.picture is set) */
   userData: shape({}).isRequired,
 }
 

client/src/components/Settings/ProfilePlaceholder.jsx

@@ -46,7 +46,7 @@ const ProfilePlaceholder = (props) => {
               <TableCell className={classes.tableCell}/>
             </TableRow>
             <TableRow>
-              <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Nickname')}</Typography></TableCell>
+              <TableCell className={classes.tableCell}><Typography className={classes.label}>{t('Username')}</Typography></TableCell>
               <TableCell className={classes.tableCell}/>
             </TableRow>
             <TableRow>

client/src/components/Settings/Settings.jsx

@@ -11,7 +11,7 @@ import { muiTableBorder, withLoginRequired } from "../util";
 import LogoutButton from "../Buttons/LogoutButton";
 import EditButton from "../Buttons/EditButton";
 import ProfilePlaceholder from "./ProfilePlaceholder";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { ArrowForwardIos } from "@material-ui/icons";
 
 const useStyles = makeStyles(theme => ({
@@ -65,6 +65,7 @@ const Settings = () => {
   const classes = useStyles();
   const { t, i18n } = useTranslation();
   const { user } = useAuth0();
+  const { state } = useLocation();
   let navigate = useNavigate();
 
   const [userData, setUserData] = useState(null);
@@ -73,7 +74,7 @@ const Settings = () => {
   useEffect(() => {
     getUser();
     // eslint-disable-next-line
-  }, [user]);
+  }, [user, state]);
 
   const getUser = () => {
     if (user) {

client/src/components/Social/social.util.jsx

@@ -19,7 +19,7 @@ export const fetchContactsOfUser = (userId, updateContacts) => {
 }
 
 /**
- * Updates all user contacts to represent the current data of the Auth0 database in case someone has changed their nickname or picture
+ * Updates all user contacts to represent the current data of the Auth0 database in case someone has changed their username or picture
  * @param {String} userId
  * @param {[String]} contactIDs
  * @param {function} updateContacts
@@ -59,5 +59,5 @@ export const ContactAvatar = ({ children, ...props }) => {
   );
 };
 
-export const getContactName = (contact) => (contact.user_metadata && contact.user_metadata.nickname) ? contact.user_metadata.nickname : contact.name;
+export const getContactName = (contact) => (contact.user_metadata && contact.user_metadata.username) ? contact.user_metadata.username : contact.name;
 export const getContactPicture = (contact) => (contact.user_metadata && contact.user_metadata.picture) ? contact.user_metadata.picture : contact.picture;

client/src/components/util/ShareButton.jsx

@@ -48,7 +48,7 @@ const ShareButton = (props) => {
       </IconButton>
       <Dialog open={isCopyLinkOpen} onClose={() => {setIsCopyLinkOpen(false); setIsCopied(false);}} PaperProps={{style: {padding: '2em'}}}>
         <DialogTitle style={{padding: '0 0 0.5em'}}>{title}</DialogTitle>
-        <Grid container spacing={2} justify="space-between" alignItems="center" wrap="wrap">
+        <Grid container spacing={2} justifyContent="space-between" alignItems="center" wrap="wrap">
           <Grid item xs style={{flexGrow: 5}}>
           <TextField id="link-input" variant="standard" value={link} color="secondary" style={{minWidth: '160px'}} InputProps={{
             startAdornment: (

client/src/translations/_example.translation.json

@@ -50,7 +50,7 @@
   "Plan some meals": "",
   "Language": "",
   "Name": "",
-  "Nickname": "",
+  "Username": "",
   "Email address": "",
   "Email": "",
   "Reset Image": "",
@@ -58,7 +58,7 @@
   "profile picture of {{name}}": "",
   "Logged in via {{provider}}": "",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "",
-  "You can, however, set a custom profile picture and nickname.": "",
+  "You can, however, set a custom profile picture and username.": "",
   "Use dark mode?": "",
   "Missing Ingredients": "",
   "Missing Ingredients for {{plan}}": "",
@@ -108,5 +108,8 @@
   "Your Account has been deleted": "",
   "You will be logged out now.": "",
   "OK": "",
+  "LOADING_IMAGES_TAKES_LONG": "",
+  "Add without images": "",
+  "Save without new images": "",
   "": ""
 }

client/src/translations/de.translation.json

@@ -52,7 +52,7 @@
   "Plan some meals": "Mit dem Planen loslegen",
   "Language": "Sprache",
   "Name": "Name",
-  "Nickname": "Spitzname",
+  "Username": "Nutzername",
   "Email address": "E-Mail-Adresse",
   "Email": "E-Mail",
   "Reset Image": "Bild zurücksetzen",
@@ -60,7 +60,7 @@
   "profile picture of {{name}}": "Profilbild von {{name}}",
   "Logged in via {{provider}}": "Über {{provider}} eingeloggt",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Weil Sie mit Ihrem {{provider}}-Konto eingeloggt sind, können Sie Ihre Daten hier nicht ändern. Sie können stattdessen die Daten direkt in Ihrem {{provider}}-Konto ändern und sie werden beim nächsten Login übernommen.",
-  "You can, however, set a custom profile picture and nickname.": "Sie können allerdings ein eigenes Profilbild hochladen und einen Spitznamen wählen.",
+  "You can, however, set a custom profile picture and username.": "Sie können allerdings ein eigenes Profilbild hochladen und einen Spitznamen wählen.",
   "Use dark mode?": "Dunkler Modus",
   "Missing Ingredients": "Fehlende Zutaten",
   "Missing Ingredients for {{plan}}": "Fehlende Zutaten für {{plan}}",
@@ -109,5 +109,8 @@
   "Your account is being deleted": "Dein Account wird gelöscht.",
   "Your Account has been deleted": "Dein Account wurde gelöscht.",
   "You will be logged out now.": "Du wirst jetzt ausgeloggt.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "Es scheint etwas zu dauern, die Bilder zu laden. Sie können warten oder das Gericht ohne diese Bilder hinzufügen.",
+  "Add without images": "Ohne Bilder hinzufügen",
+  "Save without new images": "Ohne neue Bilder speichern"
 }

client/src/translations/en-GB.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "Plan some meals",
   "Language": "Language",
   "Name": "Name",
-  "Nickname": "Nickname",
+  "Username": "Username",
   "Email address": "Email address",
   "Email": "Email",
   "Reset Image": "Reset Image",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "profile picture of {{name}}",
   "Logged in via {{provider}}": "Logged in via {{provider}}",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.",
-  "You can, however, set a custom profile picture and nickname.": "You can, however, set a custom profile picture and nickname.",
+  "You can, however, set a custom profile picture and username.": "You can, however, set a custom profile picture and username.",
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
   "Missing Ingredients for {{plan}}": "Missing Ingredients for {{plan}}",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "Your account is being deleted",
   "Your Account has been deleted": "Your Account has been deleted",
   "You will be logged out now.": "You will be logged out now.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "It seems to take a while to load the images. You can wait or add the meal without these images.",
+  "Add without images": "Add without images",
+  "Save without new images": "Save without new images"
 }

client/src/translations/en-US.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "Plan some meals",
   "Language": "Language",
   "Name": "Name",
-  "Nickname": "Nickname",
+  "Username": "Username",
   "Email address": "Email address",
   "Email": "Email",
   "Reset Image": "Reset Image",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "profile picture of {{name}}",
   "Logged in via {{provider}}": "Logged in via {{provider}}",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.",
-  "You can, however, set a custom profile picture and nickname.": "You can, however, set a custom profile picture and nickname.",
+  "You can, however, set a custom profile picture and username.": "You can, however, set a custom profile picture and username.",
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
   "Missing Ingredients for {{plan}}": "Missing Ingredients for {{plan}}",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "Your account is being deleted",
   "Your Account has been deleted": "Your Account has been deleted",
   "You will be logged out now.": "You will be logged out now.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "It seems to take a while to load the images. You can wait or add the meal without these images.",
+  "Add without images": "Add without images",
+  "Save without new images": "Save without new images"
 }

client/src/translations/es.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "Planificar algunas comidas",
   "Language": "Idioma",
   "Name": "Nombre",
-  "Nickname": "Apodo",
+  "Username": "Apodo",
   "Email address": "Correo electrónico",
   "Email": "Correo electrónico",
   "Reset Image": "Restablecer Imagen",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "foto de perfil de {{name}}",
   "Logged in via {{provider}}": "Inició la sesión a través de {{provider}}",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Como has iniciado sesión a través de tu cuenta de {{provider}}, no puedes cambiar tus datos aquí. Puedes cambiar los datos directamente en tu cuenta de {{provider}} y se adoptarán en el siguiente inicio de sesión.",
-  "You can, however, set a custom profile picture and nickname.": "Sin embargo, puedes establecer una imagen de perfil personalizada tanto como un apodo.",
+  "You can, however, set a custom profile picture and username.": "Sin embargo, puedes establecer una imagen de perfil personalizada tanto como un apodo.",
   "Use dark mode?": "Modo oscuro",
   "Missing Ingredients": "Ingredientes faltantes",
   "Missing Ingredients for {{plan}}": "Ingredientes faltantes para {{plan}}",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "Tu cuenta está siendo eliminada",
   "Your Account has been deleted": "Tu cuenta ha sido eliminada",
   "You will be logged out now.": "Ahora se cerrará la sesión.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "Parece que tarda un poco en cargar las fotos. Puedes esperar o añadir la comida sin estas fotos.",
+  "Add without images": "Añadir sin imágenes",
+  "Save without new images": "Guardar sin imágenes nuevas"
 }

client/src/translations/fr-FR.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "Planifier des repas",
   "Language": "Langue",
   "Name": "Nom",
-  "Nickname": "Pseudo",
+  "Username": "Pseudo",
   "Email address": "Adresse e-mail",
   "Email": "Email",
   "Reset Image": "Réinitialiser l'image",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "photo de profil de {{name}}",
   "Logged in via {{provider}}": "Connecté via {{provider}}",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Comme vous êtes connecté via votre compte {{provider}}, vous ne pouvez pas modifier vos données ici. Vous pouvez modifier les données directement dans votre compte {{provider}} et elles seront adoptées lors de la prochaine connexion.",
-  "You can, however, set a custom profile picture and nickname.": "Vous pouvez toutefois définir une photo de profil et un pseudo personnalisés.",
+  "You can, however, set a custom profile picture and username.": "Vous pouvez toutefois définir une photo de profil et un pseudo personnalisés.",
   "Use dark mode?": "Mode sombre",
   "Missing Ingredients": "Ingrédients manquants",
   "Missing Ingredients for {{plan}}": "Ingrédients manquants pour {{plan}}",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "Votre compte est en cours de suppression",
   "Your Account has been deleted": "Votre compte a été supprimé",
   "You will be logged out now.": "Vous allez être déconnecté maintenant.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "Il semble que le chargement des images prenne un peu de temps. Vous pouvez attendre ou ajouter le repas sans ces images.",
+  "Add without images": "Ajouter sans images",
+  "Save without new images": "Sauvegarder sans nouvelles images"
 }

client/src/translations/it.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "Pianifica alcuni piatti",
   "Language": "Lingua",
   "Name": "Nome",
-  "Nickname": "Nome utente",
+  "Username": "Nome utente",
   "Email address": "Indirizzo email",
   "Email": "Email",
   "Reset Image": "Resetta Immagine",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "foto del profilo di {{name}}",
   "Logged in via {{provider}}": "Registrato tramite {{provider}}",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "Dato che sei collegato tramite il tuo account {{provider}}, non puoi cambiare i tuoi dati qui. Puoi cambiare i dati direttamente nel tuo account {{provider}} e saranno adottati al prossimo login.",
-  "You can, however, set a custom profile picture and nickname.": "Puoi, tuttavia, impostare un'immagine di profilo personalizzata e un nome utente.",
+  "You can, however, set a custom profile picture and username.": "Puoi, tuttavia, impostare un'immagine di profilo personalizzata e un nome utente.",
   "Use dark mode?": "Modalità scura",
   "Missing Ingredients": "Ingredienti mancanti",
   "Missing Ingredients for {{plan}}": "Ingredienti mancanti per {{plan}}",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "Stiamo cancellando il tuo conto",
   "Your Account has been deleted": "Il tuo conto è stato cancellato",
   "You will be logged out now.": "Sarai disconnesso ora.",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "Sembra che ci voglia un po' di tempo per caricare le immagini. Puoi aspettare o aggiungere il piatto senza queste immagini.",
+  "Add without images": "Aggiungi senza immagini",
+  "Save without new images": "Salva senza nuove immagini"
 }

client/src/translations/jp.translation.json

@@ -51,7 +51,7 @@
   "Plan some meals": "食事の計画を立てる",
   "Language": "言語",
   "Name": "名称",
-  "Nickname": "ニックネーム",
+  "Username": "ニックネーム",
   "Email address": "メールアドレス",
   "Email": "メール",
   "Reset Image": "画像をリセットする",
@@ -59,7 +59,7 @@
   "profile picture of {{name}}": "{{name}}のプロフィール画像",
   "Logged in via {{provider}}": "{{provider}}でログインしています",
   "Since you are logged in via your {{provider}} account, you cannot change your data here. You can change the data directly in your {{provider}} account and it will be adopted on the next login.": "{{provider}}アカウントでログインしているため、ここでデータを変更することはできません。{{provider}}アカウントで直接データを変更すれば、次回のログイン時に反映されます。",
-  "You can, however, set a custom profile picture and nickname.": "ただし、プロフィール画像とニックネームは自由に設定できます。",
+  "You can, however, set a custom profile picture and username.": "ただし、プロフィール画像とニックネームは自由に設定できます。",
   "Use dark mode?": "ダークモードを使用しますか？",
   "Missing Ingredients": "不足材料",
   "Missing Ingredients for {{plan}}": "{{plan}}の不足材料について",
@@ -108,5 +108,8 @@
   "Your account is being deleted": "あなたのアカウントは削除されます",
   "Your Account has been deleted": "あなたのアカウントが削除されました",
   "You will be logged out now.": "現在ログアウトしています。",
-  "OK": "OK"
+  "OK": "OK",
+  "LOADING_IMAGES_TAKES_LONG": "写真を読み込むのに時間がかかるようです。お待ちいただくか、写真なしでお料理を追加してください。",
+  "Add without images": "写真なしで追加",
+  "Save without new images": "新規画像なしで保存する"
 }

server/controllers/users.controller.js

@@ -39,13 +39,13 @@ export const getUsersFromQuery = async (req, res) => {
   let wildcardQuery = query;
   if (wildcardQuery.length >= 3) wildcardQuery = '*' + query; // add wildcard to the front (needs at least 3 characters)
   wildcardQuery += '*'; // add wildcard to back, for query options see https://auth0.com/docs/users/user-search/user-search-query-syntax
-  /** metadata fields, like nickname, do not support wildcards yet. The nickname gets copied to the "normal" nickname field (and thus found als with wildcards),
+  /** metadata fields, like username, do not support wildcards yet. The username gets copied to the "normal" nickname field (and thus found als with wildcards),
    * only if the user is not logged in via OAuth. In that case, nicknames are invariable as they are set through the external Provider (like Google). */
 
   const capitalizedQuery = query.charAt(0).toUpperCase() + query.slice(1);
   console.log(capitalizedQuery);
   const params = {
-    q: 'name:' + wildcardQuery + ' OR nickname:' + wildcardQuery + ' OR user_metadata.nickname:' + query + ' OR user_metadata.nickname:' + capitalizedQuery,
+    q: 'name:' + wildcardQuery + ' OR nickname:' + wildcardQuery + ' OR user_metadata.username:' + query + ' OR user_metadata.username:' + capitalizedQuery,
   };
   console.log(params);
   managementAPI.getUsers(params)