🪒📡 -> Adding #1 profile section to magic.link for prev

src/app.js

@@ -18,7 +18,7 @@ import Layout from "./components/layout";
 // Magic/stripe
 import { magic } from "./lib/magic";
 import { loadStripe } from "@stripe/stripe-js";
-import { ELements } from "@stripe/react-stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
 
 const promise = loadStripe(process.env.REACT_APP_STRIPE_PK_KEY);
 

src/components/layout.js

@@ -0,0 +1,23 @@
+import Header from "./header";
+
+const Layout = ({ children }) => (
+    <>
+        <Header />
+        <main>
+            <div className="container">{children}</div>
+        </main>
+        <style>{`
+            * {
+                font-family: sans-serif !important;
+                outline: none;
+            }
+            .container {
+                max-width: 42rem;
+                margin: 0 auto;
+                padding: 0 10 px;
+            }
+        `}</style>
+    </>
+);
+
+export default Layout;

src/components/loading.js

@@ -0,0 +1,7 @@
+const Loading = () => (
+    <div style={{ textAlign: "center" }}>
+      <img src="./spinner.svg" height="50px" alt="Loading" />
+    </div>
+  );
+
+  export default Loading;

src/components/login-form.js

@@ -0,0 +1,53 @@
+// Note - update this with a highly modern, minimal form
+import { useState } from 'react';
+import { Input, Icon, MonochromeIcons, CallToAction } from '@chakra-ui/react';
+
+const LoginForm = ({ onEmailSubmit, disabled }) => {
+    const [email, setEmail] = useState("");
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        onEmailSubmit(email);
+    };
+
+    return (
+        <>
+            <form onSubmit={handleSubmit}>
+                <h3 className="form-header">Log in</h3>
+                <div className="input-wrapper">
+                    <Input
+                        placeholder="Enter your email"
+                        size="sm"
+                        type="email"
+                        onChange={(e) => setEmail(e.target.value)}
+                        prefix={<Icon inline type={MonochromeIcons.Envelope} size={22} />}
+                    />
+                </div>
+                <div>
+                    <CallToAction
+                        leadingIcon={MonochromeIcons.PaperPlane}
+                        color="primary"
+                        size="sm"
+                        disabled={disabled}
+                        onClick={handleSubmit}
+                    >
+                        Login
+                    </CallToAction>
+                </div>
+            </form>
+            <style>{`
+                form,
+                .form-header {
+                    font-size: 22px;
+                    margin: 25px 0;
+                }
+                .input-wrapper {
+                    width: 87%;
+                    margin: 0 auto 20px;
+                }
+            `}</style>
+        </>
+    )
+}
+
+export default LoginForm;

src/components/login.js

@@ -0,0 +1,67 @@
+import { useState, useEffect, useContext } from "react";
+import { useHistory } from "react-router-dom";
+import { magic } from "../lib/magic";
+import { UserContext } from "../lib/UserContext";
+import LoginForm from "./login-form";
+
+const Login = () => {
+    const history = useHistory();
+    const [disabled, setDisabled] = useState(false);
+    const [user, setUser] = useContext(UserContext);
+
+    // If user is already logged in: redirect to profile page
+    useEffect(() => {
+        user && user.issuer && history.push("/profile");
+    }, [user, history]);
+
+    async function handleLoginWithEmail(email) {
+        try {
+            setDisabled(true); // Prevent multiple emails from being triggered by disabling the login button
+
+            // Trigger Magic.Link email to user
+            let didToken = await magic.auth.loginWithMagicLink({
+                email,
+            });
+
+            // Validate didToken with server
+            const res = await fetch(`${process.env.REACT_APP_SERVER_URL}/login`, {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: "Bearer " + didToken,
+                },
+            });
+
+            if (res.status === 200) {
+                let userMetadata = await magic.user.getMetadata(); // save information for the logged in user
+                await setUser(userMetadata); // UserContext is set to the logged in user
+                history.push('/profile');
+            }
+        } catch (error) {
+            setDisabled(false); // Reenable login button (if the user requests to edit their email)
+            console.log(error);
+        }
+    }
+
+    return (
+        <>
+            <div className="login">
+                <LoginForm disabled={disabled} onEmailSubmit={handleLoginWithEmail} />
+            </div>
+            <style>{`
+                .login {
+                    max-width: 20rem;
+                    margin: 40px auto 0;
+                    padding: 1rem;
+                    border: 1px solid #dfe1e5;
+                    border-radius: 4px;
+                    text-align: center;
+                    box-shadow: 0px 0px 6px 6px #f7f7f7;
+                    box-sizing: border-box;
+                }
+            `}</style>
+        </>  
+    );
+};
+
+export default Login;