(improvements) Add account section

public/locales/en/translations.json

@@ -42,10 +42,15 @@
       "invalidToken": "Invalid token, please try again",
       "loginSessionExpired": "Your login session has expired, please try again"
     },
+    "apiKey": "API Key",
+    "apiSecret": "API Secret",
+    "accWithApiKey": "Add account with API key",
+    "accWithoutApiKey": "Add account without API key",
     "simpleAccounts": "Simple Accounts",
     "multipleAccounts": "Multiple Accounts",
     "signUp": "Sign Up",
     "signIn": "Sign In",
+    "signInToExistingAcc": "Sign in to an existing account",
     "selectMasterAccount": "Select Master Account",
     "passwordRecovery": "Password Recovery",
     "subAccount": "Sub Account",
@@ -57,7 +62,7 @@
     "checkAuth": "Check Auth",
     "note1": "Visit ",
     "note2": " to get the readonly API key and secret pair.",
-    "passwordProtection": "Enable password protection",
+    "passwordProtection": "Require Password on Login",
     "passwordLengthValidationError": "The password must be at least 8 characters long",
     "passwordCharactersValidationError": "The password must include both uppercase and lowercase characters",
     "passwordRepeatValidationError": "The password does not match",

src/components/Auth/InputKey/_InputKey.scss

@@ -5,6 +5,7 @@
   }
 
   .bp3-input {
+    height: 40px;
     padding: 0 15px;
     font-size: 15px;
 

src/components/Auth/LoginApiKey/LoginApiKey.js

@@ -0,0 +1,57 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { Callout } from '@blueprintjs/core'
+import _split from 'lodash/split'
+
+import Icon from 'icons'
+import config from 'config'
+
+import InputKey from '../InputKey'
+
+const { KEY_URL } = config
+
+export const LoginApiKey = ({
+  apiKey,
+  onChange,
+  apiSecret,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <Callout icon={<Icon.INFO_CIRCLE />}>
+        <div className='api-key-note'>
+          {t('auth.note1')}
+          <a
+            href={KEY_URL}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            {_split(KEY_URL, 'https://')[1]}
+          </a>
+          {t('auth.note2')}
+        </div>
+      </Callout>
+      <InputKey
+        name='apiKey'
+        value={apiKey}
+        label='auth.apiKey'
+        onChange={onChange}
+      />
+      <InputKey
+        name='apiSecret'
+        value={apiSecret}
+        label='auth.apiSecret'
+        onChange={onChange}
+      />
+    </>
+  )
+}
+
+LoginApiKey.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  apiKey: PropTypes.string.isRequired,
+  apiSecret: PropTypes.string.isRequired,
+}
+
+export default memo(LoginApiKey)

src/components/Auth/LoginApiKey/index.js

@@ -0,0 +1 @@
+export { default } from './LoginApiKey'

src/components/Auth/LoginPassword/LoginPassword.js

@@ -0,0 +1,40 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+import InputKey from '../InputKey'
+import ErrorLabel from '../ErrorLabel'
+
+export const LoginPassword = ({
+  onChange,
+  password,
+  passwordError,
+  passwordRepeat,
+  passwordRepeatError,
+}) => (
+  <>
+    <InputKey
+      name='password'
+      value={password}
+      onChange={onChange}
+      label='auth.enterPassword'
+    />
+    <ErrorLabel text={passwordError} />
+    <InputKey
+      onChange={onChange}
+      name='passwordRepeat'
+      value={passwordRepeat}
+      label='auth.repeatPassword'
+    />
+    <ErrorLabel text={passwordRepeatError} />
+  </>
+)
+
+LoginPassword.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  password: PropTypes.string.isRequired,
+  passwordError: PropTypes.string.isRequired,
+  passwordRepeat: PropTypes.string.isRequired,
+  passwordRepeatError: PropTypes.string.isRequired,
+}
+
+export default memo(LoginPassword)

src/components/Auth/LoginPassword/index.js

@@ -0,0 +1 @@
+export { default } from './LoginPassword'

src/components/Auth/ModeSwitcher/ModeSwitcher.js

@@ -0,0 +1,32 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+export const ModeSwitcher = ({
+  icon,
+  mode,
+  title,
+  switchMode,
+}) => (
+  <div className='auth-mode-switch-wrapper'>
+    <div
+      onClick={() => switchMode(mode)}
+      className='bitfinex-auth-mode-switch'
+    >
+      {icon}
+      {title}
+    </div>
+  </div>
+)
+
+ModeSwitcher.propTypes = {
+  icon: PropTypes.node,
+  mode: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  switchMode: PropTypes.func.isRequired,
+}
+
+ModeSwitcher.defaultProps = {
+  icon: null,
+}
+
+export default memo(ModeSwitcher)

src/components/Auth/ModeSwitcher/index.js

@@ -0,0 +1 @@
+export { default } from './ModeSwitcher'

src/components/Auth/PasswordRecovery/PasswordRecovery.js

@@ -185,7 +185,6 @@ class PasswordRecovery extends PureComponent {
       password,
       passwordRepeat,
       isPasswordProtected,
-      isPersisted,
       passwordError,
       passwordRepeatError,
       useApiKey,
@@ -266,24 +265,14 @@ class PasswordRecovery extends PureComponent {
                   </>
                 )}
                 <div className='bitfinex-auth-checkboxes'>
-                  <div className='bitfinex-auth-checkboxes--group'>
-                    <Checkbox
-                      name='useApiKey'
-                      checked={useApiKey}
-                      onChange={this.handleCheckboxChange}
-                      className='bitfinex-auth-remember-me'
-                    >
-                      {t('auth.useApiKey')}
-                    </Checkbox>
-                    <Checkbox
-                      className='bitfinex-auth-remember-me'
-                      name='isPersisted'
-                      checked={isPersisted}
-                      onChange={this.handleCheckboxChange}
-                    >
-                      {t('auth.rememberMe')}
-                    </Checkbox>
-                  </div>
+                  <Checkbox
+                    name='useApiKey'
+                    checked={useApiKey}
+                    onChange={this.handleCheckboxChange}
+                    className='bitfinex-auth-remember-me'
+                  >
+                    {t('auth.useApiKey')}
+                  </Checkbox>
                   {showPasswordProtection && (
                   <Checkbox
                     className='bitfinex-auth-remember-me'

src/components/Auth/RegisterSubAccounts/RegisterSubAccounts.js

@@ -25,6 +25,8 @@ const prepareMasterAccUsers = (users) => _map(
   user => user.email,
 )
 
+const { showFrameworkMode } = config
+
 class RegisterSubAccounts extends PureComponent {
   static propTypes = {
     authType: PropTypes.string.isRequired,
@@ -136,12 +138,15 @@ class RegisterSubAccounts extends PureComponent {
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            {config.showFrameworkMode && users.length > 0 && (
-              <div
-                className='bitfinex-auth-mode-switch'
-                onClick={() => switchMode(MODES.SIGN_IN)}
-              >
-                {t('auth.signIn')}
+            {showFrameworkMode && users.length > 0 && (
+              <div className='auth-mode-switch-wrapper'>
+                <div
+                  className='bitfinex-auth-mode-switch'
+                  onClick={() => switchMode(MODES.SIGN_IN)}
+                >
+                  <Icon.SIGN_IN />
+                  {t('auth.signInToExistingAcc')}
+                </div>
               </div>
             )}
           </div>

src/components/Auth/SignIn/SignIn.js

@@ -194,7 +194,6 @@ class SignIn extends PureComponent {
       userShouldReLogin,
       isMultipleAccsSelected,
       isElectronBackendLoaded,
-      authData: { isPersisted },
     } = this.props
     const {
       otp,
@@ -268,16 +267,6 @@ class SignIn extends PureComponent {
                   />
                 )}
                 <div className='bitfinex-auth-checkboxes'>
-                  {isEmailSelected && (
-                    <Checkbox
-                      name='isPersisted'
-                      checked={isPersisted}
-                      onChange={this.togglePersistence}
-                      className='bitfinex-auth-remember-me bitfinex-auth-remember-me--sign-in'
-                    >
-                      {t('auth.rememberMe')}
-                    </Checkbox>
-                  )}
                   {showSubAccount && (
                     <Checkbox
                       disabled