email working
This commit is contained in:
Sean Yesmunt
parent
28f3af7432
commit
880ee2997b
3 changed files with 142 additions and 14 deletions
53
pages/api/email.js
Normal file
53
pages/api/email.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { renderSync } from 'sass';
|
||||
|
||||
const AUTH_TOKEN = process.env.COMMANDER_AUTH_TOKEN;
|
||||
const API = 'https://api.lbry.com/';
|
||||
const USER_TAG = 'lbry-sec';
|
||||
|
||||
const USER_DOES_NOT_EXIST = 'USER_DOES_NOT_EXIST';
|
||||
|
||||
function buildUrl(email, createUser) {
|
||||
let url = `${API}/users/tag?auth_token=${AUTH_TOKEN}&emails=${encodeURIComponent(
|
||||
email
|
||||
)}&tag=${USER_TAG}`;
|
||||
|
||||
if (createUser) {
|
||||
url += `&create_user=true`;
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
export default (req, res) => {
|
||||
const { email } = req.body;
|
||||
|
||||
if (!email) {
|
||||
res.statusCode = 400;
|
||||
res.json({ error: true });
|
||||
return;
|
||||
}
|
||||
|
||||
return fetch(buildUrl(email))
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
if (res.data && res.data.failed_emails.length > 0) {
|
||||
throw Error(USER_DOES_NOT_EXIST);
|
||||
}
|
||||
|
||||
res.statusCode = 200;
|
||||
res.json({ success: true });
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.message === USER_DOES_NOT_EXIST) {
|
||||
return fetch(buildUrl(email, true))
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
res.statusCode = 200;
|
||||
res.json({ success: true });
|
||||
});
|
||||
}
|
||||
|
||||
res.statusCode = 400;
|
||||
res.json({ error });
|
||||
});
|
||||
};
|
||||
|
|
@ -1,6 +1,49 @@
|
|||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
|
||||
export default function Home() {
|
||||
const [email, setEmail] = React.useState('');
|
||||
const [emailLoading, setEmailLoading] = React.useState(false);
|
||||
const [emailError, setEmailError] = React.useState();
|
||||
const [emailSuccess, setEmailSuccess] = React.useState();
|
||||
|
||||
function handleEmailSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email) {
|
||||
return;
|
||||
}
|
||||
|
||||
setEmailError(false);
|
||||
setEmailSuccess(false);
|
||||
setEmailLoading(true);
|
||||
|
||||
fetch('/api/email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
return res.json();
|
||||
} else {
|
||||
throw Error(res.error);
|
||||
}
|
||||
})
|
||||
.then((data) => {
|
||||
setEmailLoading(false);
|
||||
setEmailSuccess(true);
|
||||
})
|
||||
.catch(() => {
|
||||
setEmailLoading(false);
|
||||
setEmailSuccess(false);
|
||||
setEmailError(true);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
|
|
@ -27,15 +70,19 @@ export default function Home() {
|
|||
|
||||
<div className="landing__text">
|
||||
<h1 className="landing__title">
|
||||
Save LBRY
|
||||
HELP LBRY
|
||||
<br />
|
||||
Save Crypto
|
||||
SAVE CRYPTO
|
||||
</h1>
|
||||
<div className="landing__subtitle">
|
||||
<div>Some catchy subtitle that says some different things.</div>
|
||||
<div className="landing__subtitle-catchy">
|
||||
<span>The SEC are dorks.</span>
|
||||
<div>
|
||||
The SEC don’t understand blockchain or crypto.
|
||||
<br />
|
||||
They’re saying LBC is a security, it’s not!
|
||||
</div>
|
||||
<button className="landing__action">
|
||||
<span>Educate the SEC</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -74,14 +121,29 @@ export default function Home() {
|
|||
</div>
|
||||
|
||||
<label htmlFor="email">Email</label>
|
||||
<div className="email__group">
|
||||
<form className="email__group" onSubmit={handleEmailSubmit}>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="ihatecensorship@protonmail.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<button>Submit</button>
|
||||
</div>
|
||||
<button disabled={!email || emailLoading}>
|
||||
{emailLoading ? 'Submitting' : 'Submit'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{emailSuccess && (
|
||||
<div className="email__success">
|
||||
Thank you! We will keep you in the loop.
|
||||
</div>
|
||||
)}
|
||||
{emailError && (
|
||||
<div className="email__success">
|
||||
Sorry, there was an error. Please try again.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2>Sign the petition</h2>
|
||||
|
|
@ -90,6 +152,8 @@ export default function Home() {
|
|||
</div>
|
||||
|
||||
<div className="petition">Petition iframe or link</div>
|
||||
|
||||
<h2>See what people are saying</h2>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ $border-radius: 10px;
|
|||
|
||||
html,
|
||||
body {
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
|
|
@ -119,24 +120,26 @@ header {
|
|||
font-weight: 300;
|
||||
|
||||
@media (min-width: $breakpoint-small) {
|
||||
font-size: 2rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.landing__subtitle-catchy {
|
||||
.landing__action {
|
||||
margin-top: 1.5rem;
|
||||
font-weight: bolder;
|
||||
transform: skew(-10deg);
|
||||
display: inline-block;
|
||||
|
||||
background-color: #5726ab;
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
margin-top: 2rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
transform: skew(10deg);
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,6 +206,7 @@ header {
|
|||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
|
@ -263,6 +267,13 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.email__success,
|
||||
.email__error {
|
||||
font-size: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.petition {
|
||||
height: 30rem;
|
||||
padding: 5rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue