🚧 Few changes for the new frontend

config/dependencies.yaml

@@ -154,6 +154,9 @@ simon:
     "@freesewing/brian": "^{{version}}"
     "@freesewing/plugin-buttons": "^{{version}}"
     "@freesewing/plugin-flip": "^{{version}}"
+utils:
+  peer:
+    "axios": "^0.19.0"
 wahid:
   peer:
     "@freesewing/brian": "^{{version}}"

packages/components/src/index.js

@@ -10,6 +10,7 @@ export default [
   "Navbar",
   "Ogol",
   "Robot",
+  "Spinner",
   "SampleConfigurator",
   "withGist",
   "withLanguage",

packages/css-theme/src/_components.scss

@@ -8,3 +8,4 @@
 @import "components/example";
 @import "components/fab";
 @import "components/prev-next";
+@import "components/spinner";

packages/css-theme/src/_mixins.scss

@@ -8,7 +8,7 @@
   @media (min-width: 960px) { @content; }
 }
 
-@mixin body-font { font-family:  -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
+@mixin body-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
 @mixin title-font { font-family: 'Roboto Condensed', sans-serif; }
 @mixin fixed-font { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
 @mixin scribble-font { font-family: 'Permanent Marker', cursive; }

packages/css-theme/src/_utility.scss

@@ -11,3 +11,11 @@
   .only-xs { display: none!important; }
 }
 
+.shadow {
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
+}
+
+.theme-wrapper.dark .shadow {
+  border: 1px solid #fff3;
+}
+

packages/css-theme/src/components/_prev-next.scss

@@ -4,7 +4,6 @@ div.prev-next {
   padding-bottom: 0;
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   align-content: center;
   justify-content: space-between;
   background: $oc-blue-0;

packages/css-theme/src/components/_spinner.scss

@@ -0,0 +1,49 @@
+svg.spinner {
+  path {
+    stroke: none;
+    fill: #000;
+  }
+  rect {
+    fill: none;
+    stroke: none;
+  }
+  rect.blink {
+    fill: #000;
+  }
+  circle {
+    fill: none;
+    stroke: rgba(0, 0, 0, 0.4);
+  }
+  circle.darker {
+    stroke: rgba(0, 0, 0, 0.6);
+  }
+  circle.lighter {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+}
+.dark,
+.theme-wrapper.dark {
+  svg.spinner {
+    path {
+      stroke: none;
+      fill: #fff;
+    }
+    rect {
+      fill: none;
+      stroke: none;
+    }
+    rect.blink {
+      fill: #fff;
+    }
+    circle {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.4);
+    }
+    circle.darker {
+      stroke: rgba(255, 255, 255, 0.6);
+    }
+    circle.lighter {
+      stroke: rgba(255, 255, 255, 0.2);
+    }
+  }
+}

packages/i18n/src/locales/en/app.yaml

@@ -224,3 +224,4 @@ getStarted: Get started
 apiReference: API Reference
 tutorial: Tutorial
 editThisPage: Edit this page
+loginRequiredRedirect: 'You were redirected to the login page because {page} requires authentication'

packages/mui-theme/src/index.js

@@ -53,6 +53,20 @@ const getTheme = mode => {
         default: c.secondary
       }
     },
+    typography: {
+      fontFamily: [
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        "Roboto",
+        '"Helvetica Neue"',
+        "Arial",
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"'
+      ].join(",")
+    },
     themeName: mode
   };
 };

packages/utils/package.json

@@ -28,7 +28,9 @@
     "symlink": "mkdir -p ./node_modules/@freesewing && cd ./node_modules/@freesewing && ln -s -f ../../../* . && cd -",
     "start": "rollup -c -w"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "axios": "^0.19.0"
