feat(shared): Ported account/img to new inputs

markdown/org/docs/site/account/img/en.md

@@ -0,0 +1,7 @@
+---
+title: Profile Image
+---
+
+You can choose a **profile image** to further personalize your account.
+
+It can be a picture of you, your cat, your favourite cartoon character. You do you.

sites/shared/components/account/img.mjs

@@ -11,6 +11,8 @@ import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 import { Icons, welcomeSteps, BackToAccountButton } from './shared.mjs'
 import { ContinueButton } from 'shared/components/buttons/continue-button.mjs'
 import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
+import { PassiveImageInput } from 'shared/components/inputs.mjs'
+import { DynamicOrgDocs } from 'shared/components/dynamic-docs/org.mjs'
 
 export const ns = ['account', 'status']
 
@@ -18,24 +20,13 @@ export const ImgSettings = ({ title = false, welcome = false }) => {
   const { account, setAccount } = useAccount()
   const backend = useBackend()
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
 
-  const [img, setImg] = useState(false)
+  const [img, setImg] = useState('')
-  const [url, setUrl] = useState('')
-
-  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 () => {
     setLoadingStatus([true, 'processingUpdate'])
-    const result = await backend.updateAccount({ img: url ? url : img })
+    const result = await backend.updateAccount({ img })
     if (result.success) {
       setAccount(result.data.account)
       setLoadingStatus([true, 'settingsSaved', true, true])
@@ -47,41 +38,21 @@ export const ImgSettings = ({ title = false, welcome = false }) => {
   return (
     <div className="max-w-xl">
       <LoadingStatus />
-      {title ? <h2 className="text-4xl">{t('imgTitle')}</h2> : null}
+      {!welcome || img !== false ? (
-      <div>
+        <img
-        {!welcome || img !== false ? (
+          alt="img"
-          <img
+          src={img || cloudflareImageUrl({ id: `user-${account.ihash}`, variant: 'public' })}
-            alt="img"
+          className="shadow mb-4"
-            src={img || cloudflareImageUrl({ id: `user-${account.ihash}`, variant: 'public' })}
+        />
-            className="shadow mb-4"
+      ) : null}
-          />
+      <PassiveImageInput
-        ) : null}
+        label={t('image')}
-        <div
+        placeholder={'image'}
-          {...getRootProps()}
+        update={setImg}
-          className={`
+        current={img}
-          flex rounded-lg w-full flex-col items-center justify-center
+        valid={(val) => val.length > 0}
-          lg:h-64 lg:border-4 lg:border-secondary lg:border-dashed
+        docs={<DynamicOrgDocs language={i18n.language} path={`site/account/img`} />}
-        `}
+      />
-        >
-          <input {...getInputProps()} />
-          <p className="hidden lg:block p-0 m-0">{t('imgDragAndDropImageHere')}</p>
-          <p className="hidden lg:block p-0 my-2">{t('or')}</p>
-          <button className={`btn btn-secondary btn-outline mt-4 px-8`}>
-            {t('imgSelectImage')}
-          </button>
-        </div>
-        <p className="hidden lg:block p-0 my-2 text-center">{t('or')}</p>
-        <div className="flex flex-row items-center">
-          <input
-            type="url"
-            className="input input-secondary w-full input-bordered"
-            placeholder="Paste an image URL here"
-            value={url}
-            onChange={(evt) => setUrl(evt.target.value)}
-          />
-        </div>
-      </div>
-
       {welcome ? (
         <>
           <button className={`btn btn-secondary mt-4 px-8`} onClick={save} disabled={!img}>