96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
|
import Page from 'site/components/wrappers/page.js'
|
||
|
|
import useApp from 'site/hooks/useApp.js'
|
||
|
|
import Popout from 'shared/components/popout.js'
|
||
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||
|
|
import { useTranslation } from 'next-i18next'
|
||
|
|
import Layout from 'site/components/layouts/bare'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { validateEmail, validateTld } from 'shared/utils.mjs'
|
||
|
|
import SusiWrapper from 'site/components/wrappers/susi.js'
|
||
|
|
import { signUp } from 'shared/backend.mjs'
|
||
|
|
|
||
|
|
const DarkLink = ({ href, txt }) => (
|
||
|
|
<Link className="decoration-1 underline text-medium font-medium hover:decoration-2" href={href}>
|
||
|
|
{txt}
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
|
||
|
|
const SignUpPage = () => {
|
||
|
|
const app = useApp()
|
||
|
|
const { t } = useTranslation(['susi'])
|
||
|
|
|
||
|
|
const [email, setEmail] = useState('')
|
||
|
|
const [emailValid, setEmailValid] = useState(false)
|
||
|
|
|
||
|
|
const updateEmail = (evt) => {
|
||
|
|
const value = evt.target.value
|
||
|
|
setEmail(value)
|
||
|
|
const valid = (validateEmail(value) && validateTld(value)) || false
|
||
|
|
setEmailValid(valid === true ? true : false)
|
||
|
|
}
|
||
|
|
|
||
|
|
const signupHandler = async (evt) => {
|
||
|
|
evt.preventDefault()
|
||
|
|
if (emailValid)
|
||
|
|
await signUp({
|
||
|
|
email,
|
||
|
|
language: app.locale,
|
||
|
|
...app.loadHelpers,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Page app={app} title={t('joinFreeSewing')} layout={Layout} footer={false}>
|
||
|
|
<SusiWrapper theme={app.theme}>
|
||
|
|
<h1 className="text-neutral-content font-light text-3xl mb-0 pb-0">
|
||
|
|
{t('joinFreeSewing')}!
|
||
|
|
</h1>
|
||
|
|
<p className="text-neutral-content">{t('toReceiveSignupLink')}:</p>
|
||
|
|
<form onSubmit={signupHandler}>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
name="email"
|
||
|
|
onChange={updateEmail}
|
||
|
|
placeholder={t('emailAddress')}
|
||
|
|
className="input input-bordered w-full text-base-content"
|
||
|
|
autoFocus={true}
|
||
|
|
value={email}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
style={{
|
||
|
|
backgroundColor: emailValid ? '' : 'hsl(var(--wa) / var(--tw-border-opacity))',
|
||
|
|
opacity: emailValid ? 1 : 0.8,
|
||
|
|
}}
|
||
|
|
className={`btn mt-4 capitalize w-full
|
||
|
|
${emailValid ? 'btn-primary' : 'btn-warning'}`}
|
||
|
|
tabIndex="-1"
|
||
|
|
role="button"
|
||
|
|
aria-disabled={!emailValid}
|
||
|
|
>
|
||
|
|
{emailValid ? (
|
||
|
|
<span>{t('emailSignupLink')}</span>
|
||
|
|
) : (
|
||
|
|
<span className="textwarning-content">{t('pleaseProvideValidEmail')}</span>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
<p className="text-neutral-content text-sm mt-4 opacity-80 text-center">
|
||
|
|
{t('alreadyHaveAnAccount')} <DarkLink href="/signin" txt={t('signInHere')} />
|
||
|
|
</p>
|
||
|
|
</SusiWrapper>
|
||
|
|
</Page>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SignUpPage
|
||
|
|
|
||
|
|
export async function getStaticProps({ locale }) {
|
||
|
|
return {
|
||
|
|
props: {
|
||
|
|
...(await serverSideTranslations(locale)),
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|