+  },
   "dependencies": {},
   "devDependencies": {},
   "files": [

packages/utils/src/backend.js

@@ -0,0 +1,60 @@
+import axios from "axios";
+import storage from "./storage";
+
+function useBackend(baseURL, timeout = 10000) {
+  // Configure Axios
+  const api = axios.create({ baseURL, timeout });
+
+  // Helper method for Authorization header
+  const auth = (token = storage.get("token")) => ({
+    headers: { Authorization: "Bearer " + token }
+  });
+
+  const backend = {};
+
+  // Oauth
+  backend.initOauth = data => api.post("/oauth/init", data); // Init Oauth (to get state)
+  backend.providerLogin = data => api.post("/oauth/login", data); // Finalize Oauth login
+
+  // Signup flow
+  backend.signup = (email, password, language) =>
+    api.post("/signup", { email, password, language }); // Signup
+  backend.confirm = confirmId => api.post("/confirm", { id: confirmId }); // Confirm
+  backend.createAccount = confirmId => api.post("/user", { id: confirmId }); // Create account
+
+  // Other non-authenticated calls
+  backend.login = (username, password) =>
+    api.post("/login", { username, password }); // Login
+  backend.profile = username => api.get("/users/" + username); // Load user profile
+  backend.loadGist = handle => api.get("/gist/" + handle); // Load draft/gist anonymously
+  backend.loadPatrons = handle => api.get("/patrons"); // Load patron list
+
+  // Users
+  backend.account = () => api.get("/account", auth()); // Try to authenticate based on stored token
+  backend.export = () => api.get("/export", auth()); // Export data
+  backend.restrict = () => api.get("/restrict", auth()); // Restrict data processing (freeze account)
+  backend.remove = () => api.get("/remove", auth()); // Remove account
+  backend.saveAccount = data => api.put("/user", data, auth()); // Update account
+  backend.availableUsername = data =>
+    api.post("/available/username", data, auth()); // Check is a username is available
+  backend.resetPassword = username =>
+    api.post("/reset/password", { username: username }, auth()); // Ask for a password reset
+  backend.setPassword = data => api.post("/set/password", data, auth()); // (re)set a new password
+
+  // Models
+  backend.removeModels = data => api.post("/remove/models", data, auth()); // Delete multiple models
+  backend.createModel = data => api.post("/model", data, auth()); // Create model
+  backend.saveModel = (handle, data) =>
+    api.put("/model/" + handle, data, auth()); // Update model
+
+  // Drafts
+  backend.createDraft = data => api.post("/draft", data, auth()); // Create draft
+  backend.saveDraft = (handle, data) =>
+    api.put("/draft/" + handle, data, auth()); // Update draft
+  backend.removeDraft = handle => api.delete("/draft/" + handle, auth()); // Remove draft
+  backend.removeDrafts = data => api.post("/remove/drafts", data, auth()); // Delete multiple drafts
+
+  return backend;
+}
+
+export default useBackend;

packages/utils/src/camelCase.js

@@ -0,0 +1,11 @@
+const camelCase = str =>
+  str
+    .replace(/\s(.)/g, function($1) {
+      return $1.toUpperCase();
+    })
+    .replace(/\s/g, "")
+    .replace(/^(.)/, function($1) {
+      return $1.toLowerCase();
+    });
+
+export default camelCase;

packages/utils/src/index.js

@@ -1,3 +1,5 @@
+export { default as backend } from "./backend";
+export { default as camelCase } from "./camelCase";
 export { default as cloneObject } from "./cloneObject";
 export { default as defaultGist } from "./defaultGist";
 export { default as defaultSa } from "./defaultSa";

packages/utils/src/storage.js

@@ -1,9 +1,6 @@
 const storage = {
   set: (key, value, raw) => {
-    if (typeof localStorage === "undefined") {
-      console.log("Warning: No localStorage support");
-      return value;
-    }
+    if (typeof localStorage === "undefined") return value;
     const _key = "fs_" + key;
 
     if (typeof value === "undefined" || value === null)
@@ -13,10 +10,7 @@ const storage = {
     return value;
   },
   get: (key, raw) => {
-    if (typeof localStorage === "undefined") {
-      console.log("Warning: No localStorage support");
-      return null;
-    }
+    if (typeof localStorage === "undefined") return null;
 
     const value = localStorage.getItem("fs_" + key);