Add e-mail verification support. (#1)

Reviewed-on: #1
Co-authored-by: Thomas E Lackey <telackey@bozemanpass.com>
Co-committed-by: Thomas E Lackey <telackey@bozemanpass.com>

package.json

@@ -9,12 +9,18 @@
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1"
   },
+  "devDependencies": {
+    "eslint": "^8.22.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "clean": "rm -rf build",
     "build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src/ --ext .js",
+    "lint:fix": "eslint src/ --ext .js --fix"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.js

@@ -1,11 +1,8 @@
 import React from 'react'
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { HashRouter as Router, Routes, Route } from 'react-router-dom'
 
-import LandingPage from './components/pages/LandingPage'
-import LoginPage from './components/pages/LoginPage'
 import RegisterPage from './components/pages/RegisterPage'
-import ForgetPasswordPage from './components/pages/ForgetPasswordPage'
+import VerifyPage from './components/pages/VerifyPage'
-import HomePage from './components/pages/HomePage'
 
 import './App.css'
 
@@ -16,7 +13,8 @@ export default function App() {
             <div>
                 <Routes>
                     <Route exact path={basePath} element={ <RegisterPage/> } />
-                    <Route path={basePath + "/create"} element={ <RegisterPage/> } />
+                    <Route exact path={basePath + "/create"} element={ <RegisterPage/> } />
+                    <Route exact path={basePath + "/verify"} element={ <VerifyPage/> } />
                 </Routes>
                 <Footer />
             </div>

src/components/pages/RegisterPage.js

@@ -5,12 +5,13 @@ import '../../App.css'
 import {Link} from "react-router-dom";
 
 export default function SignUpPage() {
-    const [username, setUsername] = useState("");
     const [email, setEmail] = useState("");
+    const [apiKey, setApiKey] = useState("");
     const [message, setMessage] = useState("");
     const [error, setError] = useState("");
 
     let handleSubmit = async (e) => {
+        setApiKey("");
         setMessage("");
         setError("");
 
@@ -23,13 +24,18 @@ export default function SignUpPage() {
                     "Content-Type": "application/json",
                 },
                 body: JSON.stringify({
-                    username: username,
+                    username: email,
                     email: email,
                 }),
             });
             let resJson = await res.json();
             if (res.status === 200) {
-                setMessage(`${resJson['api-key']}`);
+                if (resJson['api-key']) {
+                    setApiKey(`${resJson['api-key']}`);
+                    setMessage(`${resJson['api-key']}`);
+                } else {
+                    setMessage("Success");
+                }
             } else {
                 setError(`An error occurred: ${res.status}`);
             }
@@ -40,37 +46,33 @@ export default function SignUpPage() {
 
     return (
         <div className="text-center m-5-auto">
-            {message ?
+            {apiKey ?
                 <div className="success">
                     <h2>Account Created</h2>
                     <div className="message">
                         <h5>API Key</h5>
-                        {message}
+                        {apiKey}
                         <div className="note">Save this key. It will not be displayed again.</div>
                     </div>
                 </div>
                 :
+                message ?
+                    <div className="success">
+                        <h2>Account Created</h2>
+                        <div className="message">
+                            <h5>Verification Required</h5>
+                            Please check your e-mail for a link to verify your account.
+                        </div>
+                    </div>
+                    :
                 <div>
-                    {/*<h2>Join us</h2>*/}
-                    {/*<h5>Create your personal account</h5>*/
-                    }
                     <form onSubmit={handleSubmit} action="">
-                        {/*<p>*/}
-                        {/*    <label>Username</label><br/>*/}
-                        {/*    <input type="text" name="username"*/}
-                        {/*           onChange={(e) => setUsername(e.target.value)}*/}
-                        {/*           required />*/}
-                        {/*</p>*/}
                         <p>
                             <label>E-mail Address</label><br/>
                             <input type="email" name="email"
                                    onChange={(e) => setEmail(e.target.value)}
                                    required/>
                         </p>
-                        {/*<p>*/}
-                        {/*    <label>Password</label><br/>*/}
-                        {/*    <input type="password" name="password" requiredc />*/}
-                        {/*</p>*/}
                         <p>
                             <input type="checkbox" name="checkbox" id="checkbox" required/>
                             <span>I agree all statements in <a

src/components/pages/VerifyPage.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import {useState} from "react";
+
+import '../../App.css'
+import {Link, useSearchParams} from "react-router-dom";
+
+export default function VerifyPage(props) {
+    const [query] = useSearchParams();
+    const [message, setMessage] = useState("");
+    const [error, setError] = useState("");
+    const token = query.get("token")
+
+    let handleSubmit = async () => {
+        const apiUrl = "LACONIC_HOSTED_CONFIG_api_url";
+        let res = await fetch(`${apiUrl}/verify`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                token
+            }),
+        });
+
+        const resJson = await res.json();
+        if (res.status === 200) {
+            return `${resJson['api-key']}`;
+        }
+        throw new Error(`An error occurred: ${res.status}`);
+    };
+
+    if (!message && !error) {
+        handleSubmit().then((message) => {
+            setMessage(message)
+        }).catch((reason) => {
+            setError("An error occurred.")
+        })
+    }
+
+    return (
+        <div className="text-center m-5-auto">
+            {message ?
+                <div className="success">
+                    <h2>Account Verified</h2>
+                    <div className="message">
+                        <h5>API Key</h5>
+                        {message}
+                        <div className="note">Save this key. It will not be displayed again.</div>
+                    </div>
+                </div>
+                :
+                <div>
+                   Verifying account...
+                    <div className="error">{error ? <p>{error}</p> : null}</div>
+                </div>
+            }
+            <footer>
+                <p><Link to="https://cerc.io">Docs</Link></p>
+            </footer>
+        </div>
+    )
+
+}