VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(org): Final welcome pages

Browse source
This commit is contained in:
joostdecock 2023-01-27 20:39:09 +01:00
parent e020883cd2
commit 8caed34e73
10 changed files with 68 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

1
config/dependencies.yaml
View file

@ -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

2
sites/backend/src/index.mjs
View file

@ -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))

3
sites/backend/src/middleware.mjs
View file

@ -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())
}

4
sites/org/components/account/img/img.en.yaml
View file

@ -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

40
sites/org/components/account/img/index.js
View file

@ -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>
<button className={`btn btn-secondary mt-4 w-64`} onClick={save}>
{t('upload')}
<div>
{!welcome || img !== false ? (
<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 ? (

2
sites/org/components/wrappers/auth/index.js
View file

@ -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} />

3
sites/org/hooks/useApp.js
View file

@ -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,

1
sites/org/package.json
View file

@ -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",

6
sites/shared/components/loader.js
View file

@ -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>
)

21
yarn.lock
View file

@ -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"