Merge pull request #960 from pixelated/backup-email-page

[#922] Add html and css for the backup page

2 files changed, 23 insertions, 3 deletions

diff --git a/web-ui/app/js/account_recovery.js b/web-ui/app/js/account_recovery.js
index 02183574..441a8936 100644
--- a/web-ui/app/js/account_recovery.js
+++ b/web-ui/app/js/account_recovery.js
@@ -1,6 +1,11 @@
 import React from 'react'
 import { render } from 'react-dom'
 import Page from 'js/account_recovery/page'
+import a11y from 'react-a11y'
+
+import 'font-awesome/scss/font-awesome.scss'
+
+if(process.env.NODE_ENV === 'development') a11y(React);
 
 render(
   <Page/>,
diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js
index a6be0c6e..5d4f2c36 100644
--- a/web-ui/app/js/account_recovery/page.js
+++ b/web-ui/app/js/account_recovery/page.js
@@ -3,9 +3,24 @@ import React from 'react'
 import 'scss/account_recovery/page.scss'
 
 const Page = () => (
-  <div className="container">
-    <img src="assets/images/forgot-my-password.svg" />
-    <h1>E se você esquecer sua senha?</h1>
+  <div className='container'>
+    <img src='assets/images/forgot-my-password.svg' alt="Esqueci minha senha!"/>
+    <form>
+      <h1>E se você esquecer sua senha?</h1>
+      <p>Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.</p>
+      <p>Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.</p>
+      <div className="field-group">
+        <input type="text" name="email" className="email" required/>
+        <label className="animated-label" htmlFor="email">Digite seu e-mail de recuperação</label>
+      </div>
+      <button>Adicionar e-mail</button>
+      <div>
+        <a href="/">
+          <i className="fa fa-angle-left" aria-hidden="true"></i>
+          <span>Voltar</span>
+        </a>
+      </div>
+    </form>
   </div>
 );