wip: Sign in / Role fixes
This commit is contained in:
joostdecock
parent
944bc5a1d1
commit
ce7f7c65e0
2 changed files with 94 additions and 84 deletions
|
|
@ -8,22 +8,23 @@ import { useBackend } from '@freesewing/react/hooks/useBackend'
|
|||
import { Link as DefaultLink } from '@freesewing/react/components/Link'
|
||||
import { LockIcon, PlusIcon } from '@freesewing/react/components/Icon'
|
||||
import { Spinner } from '@freesewing/react/components/Spinner'
|
||||
import { H1, H2, H3 } from '@freesewing/react/components/Heading'
|
||||
|
||||
//import { ConsentForm, ns as gdprNs } from 'shared/components/gdpr/form.mjs'
|
||||
|
||||
const ConsentForm = () => null
|
||||
|
||||
const Wrap = ({ children }) => (
|
||||
<div className="m-auto max-w-xl text-center mt-8 p-8">{children}</div>
|
||||
<div className="tw-m-auto tw-max-w-xl tw-text-center tw-mt-8 tw-p-8">{children}</div>
|
||||
)
|
||||
|
||||
const ContactSupport = ({ Link = false }) => {
|
||||
if (!Link) Link = DefaultLink
|
||||
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-center gap-4 mt-8">
|
||||
<Link href="/support" className="btn btn-success w-full">
|
||||
{t('contactSupport')}
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-4 tw-mt-8">
|
||||
<Link href="/support" className="tw-daisy-btn tw-daisy-btn-success tw-w-full">
|
||||
Contact Support
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -35,16 +36,19 @@ const AuthRequired = ({ Link, banner }) => {
|
|||
return (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h2>Authentication Required</h2>
|
||||
<H3>Authentication Required</H3>
|
||||
<p>This functionality requires a FreeSewing account</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-8">
|
||||
<Link href="/signup" className={`${horFlexClasses} daisy-btn daisy-btn-secondary w-full`}>
|
||||
<div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary tw-w-full`}
|
||||
>
|
||||
<PlusIcon />
|
||||
Sign Up
|
||||
</Link>
|
||||
<Link
|
||||
href="/signin"
|
||||
className={`${horFlexClasses} daisy-btn daisy-btn-secondary daisy-btn-outline w-full`}
|
||||
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline tw-w-full`}
|
||||
>
|
||||
<LockIcon />
|
||||
Sign In
|
||||
|
|
@ -60,12 +64,12 @@ const AccountInactive = ({ Link, banner }) => {
|
|||
return (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h1>{t('accountInactive')}</h1>
|
||||
<p>{t('accountInactiveMsg')}</p>
|
||||
<p>{t('signupAgain')}</p>
|
||||
<div className="flex flex-row items-center justify-center gap-4 mt-8">
|
||||
<Link href="/signup" className="btn btn-primary w-full">
|
||||
{t('signUp')}
|
||||
<H3>Account Inactive</H3>
|
||||
<p>You must activate your account via the signup link we sent you.</p>
|
||||
<p>If you cannot find the link, you can receive a new one by signing up again.</p>
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-4 tw-mt-8">
|
||||
<Link href="/signup" className="tw-daisy-btn tw-daisy-btn-primary tw-w-full">
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
</Wrap>
|
||||
|
|
@ -75,36 +79,42 @@ const AccountInactive = ({ Link, banner }) => {
|
|||
const AccountDisabled = ({ banner }) => (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h1>{t('accountDisabled')}</h1>
|
||||
<p>{t('accountDisabledMsg')}</p>
|
||||
<ContactSupport t={t} />
|
||||
<H3>Acccount Disabled</H3>
|
||||
<p>
|
||||
You cannot re-enable a disabled account. You need to contact support to resolve this
|
||||
situation.
|
||||
</p>
|
||||
<ContactSupport />
|
||||
</Wrap>
|
||||
)
|
||||
|
||||
const AccountProhibited = ({ banner }) => (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h1>{t('accountProhibited')}</h1>
|
||||
<p>{t('accountProhibitedMsg')}</p>
|
||||
<ContactSupport t={t} />
|
||||
<H3>Your account has been disabled</H3>
|
||||
<p>Your account has been administratively disabled.</p>
|
||||
<ContactSupport />
|
||||
</Wrap>
|
||||
)
|
||||
|
||||
const AccountStatusUnknown = ({ t, banner }) => (
|
||||
const AccountStatusUnknown = ({ banner }) => (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h1>{t('statusUnknown')}</h1>
|
||||
<p>{t('statusUnknownMsg')}</p>
|
||||
<ContactSupport t={t} />
|
||||
<H3>Account status warning</H3>
|
||||
<p>Your account status prohibits us from processing your data. Please contact support.</p>
|
||||
<ContactSupport />
|
||||
</Wrap>
|
||||
)
|
||||
|
||||
const RoleLacking = ({ t, requiredRole, role, banner }) => (
|
||||
<Wrap>
|
||||
{banner}
|
||||
<h1>{t('roleLacking')}</h1>
|
||||
<p dangerouslySetInnerHTML={{ __html: t('roleLackingMsg', { requiredRole, role }) }} />
|
||||
<ContactSupport t={t} />
|
||||
<H3>You lack the required role to access this content</H3>
|
||||
<p>
|
||||
This content requires the <b>{requiredRole}</b> role. Your role is <b>{role}</b> which does
|
||||
not grant you access to this content.
|
||||
</p>
|
||||
<ContactSupport />
|
||||
</Wrap>
|
||||
)
|
||||
|
||||
|
|
@ -132,7 +142,7 @@ const ConsentLacking = ({ banner, refresh }) => {
|
|||
|
||||
return (
|
||||
<Wrap>
|
||||
<div className="text-left">
|
||||
<div className="tw-text-left">
|
||||
{banner}
|
||||
<ConsentForm submit={updateConsent} />
|
||||
</div>
|
||||
|
|
@ -140,8 +150,6 @@ const ConsentLacking = ({ banner, refresh }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const t = (input) => input
|
||||
|
||||
export const RoleBlock = ({ children, user = false, Link = false }) => {
|
||||
if (!Link) Link = DefaultLink
|
||||
let requiredRole = 'admin'
|
||||
|
|
@ -181,9 +189,8 @@ export const RoleBlock = ({ children, user = false, Link = false }) => {
|
|||
} else {
|
||||
if (data?.error?.error) setError(data.error.error)
|
||||
else {
|
||||
console.log('WOULD SIGN OUT', data)
|
||||
signOut()
|
||||
}
|
||||
//else signOut()
|
||||
}
|
||||
setReady(true)
|
||||
}
|
||||
|
|
@ -200,26 +207,20 @@ export const RoleBlock = ({ children, user = false, Link = false }) => {
|
|||
setError(false)
|
||||
}
|
||||
|
||||
if (!ready)
|
||||
return (
|
||||
<>
|
||||
<p>not ready</p>
|
||||
<Spinner />
|
||||
</>
|
||||
)
|
||||
if (!ready) return <Spinner />
|
||||
|
||||
const banner = impersonating ? (
|
||||
<div className="bg-warning rounded-lg shadow py-4 px-6 flex flex-row items-center gap-4 justify-between">
|
||||
<span className="text-base-100 text-left">
|
||||
<div className="tw-bg-warning tw-rounded-lg tw-shadow tw-py-4 tw-px-6 tw-flex tw-flex-row tw-items-center tw-gap-4 tw-justify-between">
|
||||
<span className="tw-text-base-100 tw-text-left">
|
||||
Hi <b>{impersonating.admin}</b>, you are currently impersonating <b>{impersonating.user}</b>
|
||||
</span>
|
||||
<button className="btn btn-neutral" onClick={stopImpersonating}>
|
||||
<button className="tw-daisy-btn tw-daisy-btn-neutral" onClick={stopImpersonating}>
|
||||
Stop Impersonating
|
||||
</button>
|
||||
</div>
|
||||
) : null
|
||||
|
||||
const childProps = { t, banner }
|
||||
const childProps = { banner }
|
||||
|
||||
if (!token || !account.username) return <AuthRequired {...childProps} />
|
||||
if (error) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {
|
|||
UserIcon,
|
||||
} from '@freesewing/react/components/Icon'
|
||||
import { MfaInput, StringInput, PasswordInput } from '@freesewing/react/components/Input'
|
||||
import { H1, H2, H3, H4 } from '@freesewing/react/components/Heading'
|
||||
|
||||
/*
|
||||
* This SignIn component holds the entire sign-in form
|
||||
|
|
@ -126,43 +127,49 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const btnClasses = `daisy-btn capitalize w-full mt-4 ${
|
||||
signInFailed ? 'daisy-btn-warning' : 'daisy-btn-primary'
|
||||
} transition-colors ease-in-out duration-300 ${horFlexClasses}`
|
||||
const btnClasses = `tw-daisy-btn tw-capitalize tw-w-full tw-mt-4 ${
|
||||
signInFailed ? 'tw-daisy-btn-warning' : 'tw-daisy-btn-primary'
|
||||
} tw-transition-colors tw-ease-in-out tw-duration-300 ${horFlexClassesNoSm}`
|
||||
const noBueno = (
|
||||
<>
|
||||
<WarningIcon />
|
||||
<span className="pl-2">{signInFailed}</span>
|
||||
<span className="tw-pl-2">{signInFailed}</span>
|
||||
<WarningIcon />
|
||||
</>
|
||||
)
|
||||
|
||||
if (magicLinkSent)
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-inherit text-3xl lg:text-5xl mb-4 pb-0 text-center">Email Sent</h1>
|
||||
<p className="text-inherit text-lg text-center">
|
||||
<WrapForm>
|
||||
<H1>Email Sent</H1>
|
||||
<p className="tw-text-inherit tw-text-lg tw-text-center">
|
||||
Go check your inbox for an email from <b>FreeSewing.org</b>
|
||||
</p>
|
||||
<p className="text-inherit text-lg text-center">
|
||||
<p className="tw-text-inherit tw-text-lg tw-text-center">
|
||||
Click the sign-in link in that email to sign in to your FreeSewing account.
|
||||
</p>
|
||||
<div className="flex flex-row gap-4 items-center justify-center p-8">
|
||||
<button className="daisy-btn daisy-btn-ghost" onClick={() => setMagicLinkSent(false)}>
|
||||
<div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-p-8">
|
||||
<button
|
||||
className="tw-daisy-btn tw-daisy-btn-outline tw-daisy-btn-sm"
|
||||
onClick={() => setMagicLinkSent(false)}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<Link href="/support" className="daisy-btn daisy-btn-ghost">
|
||||
<Link
|
||||
href="/support"
|
||||
className="tw-daisy-btn tw-daisy-btn-outline tw-daisy-btn-sm hover:tw-no-underline"
|
||||
>
|
||||
Contact support
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
</WrapForm>
|
||||
)
|
||||
|
||||
if (mfa)
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-inherit text-3xl lg:text-5xl mb-4 pb-0 text-center">MFA Code</h1>
|
||||
<p className="text-inherit text-lg text-center">
|
||||
<WrapForm>
|
||||
<H1>MFA Code</H1>
|
||||
<p className="tw-text-inherit tw-text-lg tw-text-center">
|
||||
Please provide a one-time MFA code, or a backup scratch code
|
||||
</p>
|
||||
<MfaInput
|
||||
|
|
@ -175,31 +182,31 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
noBueno
|
||||
) : (
|
||||
<>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<KeyIcon />
|
||||
</span>
|
||||
<span className="pl-2">Sign In</span>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-pl-2">Sign In</span>
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<LockIcon />
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div className="flex flex-row gap-4 items-center justify-center p-8">
|
||||
<button className="daisy-btn daisy-btn-ghost" onClick={() => setMfa(false)}>
|
||||
<div className="tw-flex tw-flex-row tw-gap-4 tw-items-center tw-justify-center tw-p-8">
|
||||
<button className="tw-daisy-btn tw-daisy-btn-ghost" onClick={() => setMfa(false)}>
|
||||
Back
|
||||
</button>
|
||||
<Link href="/support" className="daisy-btn daisy-btn-ghost">
|
||||
<Link href="/support" className="tw-daisy-btn tw-daisy-btn-ghost">
|
||||
Contact support
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
</WrapForm>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="tailwind-container">
|
||||
<h1>{seenBefore ? `Welcome back ${seenUser}` : 'Welcome'}</h1>
|
||||
<h3>Sign in to FreeSewing</h3>
|
||||
<WrapForm>
|
||||
<H1>{seenBefore ? `Welcome back ${seenUser}` : 'Welcome'}</H1>
|
||||
<H4>Sign in to FreeSewing</H4>
|
||||
{!seenBefore && (
|
||||
<StringInput
|
||||
label="Your Email address, Username, or User #"
|
||||
|
|
@ -211,7 +218,7 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
)}
|
||||
{magicLink ? (
|
||||
<button
|
||||
className={`${btnClasses} daisy-btn-lg`}
|
||||
className={`${btnClasses} tw-daisy-btn-lg`}
|
||||
tabIndex="-1"
|
||||
role="button"
|
||||
onClick={signinHandler}
|
||||
|
|
@ -220,11 +227,11 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
noBueno
|
||||
) : (
|
||||
<>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
<span className="pl-2">Email me a sign-in link</span>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-pl-2">Email me a sign-in link</span>
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
</>
|
||||
|
|
@ -244,11 +251,11 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
noBueno
|
||||
) : (
|
||||
<>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<KeyIcon />
|
||||
</span>
|
||||
<span className="pl-2">Sign in</span>
|
||||
<span className="hidden lg:block">
|
||||
<span className="tw-pl-2">Sign in</span>
|
||||
<span className="tw-hidden lg:tw-block">
|
||||
<LockIcon />
|
||||
</span>
|
||||
</>
|
||||
|
|
@ -257,19 +264,19 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
</>
|
||||
)}
|
||||
<button
|
||||
className={`block md:flex md:flex-row md:justify-between md:items-center daisy-btn daisy-btn-primary daisy-btn-outline w-full mt-8`}
|
||||
className={`tw-block md:tw-flex md:tw-flex-row md:tw-justify-between md:tw-items-center tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-outline tw-w-full tw-mt-8`}
|
||||
onClick={() => setMagicLink(!magicLink)}
|
||||
>
|
||||
<span className="hidden lg:block">{magicLink ? <LockIcon /> : <EmailIcon />}</span>
|
||||
<span className="tw-hidden lg:tw-block">{magicLink ? <LockIcon /> : <EmailIcon />}</span>
|
||||
{magicLink ? 'Use your password' : 'Email me a sign-in link'}
|
||||
<span className="hidden lg:block">{magicLink ? <KeyIcon /> : <EmailIcon />}</span>
|
||||
<span className="tw-hidden lg:tw-block">{magicLink ? <KeyIcon /> : <EmailIcon />}</span>
|
||||
</button>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-2">
|
||||
<div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-items-center tw-mt-2">
|
||||
{['Google', 'Github'].map((provider) => (
|
||||
<button
|
||||
key={provider}
|
||||
id={provider}
|
||||
className={`${horFlexClasses} daisy-btn daisy-btn-secondary`}
|
||||
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-secondary`}
|
||||
onClick={() => initOauth(provider)}
|
||||
>
|
||||
{provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
|
||||
|
|
@ -279,7 +286,7 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
</div>
|
||||
{seenBefore ? (
|
||||
<button
|
||||
className={`${horFlexClassesNoSm} daisy-btn daisy-btn-neutral daisy-btn-outline mt-2 w-full`}
|
||||
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-neutral tw-daisy-btn-outline tw-mt-2 tw-w-full`}
|
||||
onClick={() => setSeenUser(false)}
|
||||
>
|
||||
<UserIcon />
|
||||
|
|
@ -287,13 +294,15 @@ export const SignIn = ({ onSuccess = false }) => {
|
|||
</button>
|
||||
) : (
|
||||
<Link
|
||||
className={`${horFlexClasses} daisy-btn daisy-btn-lg daisy-btn-neutral mt-2`}
|
||||
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-lg tw-daisy-btn-neutral tw-mt-2 hover:tw-text-neutral-content hover:tw-no-underline`}
|
||||
href="/signup"
|
||||
>
|
||||
<FreeSewingIcon className="h-10 w-10" />
|
||||
<FreeSewingIcon className="tw-h-10 tw-w-10" />
|
||||
Sign up here
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</WrapForm>
|
||||
)
|
||||
}
|
||||
|
||||
const WrapForm = ({ children }) => <div className="tw-text-center tw-py-12">{children}</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue