Merge pull request #1099 from erikaperugachi/contact

Contact

Author: Erika Perugachi

email_login/src/components/PanelWrapper.js

@@ -32,10 +32,10 @@ import { validateEmail, validateUsername } from './../validators/validators';
 import { DEVICE_TYPE, appDomain } from '../utils/const';
 import DeviceNotApproved from './DeviceNotApproved';
 import { hashPassword } from '../utils/HashUtils';
-import string from './../lang';
+import string, { getLang } from './../lang';
 import './panelwrapper.scss';
 
-const { errors, signIn, signUp } = string;
+const { errors, help, signIn, signUp } = string;
 
 const mode = {
   SIGNUP: 'SIGNUP',
@@ -112,15 +112,37 @@ class PanelWrapper extends Component {
   }
 
   render() {
+    const showFooter =
+      this.state.mode === mode.SIGNIN ||
+      this.state.mode === mode.SIGNINPASSWORD ||
+      this.state.mode === mode.CHANGEPASSWORD;
     return (
       <div className="panel-wrapper">
         {this.renderPopup()}
         {this.renderHeader()}
         <section>{this.renderSection()}</section>
+        {showFooter && this.renderFooter()}
       </div>
     );
   }
 
+  renderFooter = () => (
+    <footer>
+      <span>
+        {help.need_help}
+        &nbsp;
+        <a
+          className="footer-link"
+          href={`https://criptext.com/${getLang}/contact/`}
+          // eslint-disable-next-line react/jsx-no-target-blank
+          target="_blank"
+        >
+          {help.contact_support}
+        </a>
+      </span>
+    </footer>
+  );
+
   renderHeader = () => (
     <header className={this.defineHeaderClass()}>
       <div className="button-section">

email_login/src/components/panelwrapper.scss

@@ -62,4 +62,23 @@
     height: 454px;
     position: relative;
   }
+
+  footer {
+    bottom: 0;
+    margin-bottom: 20px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+
+    span {
+      color: #99d9ff;
+      font-size: 14px;
+      font-weight: 300;
+
+      .footer-link {
+        color: white;
+        text-decoration: none;
+      }
+    }
+  }
 }

email_login/src/components/signin.scss

@@ -68,12 +68,13 @@
       .error-message {
         font-size: 12px;
         color: #000;
-        left: 7px;
+        left: 0px;
+        position: absolute;
       }
 
       .buttons {
         bottom: 0;
-        margin: 10% 0% 0% 0%;
+        margin: 15% 0% 0% 0%;
         padding: 0px;
         width: 100%;
       }
@@ -91,8 +92,9 @@
       text-align: center;
 
       span {
-        font-weight: 300;
+        font-weight: 200;
         strong {
+          font-weight: 400;
           cursor: pointer;
         }
       }

email_login/src/lang/en.json

@@ -49,6 +49,10 @@
         "Incorrect username or password. Check credentials and try again."
     }
   },
+  "help": {
+    "need_help": "Need help?",
+    "contact_support": "Contact Support"
+  },
   "last_activity": "Last activity",
   "over_time": "Over 2 month ago",
   "popUp": {

email_login/src/lang/es.json

@@ -48,6 +48,10 @@
       "description": "Usuario o contraseña incorrectos. Verifica tus credenciales e intenta de nuevo"
     }
   },
+  "help": {
+    "need_help": "¿Necesitas ayuda?",
+    "contact_support": "Contáctanos"
+  },
   "last_activity": "Última actividad",
   "over_time": "Hace más de 2 meses",
   "popUp": {

email_login/src/lang/index.js

@@ -14,4 +14,6 @@ export const setLang = lang => {
   string.setLanguage(lang);
 };
 
+export const getLang = mySettings.language;
+
 export default string;