diff --git a/components/SignupForm.module.scss b/components/SignupForm.module.scss deleted file mode 100644 index 4e769c722e7799e50413e1dc1d80411777db67f9..0000000000000000000000000000000000000000 --- a/components/SignupForm.module.scss +++ /dev/null @@ -1,56 +0,0 @@ -.text { - text-align: center; - color: white; - - h1 { - margin: 0; - margin-bottom: 8px; - } - - p { - margin: 0; - margin-bottom: 20px; - color: rgba(255,255,255,0.8); - } -} - -.form { - text-align: center; - - h1 { - padding: 0; - margin: 0; - } - - h4 { - padding: 5px 0; - margin: 0; - &:first-child { - margin-top: 16px; - } - } - - a { - color: white; - } - - .signup { - display: flex; - margin-top: 2em; - max-width: 550px; - background: #404040; - border-radius: 10px; - margin: auto; - padding: 10px; - box-shadow: 0 4px 0px 0px rgba(0, 0, 0, 0.21); - input { - flex-grow: 1; - padding: 10px; - color: white; - } - - input::placeholder { - color: rgba(255,255,255,0.69); - } - } -} \ No newline at end of file diff --git a/components/SignupForm.tsx b/components/SignupForm.tsx deleted file mode 100644 index baae491f1dc4a2f1a82a8c4d6a726647c8a68e5c..0000000000000000000000000000000000000000 --- a/components/SignupForm.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import styles from './SignupForm.module.scss'; - -import { useState, FormEvent, useEffect } from 'react'; -import axios from 'axios'; -import Cookies from 'js-cookie'; -import { useRouter } from 'next/dist/client/router'; - -enum Status { - NotSent = 1, - Sending, - Sent, - SentVerified, - ServerError, - InvalidEmail, -} - -export default function SignupForm() { - const router = useRouter(); - let [ status, setStatus ] = useState(Status.NotSent); - let [ email, setEmail ] = useState(''); - let [ referral, setReferral ] = useState(''); - - useEffect(() => { - if (Cookies.get("referral") !== undefined) { - setStatus(Status.SentVerified); - setReferral(Cookies.get("referral")); - } - }, []); - - function submit(e: FormEvent<HTMLFormElement>) { - e.preventDefault(); - if (email === '') { - setStatus(Status.InvalidEmail); - return; - } - - setStatus(Status.Sending); - - axios.post('/api/send', { email, referrer: router.query.ref }).then((response) => { - if (response.status === 200) { - if (response.data.verified) setStatus(Status.SentVerified); - else setStatus(Status.Sent); - setReferral(response.data.referral); - Cookies.set("referral", response.data.referral, { expires: 365 }); - } else if (response.status === 400) setStatus(Status.InvalidEmail); - else setStatus(Status.ServerError); - }).catch(() => setStatus(Status.ServerError)); - } - - if (status === Status.Sending || status === Status.Sent || status === Status.SentVerified) { - if (status === Status.Sending) return <div className={styles.form}><h4>Loading... This might take a second.</h4></div>; - else return ( - <div className={styles.form}> - <h1>Thanks! We'll keep you up to date.</h1> - { status === Status.SentVerified ? ( - <h4>Your referral link is <a href={`https://revolt.chat/?ref=${referral}`}>https://revolt.chat/?ref={referral}</a></h4> - ) : ( - <h4>Please check your inbox to verify your email</h4> - )} - </div> - ); - } else return ( - <div className={styles.form}> - <div className={styles.text}> - <h1>Sign up for the waiting list!</h1> - <p>Be the first amongst others to get access to Revolt.</p> - </div> - <form className={styles.signup} onSubmit={submit}> - <input - type="email" - placeholder="Enter your email" - value={email} - onChange={e => setEmail(e.currentTarget.value)} - /> - <button>Join Waiting List</button> - </form> - { status === Status.ServerError && <h4>An error has occured, please try again later.</h4> } - { status === Status.InvalidEmail && <h4>Please provide a valid email.</h4> } - </div> - ); -} diff --git a/pages/index.module.scss b/pages/index.module.scss index e85d6466748f46761ab2f7a6b64f94b85da750e6..e1a5cd1b71552f4cc360027d23210f894d39db62 100644 --- a/pages/index.module.scss +++ b/pages/index.module.scss @@ -69,3 +69,11 @@ section[data-reverse="true"] .container { color: white; } } + +.signup { + text-align: center; + font-weight: bold; + a, a:link, a:visited { + color: white; + } +} diff --git a/pages/index.tsx b/pages/index.tsx index d5964b6270539bc90a6c5394856fc954c6ca9f70..f5107ca2dc5a08599d45ff428bd86af87dd3f022 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,8 +1,6 @@ import Head from 'next/head'; import styles from './index.module.scss'; -import SignupForm from '../components/SignupForm'; - export default function Home() { return ( <div> @@ -43,7 +41,9 @@ export default function Home() { </div> </div> </div> - <SignupForm /> + <h1 className={styles.signup}> + Sign up for the Revolt beta <a href="https://docs.google.com/forms/d/e/1FAIpQLSfFqBG5_0F6-2h_-aljV_i3v-QRLhYYm1_1-zSC77ZMx0LX_w/viewform">here</a> + </h1> </header> <section> <div>