VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(org): Homepage and susi tweaks

Browse source
This commit is contained in:
Joost De Cock 2023-08-29 12:19:47 +02:00
parent c37469dbf7
commit 00695fffe1
4 changed files with 92 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

56
sites/org/pages/index.mjs
View file

@ -19,7 +19,6 @@ import {
HelpIcon, HelpIcon,
ChatIcon, ChatIcon,
} from 'shared/components/icons.mjs' } from 'shared/components/icons.mjs'
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs' import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'
import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs' import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs' import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs'
@ -49,7 +48,7 @@ const CardLink = ({
<Link <Link
href={href} href={href}
className={`px-8 ${bg} py-10 rounded-lg block ${textColor} className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
hover:bg-secondary hover:text-secondary-content shadow-lg hover:bg-secondary hover:bg-opacity-10 shadow-lg
transition-color duration-300 grow`} transition-color duration-300 grow`}
> >
<h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium"> <h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">
@ -71,9 +70,6 @@ const HomePage = ({ page }) => {
const { account } = useAccount() const { account } = useAccount()
const [user, setUser] = useState(false) const [user, setUser] = useState(false)
// Duration of the FreeSewing animation
const duration = 6.66
useEffect(() => { useEffect(() => {
// Do this here to avoid hydration issues // Do this here to avoid hydration issues
if (account.username) setUser(account.username) if (account.username) setUser(account.username)
@ -85,31 +81,10 @@ const HomePage = ({ page }) => {
<Head> <Head>
<title>FreeSewing.org</title> <title>FreeSewing.org</title>
</Head> </Head>
<div className={`m-0 p-0 w-64 m-auto mt-8 mb-20 md:mt-20 ${user ? 'hidden' : ''}`}>
<FreeSewingAnimation duration={duration} />
</div>
<div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24"> <div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
<div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0"> <div className="text-center mt-20 md:mt-20">
<div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto"> <HowDoesItWorkAnimation t={t} />
<div className="md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
<SignUp />
</div>
<div className="md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto m-auto">
<h2 className="text-inherit mb-4 hidden md:block">{t('homepage:whyBother')}</h2>
<ul>
{[1, 2, 3, 4].map((i) => (
<li className="flex flex-row gap-2 my-2" key={i}>
<OkIcon stroke={4} /> {t(`homepage:why${i}`)}
</li>
))}
</ul>
<Popout warning>
<h5 className="text-inherit mb-4 hidden md:block">{t('homepage:alphaTitle')}</h5>
<p className="text-inherit mb-4 hidden md:block">{t('homepage:alphaWarning')}</p>
</Popout>
</div>
</div>
</div> </div>
<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4"> <div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4">
@ -129,14 +104,23 @@ const HomePage = ({ page }) => {
</Card> </Card>
</div> </div>
<div className="text-center mt-20 md:mt-20"> <div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
<h2 className="text-5xl">{t('howDoesItWork')}</h2> <div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
<HowDoesItWorkAnimation t={t} /> <div className="-mx-4 md:mx-0 md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
<SignUp />
</div>
<div className="-mx-4 md:mx-0 md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto m-auto">
<h2 className="text-inherit mb-4 hidden md:block">{t('homepage:whyBother')}</h2>
<ul>
{[1, 2, 3, 4].map((i) => (
<li className="flex flex-row gap-2 my-2" key={i}>
<OkIcon stroke={4} /> {t(`homepage:why${i}`)}
</li>
))}
</ul>
</div>
</div> </div>
</div> </div>
<div className="lg:px-4 max-w-7xl mx-auto">
<PleaseSubscribe />
</div> </div>
<div className="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4"> <div className="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4">
@ -166,6 +150,10 @@ const HomePage = ({ page }) => {
/> />
</div> </div>
<div className="lg:px-4 max-w-7xl mx-auto">
<PleaseSubscribe />
</div>
<div className="max-w-7xl m-auto mb-24 px-4"> <div className="max-w-7xl m-auto mb-24 px-4">
<div className="w-full lg:w-1/2 m-auto"> <div className="w-full lg:w-1/2 m-auto">
<CardLink <CardLink

2
sites/org/pages/signin/index.mjs
View file

@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs' import { BareLayout } from 'site/components/layouts/bare.mjs'
import { SignIn, ns as susiNs } from 'shared/components/susi/sign-in.mjs' import { SignIn, ns as susiNs } from 'shared/components/susi/sign-in.mjs'
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
const ns = nsMerge(susiNs, pageNs) const ns = nsMerge(susiNs, pageNs)
@ -22,7 +21,6 @@ const SignInPage = ({ page }) => {
<div className="max-w-lg w-full"> <div className="max-w-lg w-full">
<SignIn /> <SignIn />
</div> </div>
<FreeSewingAnimation className="w-64 mt-8" />
</div> </div>
</PageWrapper> </PageWrapper>
) )

2
sites/org/pages/signup/index.mjs
View file

@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs' import { BareLayout } from 'site/components/layouts/bare.mjs'
import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs' import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
// Translation namespaces used on this page // Translation namespaces used on this page
const ns = nsMerge(susiNs, pageNs) const ns = nsMerge(susiNs, pageNs)
@ -17,7 +16,6 @@ const SignUpPage = ({ page }) => {
<div className="max-w-2xl"> <div className="max-w-2xl">
<SignUp /> <SignUp />
</div> </div>
<FreeSewingAnimation className="w-64 mt-8" />
</div> </div>
</PageWrapper> </PageWrapper>
) )

55
sites/shared/components/susi/sign-up.mjs
View file

@ -2,6 +2,7 @@
import { useState, useContext } from 'react' import { useState, useContext } from 'react'
import { useBackend } from 'shared/hooks/use-backend.mjs' import { useBackend } from 'shared/hooks/use-backend.mjs'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
// Context // Context
import { ModalContext } from 'shared/context/modal-context.mjs' import { ModalContext } from 'shared/context/modal-context.mjs'
// Dependencies // Dependencies
@ -17,6 +18,7 @@ import {
KeyIcon, KeyIcon,
SettingsIcon, SettingsIcon,
EmailIcon, EmailIcon,
DownIcon,
} from 'shared/components/icons.mjs' } from 'shared/components/icons.mjs'
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs' import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import { EmailInput } from 'shared/components/inputs.mjs' import { EmailInput } from 'shared/components/inputs.mjs'
@ -30,11 +32,12 @@ export const SignUp = () => {
const backend = useBackend() const backend = useBackend()
const { t, i18n } = useTranslation(ns) const { t, i18n } = useTranslation(ns)
const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
const [emailValid, setEmailValid] = useState(false) const [emailValid, setEmailValid] = useState(false)
const [result, setResult] = useState(false) const [result, setResult] = useState(false)
const [loading, setLoading] = useState(false) const [showAll, setShowAll] = useState(false)
const updateEmail = (value) => { const updateEmail = (value) => {
setEmail(value) setEmail(value)
@ -44,8 +47,10 @@ export const SignUp = () => {
const signupHandler = async (evt) => { const signupHandler = async (evt) => {
evt.preventDefault() evt.preventDefault()
setLoading(true) if (!emailValid) {
if (!emailValid) return setLoadingStatus([true, t('susi:pleaseProvideValidEmail'), true, false])
return
}
let res let res
try { try {
res = await backend.signUp({ res = await backend.signUp({
@ -80,14 +85,12 @@ export const SignUp = () => {
</ModalWrapper> </ModalWrapper>
) )
} }
setLoading(false)
} }
const loadingClasses = loading ? 'opacity-50' : ''
return ( return (
<div className="w-full"> <div className="w-full">
<h2 className={`text-inherit ${loadingClasses}`}> <LoadingStatus />
<h2 className="text-inherit">
{result ? ( {result ? (
result === 'success' ? ( result === 'success' ? (
<span>{t('susi:emailSent')}!</span> <span>{t('susi:emailSent')}!</span>
@ -132,28 +135,27 @@ export const SignUp = () => {
) )
) : ( ) : (
<> <>
<p className={`text-inherit ${loadingClasses}`}>{t('toReceiveSignupLink')}:</p> <p className="text-inherit">{t('toReceiveSignupLink')}:</p>
<form onSubmit={signupHandler}> <form onSubmit={signupHandler}>
<EmailInput <EmailInput
id="signup-email" id="signup-email"
label={t('susi:emailAddress')} label={t('susi:emailAddress')}
current={email}
original={''}
valid={(val) => emailValid}
placeholder={t('susi:emailAddress')} placeholder={t('susi:emailAddress')}
update={updateEmail} update={updateEmail}
/> />
<button <button
className={`btn btn-primary btn-lg mt-2 w-full ${horFlexClasses} disabled:bg-neutral disabled:text-neutral-content disabled:opacity-50`} className={`btn btn-primary btn-lg mt-2 w-full ${horFlexClasses} disabled:bg-neutral disabled:text-neutral-content disabled:opacity-50`}
type="submit" type="submit"
disabled={!emailValid}
> >
<span className="hidden md:block">
<EmailIcon /> <EmailIcon />
</span> {t('susi:emailSignupLink')}
{emailValid ? t('susi:emailSignupLink') : t('susi:pleaseProvideValidEmail')}
<span className="hidden md:block">
<EmailIcon />
</span>
</button> </button>
</form> </form>
{showAll ? (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4">
{['Google', 'Github'].map((provider) => ( {['Google', 'Github'].map((provider) => (
<button <button
@ -184,6 +186,29 @@ export const SignUp = () => {
</span> </span>
{t('susi:migrateV2Account')} {t('susi:migrateV2Account')}
</Link> </Link>
<div className="flex flex-row justify-center mt-2">
<button
onClick={() => setShowAll(false)}
className={`btn btn-ghost ${horFlexClasses}`}
>
<DownIcon className="w-6 h-6 rotate-180" />
{t('susi:fewerOptions')}
<DownIcon className="w-6 h-6 rotate-180" />
</button>
</div>
</>
) : (
<div className="flex flex-row justify-center mt-2">
<button
onClick={() => setShowAll(true)}
className={`btn btn-ghost ${horFlexClasses}`}
>
<DownIcon />
{t('susi:moreOptions')}
<DownIcon />
</button>
</div>
)}
</> </>
)} )}
</div> </div>