370 lines
13 KiB
JavaScript
370 lines
13 KiB
JavaScript
// Config
|
|
import { cloudflareImageUrl, capitalize } from '@freesewing/utils'
|
|
import { control as controlConfig } from '@freesewing/config'
|
|
// Hooks
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useAccount } from '@freesewing/react/hooks/useAccount'
|
|
import { useBackend } from '@freesewing/react/hooks/useBackend'
|
|
// Components
|
|
import { Link as DefaultLink } from '@freesewing/react/components/Link'
|
|
import { ControlScore } from '@freesewing/react/components/Control'
|
|
import {
|
|
MeasurementsSetIcon,
|
|
SignoutIcon,
|
|
UserIcon,
|
|
UnitsIcon,
|
|
ShowcaseIcon,
|
|
ChatIcon,
|
|
EmailIcon,
|
|
KeyIcon,
|
|
BookmarkIcon,
|
|
CompareIcon,
|
|
PrivacyIcon,
|
|
ControlIcon,
|
|
LockIcon,
|
|
NewsletterIcon,
|
|
ShieldIcon,
|
|
FingerprintIcon,
|
|
GitHubIcon,
|
|
InstagramIcon,
|
|
MastodonIcon,
|
|
TwitchIcon,
|
|
TikTokIcon,
|
|
LinkIcon,
|
|
TrashIcon,
|
|
RedditIcon,
|
|
CloseIcon,
|
|
ReloadIcon,
|
|
NoIcon,
|
|
PatternIcon,
|
|
BoolYesIcon,
|
|
BoolNoIcon,
|
|
OkIcon,
|
|
WrenchIcon,
|
|
UploadIcon,
|
|
DownloadIcon,
|
|
} from '@freesewing/react/components/Icon'
|
|
|
|
const itemIcons = {
|
|
bookmarks: <BookmarkIcon />,
|
|
sets: <MeasurementsSetIcon />,
|
|
patterns: <PatternIcon />,
|
|
apikeys: <KeyIcon />,
|
|
username: <UserIcon />,
|
|
email: <EmailIcon />,
|
|
bio: <ChatIcon />,
|
|
img: <ShowcaseIcon />,
|
|
language: <ShowcaseIcon />,
|
|
units: <UnitsIcon />,
|
|
compare: <CompareIcon />,
|
|
consent: <PrivacyIcon />,
|
|
control: <ControlIcon />,
|
|
mfa: <ShieldIcon />,
|
|
newsletter: <NewsletterIcon />,
|
|
password: <LockIcon />,
|
|
github: <GitHubIcon />,
|
|
instagram: <InstagramIcon />,
|
|
mastodon: <MastodonIcon />,
|
|
twitter: <InstagramIcon />,
|
|
twitch: <TwitchIcon />,
|
|
tiktok: <TikTokIcon />,
|
|
website: <LinkIcon />,
|
|
reddit: <RedditIcon />,
|
|
}
|
|
|
|
const btnClasses = 'tw:daisy-btn tw:capitalize tw:flex tw:flex-row tw:justify-between'
|
|
const itemClasses =
|
|
'tw:flex tw:flex-row tw:items-center tw:justify-between tw:p-2 tw:px-4 tw:rounded tw:mb-1'
|
|
const linkClasses = `tw:hover:bg-secondary/10 tw:max-w-md tw:hover:no-underline tw:text-base-content no-hover-decoration`
|
|
|
|
const titles = {
|
|
apikeys: 'API Keys',
|
|
sets: 'Measurements Sets',
|
|
patterns: 'Patterns',
|
|
img: 'Avatar',
|
|
email: 'E-mail Address',
|
|
newsletter: 'Newsletter Subscription',
|
|
compare: 'Measurements Comparison',
|
|
consent: 'Consent & Privacy',
|
|
control: 'User Experience',
|
|
github: 'GitHub',
|
|
mfa: 'Multi-Factor Authentication',
|
|
}
|
|
|
|
const YesNo = ({ check }) => (check ? <BoolYesIcon /> : <BoolNoIcon />)
|
|
|
|
/**
|
|
* A component to manage the user's Instagram handle in their account data
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {React.Component} props.Link - A framework specific Link component for client-side routing
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const Links = ({ Link = false }) => {
|
|
// Use custom Link component if available
|
|
if (!Link) Link = DefaultLink
|
|
|
|
// Hooks
|
|
const { account, signOut, control } = useAccount()
|
|
const backend = useBackend()
|
|
|
|
// State
|
|
const [bookmarks, setBookmarks] = useState([])
|
|
const [sets, setSets] = useState([])
|
|
const [patterns, setPatterns] = useState([])
|
|
const [apikeys, setApikeys] = useState([])
|
|
|
|
// Effects
|
|
useEffect(() => {
|
|
const getUserData = async () => {
|
|
const [status, body] = await backend.getUserData(account.id)
|
|
if (status === 200 && body.result === 'success') {
|
|
setApikeys(body.data.apikeys)
|
|
setBookmarks(body.data.bookmarks)
|
|
setPatterns(body.data.patterns)
|
|
setSets(body.data.sets)
|
|
}
|
|
}
|
|
getUserData()
|
|
}, [account.id])
|
|
|
|
if (!account.username) return null
|
|
|
|
const itemPreviews = {
|
|
apikeys: apikeys?.length || 0,
|
|
bookmarks: bookmarks?.length || 0,
|
|
sets: sets?.length || 0,
|
|
patterns: patterns?.length || 0,
|
|
username: account.username,
|
|
email: account.email,
|
|
bio: account.bio ? <span>{account.bio.slice(0, 15)}…</span> : '',
|
|
img: (
|
|
<img
|
|
src={cloudflareImageUrl({ type: 'sq100', id: `uid-${account.ihash}` })}
|
|
className="tw:w-8 tw:h-8 tw:aspect-square tw:rounded-full shadow"
|
|
/>
|
|
),
|
|
units: account.imperial ? 'Imperial' : 'Metric',
|
|
newsletter: <YesNo check={account.newsletter} />,
|
|
compare: <YesNo check={account.compare} />,
|
|
consent: <YesNo check={account.consent} />,
|
|
control: <ControlScore control={account.control} />,
|
|
github: account.data.githubUsername || account.data.githubEmail || <NoIcon />,
|
|
password: account.passwordType === 'v3' ? <BoolYesIcon /> : <NoIcon />,
|
|
mfa: <YesNo check={account.mfaEnabled} />,
|
|
}
|
|
for (const social of Object.keys(controlConfig.account.fields.identities).filter(
|
|
(i) => i !== 'github'
|
|
))
|
|
itemPreviews[social] = account.data[social] || (
|
|
<NoIcon className="tw:text-base-content tw:w-6 tw:h-6" stroke={2} />
|
|
)
|
|
|
|
return (
|
|
<div className="tw:w-full">
|
|
<div className="tw:grid tw:grid-cols-1 tw:xl:grid-cols-2 tw:gap-4 tw:mb-8">
|
|
<div>
|
|
<h4 className="tw:my-2">Your Data</h4>
|
|
{Object.keys(controlConfig.account.fields.data).map((item) =>
|
|
controlConfig.flat[item] > control ? null : (
|
|
<Link
|
|
key={item}
|
|
title={titles[item]}
|
|
href={`/account/data/${item}/`}
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium tw:text-base-content">
|
|
{itemIcons[item]}
|
|
{titles[item] ? titles[item] : capitalize(item)}
|
|
</div>
|
|
<div className="tw:text-base-content">{itemPreviews[item]}</div>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{control > 1 && (
|
|
<div>
|
|
<h4 className="tw:my-2">About You</h4>
|
|
{Object.keys(controlConfig.account.fields.info).map((item) =>
|
|
controlConfig.flat[item] > control ? null : (
|
|
<Link
|
|
key={item}
|
|
title={titles[item] || capitalize(item)}
|
|
href={`/account/about/${item === 'img' ? 'avatar' : item}/`}
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium tw:text-base-content">
|
|
{itemIcons[item]}
|
|
{titles[item] ? titles[item] : capitalize(item)}
|
|
</div>
|
|
<div className="tw:text-base-content">{itemPreviews[item]}</div>
|
|
</Link>
|
|
)
|
|
)}
|
|
<div className={`${itemClasses} tw:opacity-60 tw:max-w-md`}>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium">
|
|
<OkIcon stroke={3} />
|
|
<span>Role</span>
|
|
</div>
|
|
<div className="tw:capitalize">{account.role}</div>
|
|
</div>
|
|
<div className={`${itemClasses} tw:opacity-60 tw:max-w-md`}>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium">
|
|
<FingerprintIcon />
|
|
<span>ID</span>
|
|
</div>
|
|
<div>{account.id}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<h4 className="tw:my-2">Preferences</h4>
|
|
{Object.keys(controlConfig.account.fields.settings).map((item) =>
|
|
controlConfig.flat[item] > control ? null : (
|
|
<Link
|
|
key={item}
|
|
title={titles[item] || capitalize(item)}
|
|
href={`/account/preferences/${item}/`}
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium tw:text-base-content">
|
|
{itemIcons[item]}
|
|
{titles[item] ? titles[item] : capitalize(item)}
|
|
</div>
|
|
<div className="tw:text-base-content">{itemPreviews[item]}</div>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{control > 2 && (
|
|
<div>
|
|
<h4 className="tw:my-2">Linked Identities</h4>
|
|
{Object.keys(controlConfig.account.fields.identities).map((item) =>
|
|
controlConfig.flat[item] > control ? null : (
|
|
<Link
|
|
key={item}
|
|
title={titles[item] || capitalize(item)}
|
|
href={`/account/social/${item}/`}
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium tw:text-base-content">
|
|
{itemIcons[item]}
|
|
{titles[item] ? titles[item] : capitalize(item)}
|
|
</div>
|
|
<div className="tw:text-base-content">{itemPreviews[item]}</div>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{control > 1 && (
|
|
<div>
|
|
<h4 className="tw:my-2">Security</h4>
|
|
{Object.keys(controlConfig.account.fields.security).map((item) =>
|
|
controlConfig.flat[item] > control ? null : (
|
|
<Link
|
|
key={item}
|
|
title={titles[item] || capitalize(item)}
|
|
href={`/account/security/${item}/`}
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-3 tw:font-medium tw:text-base-content">
|
|
{itemIcons[item]}
|
|
{titles[item] ? titles[item] : capitalize(item)}
|
|
</div>
|
|
<div className="tw:text-base-content">{itemPreviews[item]}</div>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{control > 1 && (
|
|
<div>
|
|
<h4 className="tw:my-2">Actions</h4>
|
|
{control > 2 && (
|
|
<Link
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
title="Import data"
|
|
href="/account/actions/import/"
|
|
>
|
|
<UploadIcon className="tw:w-6 tw:h-6 tw:text-base-content" />
|
|
<span className="tw:font-medium tw:text-base-content">Import data</span>
|
|
</Link>
|
|
)}
|
|
{control > 2 && (
|
|
<Link
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
title="Export your data"
|
|
href="/account/actions/export/"
|
|
>
|
|
<DownloadIcon className="tw:w-6 tw:h-6 tw:text-base-content" />
|
|
<span className="tw:font-medium tw:text-base-content">Export your data</span>
|
|
</Link>
|
|
)}
|
|
{control > 2 && (
|
|
<Link
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
title="Reload account data"
|
|
href="/account/actions/reload/"
|
|
>
|
|
<ReloadIcon className="tw:w-6 tw:h-6 tw:text-base-content" />
|
|
<span className="tw:font-medium tw:text-base-content">Reload account data</span>
|
|
</Link>
|
|
)}
|
|
{control > 3 && (
|
|
<Link
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
title="Restrict processing of your data"
|
|
href="/account/actions/restrict/"
|
|
>
|
|
<CloseIcon className="tw:w-6 tw:h-6 tw:text-warning" stroke={3} />
|
|
<span className="tw:font-medium tw:text-base-content">
|
|
Restrict processing of your data
|
|
</span>
|
|
</Link>
|
|
)}
|
|
<Link
|
|
className={`${itemClasses} ${linkClasses}`}
|
|
title="Remove your account"
|
|
href="/account/actions/remove/"
|
|
>
|
|
<TrashIcon className="tw:w-6 tw:h-6 tw:text-warning" />
|
|
<span className="tw:font-medium tw:text-base-content">Remove your account</span>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-2 tw:md:gap-4 tw:justify-end">
|
|
{account.role === 'admin' && (
|
|
<Link
|
|
className={`${btnClasses} tw:daisy-btn-accent tw:md:w-64 tw:text-accent-content`}
|
|
href="/admin"
|
|
>
|
|
<WrenchIcon className="tw:w-6 tw:h-6 tw:text-accent-content" />
|
|
<span className="tw:text-accent-content">Administration</span>
|
|
</Link>
|
|
)}
|
|
{control > 1 && (
|
|
<Link className={`${btnClasses} tw:daisy-btn-secondary tw:md:w-64`} href="/profile">
|
|
<UserIcon className="tw:w-6 tw:h-6 tw:text-accent-content" />
|
|
<span className="tw:text-accent-content">Your Profile</span>
|
|
</Link>
|
|
)}
|
|
<button
|
|
className={`${btnClasses} tw:daisy-btn-neutral tw:md:w-64`}
|
|
onClick={() => signOut()}
|
|
>
|
|
<SignoutIcon />
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|