(improvements) Notifications and auth flow when users try to re-add the existing account

public/locales/en/translations.json

@@ -67,6 +67,8 @@
     "apiSecret": "API Secret",
     "accWithApiKey": "Add account with API key",
     "accWithoutApiKey": "Add account without API key",
+    "accAddedWithApiKey": "You have already added this account using an API key",
+    "accAddedWithApiKeyLogin": "You have already added this account using an API key, logging you in...",
     "simpleAccounts": "Simple Accounts",
     "multipleAccounts": "Multiple Accounts",
     "login": "Login",

src/components/Auth/SignUp/SignUp.container.js

@@ -3,12 +3,14 @@ import { connect } from 'react-redux'
 import { withTranslation } from 'react-i18next'
 
 import {
+  signIn,
   signUp,
   signUpOtp,
   updateAuth,
   signUpEmail,
   showOtpLogin,
 } from 'state/auth/actions'
+import { updateStatus } from 'state/status/actions'
 import {
   getUsers,
   getAuthData,
@@ -26,11 +28,13 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = {
+  signIn,
   signUp,
   signUpOtp,
   updateAuth,
   signUpEmail,
   showOtpLogin,
+  updateStatus,
 }
 
 export default compose(

src/components/Auth/SignUp/SignUp.js

@@ -8,6 +8,10 @@ import {
   Dialog,
   Intent,
 } from '@blueprintjs/core'
+import _map from 'lodash/map'
+import _find from 'lodash/find'
+import _isEqual from 'lodash/isEqual'
+import _includes from 'lodash/includes'
 
 import Icon from 'icons'
 import config from 'config'
@@ -34,12 +38,14 @@ class SignUp extends PureComponent {
     }).isRequired,
     loading: PropTypes.bool.isRequired,
     t: PropTypes.func.isRequired,
+    signIn: PropTypes.func.isRequired,
     signUp: PropTypes.func.isRequired,
     signUpOtp: PropTypes.func.isRequired,
     signUpEmail: PropTypes.func.isRequired,
     showOtpLogin: PropTypes.func.isRequired,
     isOtpLoginShown: PropTypes.bool.isRequired,
     switchMode: PropTypes.func.isRequired,
+    updateStatus: PropTypes.func.isRequired,
     users: PropTypes.arrayOf(PropTypes.shape({
       email: PropTypes.string.isRequired,
       isSubAccount: PropTypes.bool.isRequired,
@@ -85,6 +91,7 @@ class SignUp extends PureComponent {
     })
     tracker.trackEvent('Add Account')
     const isValid = this.validateForm()
+    const isRegisteredUserName = this.validateUsername(userName)
     if (isValid) {
       if (useApiKey) {
         signUp({
@@ -94,6 +101,8 @@ class SignUp extends PureComponent {
           isNotProtected: !isPasswordProtected,
           isPersisted,
         })
+      } else if (isRegisteredUserName) {
+        this.handleExistingUser(userName)
       } else {
         signUpEmail({
           login: userName,
@@ -144,6 +153,29 @@ class SignUp extends PureComponent {
     return isValid
   }
 
+  validateUsername = (userName) => {
+    const { users } = this.props
+    const isRegisteredUserName = _includes(
+      _map(users, user => user.email), userName,
+    )
+    return isRegisteredUserName
+  }
+
+  handleExistingUser = (userName) => {
+    const {
+      users, switchMode, updateStatus, signIn,
+    } = this.props
+    const registeredUser = _find(users, user => _isEqual(user.email, userName))
+    const { email, isSubAccount, isNotProtected } = registeredUser
+    if (isNotProtected) {
+      updateStatus({ id: 'auth.accAddedWithApiKeyLogin' })
+      signIn({ email, isSubAccount })
+    } else {
+      switchMode(MODES.SIGN_IN)
+      updateStatus({ id: 'auth.accAddedWithApiKey' })
+    }
+  }
+
   handleInputChange = (e) => {
     const { isBeingValidated } = this.state
     const { name, value } = e.target

src/components/Status/_Status.scss

@@ -4,6 +4,7 @@
 
 .bp3-toast {
   min-height: 40px;
+  max-width: 550px;
   padding: 5px;
   border-radius: 2px;
   align-items: center;