Forgot password

electron_app/src/clientManager.js

@@ -153,6 +153,11 @@ class ClientManager {
     return checkDeviceRemoved(res);
   }
 
+  async resetPassword(recipientId) {
+    const res = await client.resetPassword(recipientId);
+    return checkDeviceRemoved(res);
+  }
+
   async unlockDevice(params) {
     const res = await client.unlockDevice(params);
     return checkDeviceRemoved(res);

email_dialog/src/components/Dialog.js

@@ -3,27 +3,27 @@ import { remoteData, onResponseModal } from './../utils/electronInterface';
 import * as messages from './../utils/contents';
 import './dialog.css';
 
-const { title, contentType, options, sendTo } = remoteData;
+const { title, contentType, options, sendTo, customTextToReplace } = remoteData;
 
 const Dialog = () => (
   <div className="dialog-body">
     <div className="header" />
     <div className="content">
       <h2 className="title">{title}</h2>
-      {renderContent(contentType)}
+      {renderContent(customTextToReplace, contentType)}
       {renderOptions(options, sendTo)}
     </div>
   </div>
 );
 
-const renderContent = contentType => {
+const renderContent = (customText, contentType) => {
   switch (contentType) {
     case 'EMPTY_RECOVERY_EMAIL':
       return messages.EmptyRecoveryEmail();
-    case 'FORGOT_PASSWORD_SENT_LINK':
-      return messages.ForgotPasswordSentLink();
+    case 'FORGOT_PASSWORD_SEND_LINK':
+      return messages.ForgotPasswordSentLink(customText);
     case 'FORGOT_PASSWORD_EMPTY_EMAIL':
-      return messages.ForgotPasswordEmptyEmail();
+      return messages.ForgotPasswordEmptyEmail(customText);
     case 'PERMANENT_DELETE_THREAD':
       return messages.PermanentDeleteThread();
     default:
@@ -34,18 +34,22 @@ const renderContent = contentType => {
 const renderOptions = (options, sendTo) => {
   return (
     <div className="options">
-      <button
-        className={options.acceptLabel !== '' ? 'cancel' : 'hidden'}
-        onClick={e => onResponseModal(e, options.cancelLabel, sendTo)}
-      >
-        <span>{options.cancelLabel}</span>
-      </button>
-      <button
-        className={options.acceptLabel !== '' ? 'confirm' : 'hidden'}
-        onClick={e => onResponseModal(e, options.acceptLabel, sendTo)}
-      >
-        <span>{options.acceptLabel}</span>
-      </button>
+      {options.cancelLabel && (
+        <button
+          className="cancel"
+          onClick={e => onResponseModal(e, options.cancelLabel, sendTo)}
+        >
+          <span>{options.cancelLabel}</span>
+        </button>
+      )}
+      {options.acceptLabel && (
+        <button
+          className="confirm"
+          onClick={e => onResponseModal(e, options.acceptLabel, sendTo)}
+        >
+          <span>{options.acceptLabel}</span>
+        </button>
+      )}
     </div>
   );
 };

email_dialog/src/components/dialog.scss

@@ -30,7 +30,7 @@
     }
 
     .message-empty-recovery-email {
-      font-size: 13px;
+      font-size: 13.5px;
       position: relative;
       top: 10px;
     }
@@ -40,7 +40,7 @@
       top: 15px;
     }
     .message-forgot-sent-link {
-      font-size: 14px;
+      font-size: 15px;
       position: relative;
       top: 20px;
       p {
@@ -62,6 +62,9 @@
       position: absolute;
       bottom: 30px;
       .cancel {
+        position: absolute;
+        left: 5px;
+        bottom: 0px;
         border: none;
         outline: none;
         border-radius: 100px;
@@ -77,6 +80,9 @@
         }
       }
       .confirm {
+        position: absolute;
+        left: 190px;
+        bottom: 0px;
         border: none;
         outline: none;
         border-radius: 100px;

email_dialog/src/utils/contents.js

@@ -9,26 +9,33 @@ export const LostAllDevices = () => (
   </div>
 );
 
-export const EmptyRecoveryEmail = () => (
-  <div className="message-empty-recovery-email">
-    <p>
-      You did not set a <strong>Recovery Email</strong> so account recovery is
-      impossible if you forget your password.
-    </p>
-    <p>Proceed without recovery email?</p>
-  </div>
-);
+export const EmptyRecoveryEmail = () => {
+  return (
+    <div className="message-empty-recovery-email">
+      <p>
+        You did not set a <strong>Recovery Email</strong> so account recovery is
+        impossible if you forget your password.
+      </p>
+    </div>
+  );
+};
 
-export const ForgotPasswordSentLink = () => (
-  <div className="message-forgot-sent-link">
-    <p>A reset link will be sent to d******@o****l.com</p>
-    <p>The link will be valid for 1 hour</p>
-  </div>
-);
+export const ForgotPasswordSentLink = customText => {
+  const content =
+    customText ||
+    `A reset link was sent to your Recovery email\nThe link will be valid for 30 min`;
+  return (
+    <div className="message-forgot-sent-link">
+      <p>{content}</p>
+    </div>
+  );
+};
 
-export const ForgotPasswordEmptyEmail = () => (
+export const ForgotPasswordEmptyEmail = customText => (
   <div className="message-forgot-empty-email">
-    <p>You need to set a Recovery Email to reset your password.</p>
+    <p>
+      {customText || `You need to set a Recovery Email to reset your password`}
+    </p>
   </div>
 );
 

email_login/src/components/Login.js

@@ -27,21 +27,18 @@ const renderForm = props => (
   <div className="form">
     <form autoComplete="off">
       <div className="label">
-        <label>
-          <input
-            type="text"
-            name="username"
-            placeholder="Username"
-            value={props.value}
-            onChange={props.onChangeField}
-            onKeyUp={props.validator}
-            autoFocus={true}
-          />
-          &nbsp;
-          <span>@criptext.com</span>
-          <div className="clear" />
-        </label>
+        <input
+          type="text"
+          name="username"
+          placeholder="Username"
+          value={props.value}
+          onChange={props.onChangeField}
+          autoFocus={true}
+        />
+        &nbsp;
+        <span>@criptext.com</span>
       </div>
+      <span className="error-message">{props.errorMessage}</span>
       <div className="button">
         <button
           className="button-login"
@@ -67,10 +64,10 @@ const renderFooter = props => (
 );
 
 renderForm.propTypes = {
+  disabled: PropTypes.bool,
+  errorMessage: PropTypes.string,
   onChangeField: PropTypes.func,
-  validator: PropTypes.func,
   onClickSignIn: PropTypes.func,
-  disabled: PropTypes.bool,
   value: PropTypes.string
 };
 

email_login/src/components/LoginWrapper.js

@@ -4,7 +4,10 @@ import SignUpWrapper from './SignUpWrapper';
 import LostAllDevicesWrapper from './LostAllDevicesWrapper';
 import ContinueLogin from './ContinueLogin';
 import { closeDialog, confirmLostDevices } from './../utils/electronInterface';
-import { validateUsername } from './../validators/validators';
+import {
+  validateUsername,
+  checkUsernameAvailable
+} from './../validators/validators';
 
 const mode = {
   SIGNUP: 'SIGNUP',
@@ -13,6 +16,10 @@ const mode = {
   LOST_DEVICES: 'LOST_DEVICES'
 };
 
+const errorMessages = {
+  USERNAME_NOT_EXISTS: "Username doesn't exists"
+};
+
 class LoginWrapper extends Component {
   constructor() {
     super();
@@ -21,13 +28,14 @@ class LoginWrapper extends Component {
       values: {
         username: ''
       },
-      disabled: true
+      disabled: true,
+      errorMessage: ''
     };
     this.timeCountdown = 0;
   }
 
-  componentDidMount() {
-    this.checkDisable();
+  async componentDidMount() {
+    await this.checkDisable();
   }
 
   render() {
@@ -55,9 +63,9 @@ class LoginWrapper extends Component {
             onClickSignIn={this.handleClickSignIn}
             onChangeField={this.handleChange}
             disabled={this.state.disabled}
-            validator={this.validateUsername}
             value={this.state.values.username}
             handleLostDevices={this.handleLostDevices}
+            errorMessage={this.state.errorMessage}
           />
         );
     }
@@ -66,42 +74,47 @@ class LoginWrapper extends Component {
   toggleSignUp = ev => {
     ev.preventDefault();
     ev.stopPropagation();
-    this.setState({
-      mode: this.state.mode === mode.LOGIN ? mode.SIGNUP : mode.LOGIN
+    const nextMode = this.state.mode === mode.LOGIN ? mode.SIGNUP : mode.LOGIN;
+    this.setState({ mode: nextMode }, async () => {
+      await this.checkDisable();
     });
-    this.checkDisable();
   };
 
   toggleContinue = ev => {
     ev.preventDefault();
     ev.stopPropagation();
     this.stopCountdown();
-    this.setState({
-      mode: this.state.mode === mode.LOGIN ? mode.CONTINUE : mode.LOGIN
+    const nextMode =
+      this.state.mode === mode.LOGIN ? mode.CONTINUE : mode.LOGIN;
+    this.setState({ mode: nextMode }, async () => {
+      await this.checkDisable();
     });
-    this.checkDisable();
   };
 
   toggleLostAllDevices = ev => {
     ev.preventDefault();
     ev.stopPropagation();
-    this.setState({
-      mode: mode.LOGIN
-    });
-    this.checkDisable();
+    this.setState(
+      {
+        mode: mode.LOGIN
+      },
+      async () => {
+        await this.checkDisable();
+      }
+    );
   };
 
   stopCountdown = () => {
     clearTimeout(this.timeCountdown);
   };
 
-  validateUsername = () => {
+  validateUsername = async () => {
     const username = this.state.values['username'];
-    return validateUsername(username);
+    return await validateUsername(username);
   };
 
-  checkDisable = () => {
-    const isValid = this.validateUsername();
+  checkDisable = async () => {
+    const isValid = await this.validateUsername();
     this.setState({
       disabled: !isValid
     });
@@ -110,17 +123,26 @@ class LoginWrapper extends Component {
   handleChange = event => {
     const values = { ...this.state.values };
     values[event.target.name] = event.target.value;
-    this.setState({ values }, () => {
-      this.checkDisable();
+    this.setState({ values, errorMessage: '' }, async () => {
+      await this.checkDisable();
     });
   };
 
-  handleClickSignIn = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    this.setState({
-      mode: mode.LOST_DEVICES
-    });
+  handleClickSignIn = async ev => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const isAvailable = await checkUsernameAvailable(
+      this.state.values.username
+    );
+    if (isAvailable) {
+      this.setState({
+        errorMessage: errorMessages.USERNAME_NOT_EXISTS
+      });
+    } else {
+      this.setState({
+        mode: mode.LOST_DEVICES
+      });
+    }
   };
 
   handleLostDevices = event => {

email_login/src/components/LostAllDevices.js

@@ -49,7 +49,6 @@ const renderForm = props => (
           placeholder="Password"
           value={props.values.password}
           onChange={props.onChangeField}
-          onKeyUp={props.validator}
           disabled={props.isLoading}
           autoFocus={true}
         />