From 721ad59545c306344997d7e94b6bba31b5ebae51 Mon Sep 17 00:00:00 2001
From: Clement Michaud <c.michaud@criteo.com>
Date: Thu, 15 Nov 2018 18:12:00 +0100
Subject: [PATCH] Add email confirmation page.

---
 client-react/src/App.tsx                      |   2 ++
 client-react/src/mail.png                     | Bin 0 -> 3545 bytes
 .../confirmation-sent.module.css              |  15 ++++++++++++
 .../confirmation-sent/confirmation-sent.tsx   |  23 ++++++++++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 client-react/src/mail.png
 create mode 100644 client-react/src/pages/confirmation-sent/confirmation-sent.module.css
 create mode 100644 client-react/src/pages/confirmation-sent/confirmation-sent.tsx

diff --git a/client-react/src/App.tsx b/client-react/src/App.tsx
index 51f9dbbca..de4732c92 100644
--- a/client-react/src/App.tsx
+++ b/client-react/src/App.tsx
@@ -4,6 +4,7 @@ import './App.css';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import { FirstFactor } from './pages/first-factor/first-factor';
 import { SecondFactor } from './pages/second-factor/second-factor';
+import ConfirmationSent from './pages/confirmation-sent/confirmation-sent';
 
 class App extends Component {
   render() {
@@ -12,6 +13,7 @@ class App extends Component {
         <div className="App">
           <Route exact path="/" component={FirstFactor} />
           <Route exact path="/2fa" component={SecondFactor} />
+          <Route exact path="/confirmation" component={ConfirmationSent} />
         </div>
       </Router>
     );
diff --git a/client-react/src/mail.png b/client-react/src/mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..834bfce9107a94be10da4c011fb78e37a192888f
GIT binary patch
literal 3545
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
Jtx8RN)PI?rK$`#n

literal 0
HcmV?d00001

diff --git a/client-react/src/pages/confirmation-sent/confirmation-sent.module.css b/client-react/src/pages/confirmation-sent/confirmation-sent.module.css
new file mode 100644
index 000000000..41c3d5dbf
--- /dev/null
+++ b/client-react/src/pages/confirmation-sent/confirmation-sent.module.css
@@ -0,0 +1,15 @@
+
+.main {
+  padding: 2em;
+}
+
+.image {
+  width: 100%;
+}
+
+.image img {
+  width: 64px;
+  display: block;
+  margin: 2em auto;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/client-react/src/pages/confirmation-sent/confirmation-sent.tsx b/client-react/src/pages/confirmation-sent/confirmation-sent.tsx
new file mode 100644
index 000000000..a394aa07e
--- /dev/null
+++ b/client-react/src/pages/confirmation-sent/confirmation-sent.tsx
@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+
+import FormTemplate from '../../templates/form-template';
+
+import mail from '../../mail.png';
+
+import styles from './confirmation-sent.module.css';
+
+export default class ConfirmationSent extends Component {
+  render() {
+    return (
+      <FormTemplate title="Confirmation e-mail">
+        <div className={styles.main}>
+          <p>An e-mail has been sent to your address.</p>
+          <div className={styles.image}>
+            <img src={mail} alt="mail" />
+          </div>
+          <p>Please click on the link provided in the e-mail to confirm the operation.</p>
+        </div>
+      </FormTemplate>
+    )
+  }
+}
\ No newline at end of file