Implement account activation

3 files changed, 41 insertions, 1 deletions

diff --git a/frontend/src/Activate.js b/frontend/src/Activate.js
new file mode 100644
index 0000000..8a420f4
--- /dev/null
+++ b/frontend/src/Activate.js
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import axios from './axios';
+import { Link } from '@reach/router';
+
+const Activate = ({ activationToken }) => {
+  const [ data, setData ] = useState({});
+  useEffect(() => {
+    (async () => {
+      try {
+        await axios.post('/activate', { activationToken });
+        setData({
+          message: 'Account succesfully activated. You can now log in.',
+        });
+      } catch (err) {
+        setData({
+          error: err.response.data.error,
+        });
+      }
+    })();
+  }, []);
+
+  return (
+    <div>
+      <h2 className="subtitle">Activating account</h2>
+      <div>
+        <div className="error" key="error">
+          {data.error}
+        </div>
+        <div>{data.message}</div>
+        {data.message && <Link to="/login">To login page</Link>}
+      </div>
+    </div>
+  );
+};
+
+export default Activate;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 89f3e1c..38d8aef 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -7,6 +7,7 @@ import Home from './Home';
 import userState from './UserState';
 import './App.css';
 import axios from './axios';
+import Activate from './Activate';
 
 const App = () => {
   useEffect(() => {
@@ -28,6 +29,7 @@ const App = () => {
       <Router>
         <Login path="/login" />
         <Register path="/register" />
+        <Activate path="/activate/:activationToken" />
         <Home path="/" exact />
       </Router>
     </div>
diff --git a/frontend/src/Register.js b/frontend/src/Register.js
index 6b04816..97a5992 100644
--- a/frontend/src/Register.js
+++ b/frontend/src/Register.js
@@ -38,6 +38,9 @@ const Register = () => {
         Username <input className="input" name="username" type="text" ref={register} required />
       </label>
       <label className="label">
+        Email <input className="input" name="email" type="email" ref={register} required />
+      </label>
+      <label className="label">
         Password <input className="input" name="password" type="password" ref={register} required />
       </label>
       <label className="label">
@@ -47,7 +50,6 @@ const Register = () => {
         Register
       </button>
       <ul className="error">{data.errors ? data.errors.map(e => <li>{e}</li>) : null}</ul>
-      {/* <div className="error">{errors}</div> */}
     </form>
   );
 };