VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(org): Updates for github data and account refresh

Browse source
This commit is contained in:
Joost De Cock 2023-08-17 17:05:08 +02:00
parent b3a21ad955
commit cf26ba933a
7 changed files with 172 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

140
sites/org/components/github/create-showcase.mjs
View file

@ -23,6 +23,7 @@ import { Tab } from 'shared/components/account/bio.mjs'
import { CodeBox } from 'shared/components/code-box.mjs'
import { PostArticle, ns as mdxNs } from 'site/components/mdx/posts/article.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { OkIcon, WarningIcon as KoIcon } from 'shared/components/icons.mjs'
export const ns = nsMerge('account', 'posts', authNs, mdxNs)
@ -40,16 +41,16 @@ const Item = ({ title, children }) => (
</div>
)
const dataAsMd = ({ title, maker, caption, intro, designs }) => `---
title: "${data.title}"
maker: ${data.maker}
caption: "${data.caption}"
date: ${yyymmvv()}
intro: "${data.intro}"
const dataAsMd = ({ title, maker, caption, intro, designs, body }) => `---
title: "${title}"
maker: ${maker}
caption: "${caption}"
date: ${yyyymmdd()}
intro: "${intro}"
designs: [${designs.map((design) => `"${design}"`).join(', ')}]
---
${data.body}
${body}
`
@ -96,7 +97,6 @@ export const CreateShowcasePost = ({ noTitle = false }) => {
}
const setExtraImg = (key, img) => {
console.log('setting extra', { key, img })
const newImages = { ...extraImages }
newImages[key] = img
setExtraImages(newImages)
@ -161,10 +161,11 @@ export const CreateShowcasePost = ({ noTitle = false }) => {
<button
className="btn btn-lg btn-primary"
disabled={!(title && slug && img && designs.length > 0)}
onClick={submitPullRequest}
>
Submit Showcase Post
</button>
{!account.github && (
{!account.data?.githubUser && !account.data?.githubEmail && (
<Popout tip>
<h5 className="text-left">
<small>Optional:</small> Are you on GitHub?
@ -225,10 +226,19 @@ const ShowcaseEditor = ({
<Tip>{t('showcaseNewInfo')}</Tip>
<Item
title={
<span>
<b>Designs</b>:{' '}
<span className="text-sm">{designs.map((d) => capitalize(d)).join(', ')}</span>
</span>
<div className="flex flex-row gap-2 items-center">
{designs.length > 0 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Design:</b>
{designs.length > 0 ? (
<span className="text-base">{designs.map((d) => capitalize(d)).join(', ')}</span>
) : (
<span className="text-error text-base">Please select at least 1 design</span>
)}
</div>
}
>
<Tip>Pick one or more designs that are featured in this post.</Tip>
@ -236,9 +246,19 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Title</b>: <span className="text-sm">{title}</span>
</span>
<div className="flex flex-row gap-2 items-center">
{title.length > 10 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Title:</b>
{title.length > 10 ? (
<span className="text-base">{title}</span>
) : (
<span className="text-error text-base">Please enter a post title</span>
)}
</div>
}
>
<Tip>Give your post a title. A good title is more than just a few words.</Tip>
@ -246,9 +266,19 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Slug</b>: <span className="text-sm">{slug}</span>
</span>
<div className="flex flex-row gap-2 items-center">
{slug.length > 3 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Slug:</b>
{slug.length > 3 ? (
<span className="text-base">{slug}</span>
) : (
<span className="text-error text-base">Please enter a slug (or post title)</span>
)}
</div>
}
>
<Tip>
@ -259,9 +289,19 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Main Image</b>: <span className="text-sm">{img}</span>
</span>
<div className="flex flex-row gap-2 items-center">
{img.length > 3 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Main Image:</b>
{img.length > 3 ? (
<span className="text-base">{img}</span>
) : (
<span className="text-error text-base">Please provide a main image for the post</span>
)}
</div>
}
>
<Tip>
@ -272,9 +312,21 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Main Image Caption</b>: <span className="text-sm">{caption}</span>
<div className="flex flex-row gap-2 items-center">
{caption.length > 3 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Main Image Caption:</b>
{caption.length > 3 ? (
<span className="text-base">{caption}</span>
) : (
<span className="text-error text-base">
Please provide a caption for the main image
</span>
)}
</div>
}
>
<Tip>
@ -285,9 +337,19 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Intro</b>: <span className="text-sm">{intro}</span>
</span>
<div className="flex flex-row gap-2 items-center">
{intro.length > 3 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Intro:</b>
{intro.length > 3 ? (
<span className="text-base">{intro}</span>
) : (
<span className="text-error text-base">Please provide an intro for link proviews</span>
)}
</div>
}
>
<Tip>A brief paragraph that will be shown on post previews on social media and so on.</Tip>
@ -322,6 +384,14 @@ const ShowcaseEditor = ({
<>
<p>To include this image in your post, use this markdown snippet:</p>
<CodeBox code={markup} title="MarkDown" />
<p className="text-right -mt-5">
<button
className="btn btn-sm btn-secondary btn-outline"
onClick={() => setBody(body + '\n\n' + markup)}
>
Add to post body
</button>
</p>
</>
)}
</>
@ -339,9 +409,19 @@ const ShowcaseEditor = ({
</Item>
<Item
title={
<span>
<b>Post body</b>: {body.slice(0, 30) + '...'}
</span>
<div className="flex flex-row gap-2 items-center">
{body.length > 3 ? (
<OkIcon stroke={4} className="w-5 h-5 text-success" />
) : (
<KoIcon stroke={3} className="w-5 h-5 text-error" />
)}
<b>Post body:</b>
{body.length > 3 ? (
<span className="text-base">{body.slice(0, 30) + '...'}</span>
) : (
<span className="text-error text-base">Please provide a post body</span>
)}
</div>
}
>
<Tip>The actual post body. Supports Markdown.</Tip>

12
sites/org/pages/account/index.mjs
View file

@ -1,6 +1,8 @@
// Dependencies
import dynamic from 'next/dynamic'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
// Hooks
import { useTranslation } from 'next-i18next'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
@ -22,13 +24,17 @@ const DynamicAccountOverview = dynamic(
{ ssr: false }
)
const AccountIndexPage = ({ page }) => (
<PageWrapper {...page}>
const AccountIndexPage = ({ page }) => {
const { t } = useTranslation(ns)
return (
<PageWrapper {...page} title={t('yourAccount')}>
<DynamicAuthWrapper>
<DynamicAccountOverview />
</DynamicAuthWrapper>
</PageWrapper>
)
)
}
export default AccountIndexPage

8
sites/shared/components/account/en.yaml
View file

@ -20,7 +20,6 @@ signOut: Sign Out
politeOhCrap: Oh fiddlesticks
bio: Bio
email: E-mail Address
github: Github Username
img: Profile image
username: Username
compare: Metricset Comparison
@ -128,7 +127,12 @@ emailChangeConfirmation: We have sent an E-mail to your new address to confirm t
vagueError: Something went wrong, and we're not certain how to handle it. Please try again, or involve a human being for assistance.
# github
githubTitle: Enter your github username here to receive updates when you report a problem through this website.
githubTitle: Link your GitHub identity
githubWhy1: Enter your GitHub username and email here and we will use them when interacting with GitHub on your behalf.
githubWhy2: Note that both your GitHub username and email is public info. This merely allows us to make a link between your FreeSewing account and GitHub account.
githubWhy3 : For example, when you report a problem on this website, we can mention you so you will receive notifications when there is an update. For this, your username is sufficient.
githubWhy4: When you submit a showcase post or make changed to our content, we can credit those commits to you if we have both your username and the email address you use on GitHub.
tooComplex: If all of this in confusing, you don't have to provide this info. It's an advanced feature.
# languge
languageTitle: Which language do you prefer?

32
sites/shared/components/account/github.mjs
View file

@ -10,6 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
// Components
import { BackToAccountButton } from './shared.mjs'
import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
export const ns = ['account', 'toast']
@ -24,12 +25,13 @@ export const GithubSettings = ({ title = false, welcome = false }) => {
const toast = useToast()
// State
const [github, setGithub] = useState(account.github || '')
const [githubUsername, setGithubUsername] = useState(account.data.githubUsername || '')
const [githubEmail, setGithubEmail] = useState(account.data.githubEmail || '')
// Helper method to save changes
const save = async () => {
startLoading()
const result = await backend.updateAccount({ github })
const result = await backend.updateAccount({ data: { githubUsername, githubEmail } })
if (result.success) {
setAccount(result.data.account)
toast.for.settingsSaved()
@ -40,17 +42,35 @@ export const GithubSettings = ({ title = false, welcome = false }) => {
return (
<div className="max-w-xl">
{title ? <h2 className="text-4xl">{t('githubTitle')}</h2> : null}
<div className="flex flex-row items-center mt-4">
<label className="font-bold">{t('username')}</label>
<div className="flex flex-row items-center mb-4">
<input
value={github}
onChange={(evt) => setGithub(evt.target.value)}
value={githubUsername}
onChange={(evt) => setGithubUsername(evt.target.value)}
className="input w-full input-bordered flex flex-row"
type="text"
placeholder={t('github')}
placeholder={account.username}
/>
</div>
<label className="font-bold">{t('email')}</label>
<div className="flex flex-row items-center mb-4">
<input
value={githubEmail}
onChange={(evt) => setGithubEmail(evt.target.value)}
className="input w-full input-bordered flex flex-row"
type="text"
placeholder={`${account.username}@users.freesewing.org`}
/>
</div>
<SaveSettingsButton btnProps={{ onClick: save }} />
{!welcome && <BackToAccountButton loading={loading} />}
<Popout note>
<p className="text-sm font-bold">{t('githubWhy1')}</p>
<p className="text-sm">{t('githubWhy2')}</p>
<p className="text-sm">{t('githubWhy3')}</p>
<p className="text-sm">{t('githubWhy4')}</p>
<p className="text-sm">{t('tooComplex')}</p>
</Popout>
</div>
)
}

10
sites/shared/components/wrappers/auth/index.mjs
View file

@ -104,7 +104,7 @@ const ConsentLacking = ({ t, banner }) => (
export const AuthWrapper = ({ children, app, requiredRole = 'user' }) => {
const { t } = useTranslation(ns)
const { account, token, admin, stopImpersonating } = useAccount()
const { account, token, admin, stopImpersonating, signOut } = useAccount()
const backend = useBackend()
const [ready, setReady] = useState(false)
@ -123,9 +123,15 @@ export const AuthWrapper = ({ children, app, requiredRole = 'user' }) => {
})
}
}
const verifyUser = async () => {
const result = await backend.ping()
if (result.success) {
} else signOut()
}
if (admin && admin.token) verifyAdmin()
if (token) verifyUser()
setReady(true)
}, [admin])
}, [admin, token])
if (!ready) return <Loading />

17
sites/shared/hooks/use-account-reload.mjs
View file

@ -1,17 +0,0 @@
// Hooks
import { useAccount } from 'shared/hooks/use-account.mjs'
import { useBackend } from 'shared/hooks/use-backend.mjs'
export const useAccountReload = () => {
// Hooks
const { setAccount, token } = useAccount()
const backend = useBackend(token)
// Helper method to reload account
const reload = async () => {
const result = await backend.reloadAccount()
if (result.success) setAccount(result.data.account)
}
return reload
}

9
sites/shared/hooks/use-backend.mjs
View file

@ -302,7 +302,7 @@ Backend.prototype.createIssue = async function (data) {
* Create showcase Pull Request
*/
Backend.prototype.createShowcasePr = async function (data) {
return responseHandler(await api.post(`/flows/pr/showcase`, data, this.auth))
return responseHandler(await api.post(`/flows/pr/showcase/jwt`, data, this.auth))
}
/*
* Send translation invite
@ -346,6 +346,13 @@ Backend.prototype.removeImage = async function (id) {
return responseHandler(await api.delete(`/images/${id}/jwt`, this.auth))
}
/*
* Ping backend to see if current token is still valid
*/
Backend.prototype.ping = async function () {
return responseHandler(await api.get(`/whoami/jwt`, this.auth))
}
/*
* Search user (admin method)
*/