1 files changed, 109 insertions, 0 deletions
diff --git a/pages/verify.js b/pages/verify.js
new file mode 100644
index 0000000..1d89e22
--- /dev/null
+++ b/pages/verify.js
@@ -0,0 +1,109 @@
+import {useState, useEffect} from 'react'
+import {useRouter} from 'next/router'
+import useUser from 'lib/useUser'
+import fetchJson from 'lib/fetchJson'
+import {Layout} from 'components'
+
+const Verify = () => {
+  const router = useRouter()
+  const {user, mutateUser} = useUser({
+    redirectToLogin: true,
+    redirectToApps: true,
+  })
+  const [errorMsg, setErrorMsg] = useState('')
+  const [sending, setSending] = useState(false)
+  const [resent, setResent] = useState(false)
+
+  const handleSendMail = async e => {
+    e.preventDefault()
+    setErrorMsg('')
+    setSending(true)
+    try {
+      await fetch('/api/verify')
+      setResent(true)
+    } catch (error) {
+      setErrorMsg('Could not send verification email')
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleKey = async e => {
+    e.preventDefault()
+    const key = e.currentTarget.key.value
+    try {
+      mutateUser(
+        await fetchJson('/api/verify', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({_id: user._id, key}),
+        })
+      )
+    } catch (err) {
+      setErrorMsg('Could not verify user')
+    }
+  }
+
+  return (
+    <Layout>
+      {!user
+        ? (
+          <div className="window window--popup">
+            <p>Loading...</p>
+          </div>
+        ) : (
+          <div className="window window--popup">
+            <p>One last step missing</p>
+            <p>{`To start using Notes App type the verification code we sent to your email (${user.email}):`}</p>
+            <form onSubmit={handleKey}>
+              <input type="text" placeholder="Verification key" name="key" />
+              <button className="window__button" type="submit">Send</button>
+            </form>
+            {
+              sending
+                ? (
+                  <p>Sending...</p>
+                ) : (
+                  resent
+                    ? (
+                      <p>Mail was successfully sent again, check your mailbox!</p>
+                    ) : (
+                      <p>If you didn't get verification email&nbsp;
+                        <span className="verify__sendEmail" onClick={handleSendMail}>send it again</span>.
+                      </p>
+                    )
+                )
+            }
+            {errorMsg && <p className="verify__errorMsg">{errorMsg}</p>}
+          </div>
+        )
+      }
+      <style jsx>{`
+        form {
+          padding .5em 0;
+        }
+
+        input {
+          padding: .75em;
+          border: 1px dashed #333;
+          border-radius: .5em;
+        }
+
+        p {
+          line-height: 1.33;
+          padding: .5em 0;
+        }
+
+        .verify__sendEmail {
+          color: blue;
+          cursor: pointer;
+        }
+        .verify__errorMsg {
+          color: brown;
+        }
+      `}</style>
+    </Layout>
+  )
+}
+
+export default Verify