wip(org): Final welcome pages

config/dependencies.yaml

@@ -324,6 +324,7 @@ org:
     'lodash.orderby': *_orderby
     'lodash.set': *_set
     'next': *next
+    'react-dropzone': '14.2.3'
     'react-hotkeys-hook': *reactHotkeysHook
     'react-instantsearch-dom': *reactInstantsearchDom
     'react-markdown': *reactMarkdown

sites/backend/src/index.mjs

@@ -25,7 +25,7 @@ import { openapi } from '../openapi/index.mjs'
 const config = verifyConfig()
 const prisma = new PrismaClient()
 const app = express()
-app.use(express.json())
+app.use(express.json({ limit: '12mb' })) // Required for img upload
 app.use(express.static('public'))
 app.use('/docs', swaggerUi.serve, swaggerUi.setup(openapi))
 

sites/backend/src/middleware.mjs

@@ -1,4 +1,3 @@
-//import bodyParser from 'body-parser'
 import cors from 'cors'
 import http from 'passport-http'
 import jwt from 'passport-jwt'
@@ -14,8 +13,6 @@ const levelFromRole = (role) => {
 }
 
 function loadExpressMiddleware(app) {
-  // FIXME: Is this still needed in FreeSewing v3?
-  //app.use(bodyParser.urlencoded({ extended: true }))
   app.use(cors())
 }
 

sites/org/components/account/img/img.en.yaml

@@ -1,4 +1,6 @@
 title: How about a picture too?
-bioPreview: Bio Preview
+dragAndDropImageHere: Drag and drop an image here
+selectImage: Select an image
+or: or
 save: Save
 continue: Continue

sites/org/components/account/img/index.js

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 import { useTranslation } from 'next-i18next'
 import useBackend from 'site/hooks/useBackend.js'
 import Link from 'next/link'
 import { Choice, Icons, welcomeSteps } from '../shared.js'
+import { useDropzone } from 'react-dropzone'
 
 export const namespaces = ['img']
 
@@ -19,10 +20,21 @@ const Tab = ({ id, activeTab, setActiveTab, t }) => (
 const UsernameSettings = ({ app, title = false, welcome = false }) => {
   const backend = useBackend(app)
   const { t } = useTranslation(namespaces)
-  const [bio, setBio] = useState(app.account.bio)
+
+  const [img, setImg] = useState(false)
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      setImg(reader.result)
+    }
+    acceptedFiles.forEach((file) => reader.readAsDataURL(file))
+  }, [])
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   const save = async () => {
-    const result = await backend.updateAccount({ bio })
+    const result = await backend.updateAccount({ img })
   }
 
   const nextHref = '/docs/guide'
@@ -30,9 +42,25 @@ const UsernameSettings = ({ app, title = false, welcome = false }) => {
   return (
     <>
       {title ? <h1 className="text-4xl">{t('title')}</h1> : null}
-      <div className="flex flex-row items-center mt-4">fixme</div>
+      <div>
-      <button className={`btn btn-secondary mt-4 w-64`} onClick={save}>
+        {!welcome || img !== false ? (
-        {t('upload')}
+          <img alt="img" src={img || app.account.img} className="shadow mb-4" />
+        ) : null}
+        <div
+          {...getRootProps()}
+          className={`
+          flex rounded-lg w-full flex-col items-center justify-center
+          lg:h-64 lg:border-4 lg:border-secondary lg:border-dashed
+        `}
+        >
+          <input {...getInputProps()} />
+          <p className="hidden lg:block p-0 m-0">{t('dragAndDropImageHere')}</p>
+          <p className="hidden lg:block p-0 my-2">{t('or')}</p>
+          <button className={`btn btn-secondary btn-outline mt-4 w-64`}>{t('selectImage')}</button>
+        </div>
+      </div>
+      <button className={`btn btn-secondary mt-4 w-64`} onClick={save} disabled={!img}>
+        {t('save')}
       </button>
 
       {welcome ? (

sites/org/components/wrappers/auth/index.js

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
+import Loader from 'shared/components/loader.js'
 
 export const namespaces = ['auth']
 
@@ -84,6 +85,7 @@ const ConsentLacking = ({ t }) => (
 
 const AuthWrapper = ({ children, app }) => {
   const { t } = useTranslation(namespaces)
+  if (!app.accountReady) return <Loader />
   if (!app.token || !app.account?.username) return <AuthRequired t={t} />
   if (app.account.status !== 1) {
     if (app.account.status === 0) return <AccountInactive t={t} />

sites/org/hooks/useApp.js

@@ -86,7 +86,7 @@ function useApp({ bugsnag }) {
   const { t } = useTranslation()
 
   // Persistent state
-  const [account, setAccount] = useLocalStorage('account', { username: false })
+  const [account, setAccount, accountReady] = useLocalStorage('account', { username: false })
   const [token, setToken] = useLocalStorage('token', null)
   const [theme, setTheme] = useTheme()
 
@@ -145,6 +145,7 @@ function useApp({ bugsnag }) {
 
     // State
     account,
+    accountReady,
     token,
     loading,
     navigation,

sites/org/package.json

@@ -39,6 +39,7 @@
     "lodash.orderby": "4.6.0",
     "lodash.set": "4.3.2",
     "next": "13.1.1",
+    "react-dropzone": "14.2.3",
     "react-hotkeys-hook": "4.3.2",
     "react-instantsearch-dom": "6.38.2",
     "react-markdown": "8.0.4",

sites/shared/components/loader.js

@@ -1,4 +1,4 @@
-import Spinner from 'shared/components/spinner'
+import Spinner from 'shared/components/icons/spinner.js'
 
 const Loader = ({}) => (
   <div
@@ -8,13 +8,13 @@ const Loader = ({}) => (
     `}
   >
     <div
-      className="m-auto lightbox bg-neutral bg-opacity-20 p-2 mask mask-squircle"
+      className="m-auto lightbox bg-neutral bg-opacity-0 p-4 mask mask-squircle"
       style={{
         maxHeight: 'calc(100vh - 6rem)',
         maxWidth: 'calc(100vw - 6rem)',
       }}
     >
-      <Spinner className="w-36 h-36" />
+      <Spinner className="h-12 w-12 animate-spin text-primary" />
     </div>
   </div>
 )

yarn.lock

@@ -6003,6 +6003,11 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@10.4.13, autoprefixer@^10.4.0, autoprefixer@^10.4.13:
   version "10.4.13"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
@@ -9712,6 +9717,13 @@ file-saver@2.0.5:
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
   integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
 
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
+
 file-uri-to-path@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -16666,6 +16678,15 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dropzone@14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
+
 react-fast-compare@^3.0.0, react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"