bitfinexcom · prdn · Apr 24, 2023 · Apr 11, 2023 · Apr 11, 2023 · Apr 11, 2023
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -42,22 +42,35 @@
       "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",
+    "signInToDifferentAcc": "Sign in to a different account",
     "selectMasterAccount": "Select Master Account",
-    "passwordRecovery": "Password Recovery",
+    "forgotPassword": "Forgot Password",
+    "forgotPasswordNote": "Reset your Reports App account by entering your account details and a new password.",
     "subAccount": "Sub Account",
     "enterAPIKey": "Enter API Key:",
     "enterAPISecret": "Enter API Secret:",
     "enterPassword": "Enter Bitfinex Report App Password",
     "repeatPassword": "Repeat Bitfinex Report App Password",
+    "enterNewPassword": "Enter New Bitfinex Report App Password",
+    "repeatNewPassword": "Repeat New Bitfinex Report App Password",
+    "resetPassword": "Reset Password",
+    "removeLoginPassword": "Remove Password on Login",
+    "resetAccWithApiKey": "Reset account with API key",
+    "resetAccWithoutApiKey": "Reset account without API key",
     "enterEmail": "Enter Email:",
     "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",

diff --git a/src/components/Auth/InputKey/_InputKey.scss b/src/components/Auth/InputKey/_InputKey.scss
@@ -5,6 +5,7 @@
   }
 
   .bp3-input {
+    height: 40px;
     padding: 0 15px;
     font-size: 15px;
 

diff --git a/src/components/Auth/LoginApiKey/LoginApiKey.js b/src/components/Auth/LoginApiKey/LoginApiKey.js
@@ -0,0 +1,66 @@
+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,
+  showNote,
+  apiSecret,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      {showNote && (
+        <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 = {
+  showNote: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  apiKey: PropTypes.string.isRequired,
+  apiSecret: PropTypes.string.isRequired,
+}
+
+LoginApiKey.defaultProps = {
+  showNote: false,
+}
+
+export default memo(LoginApiKey)
diff --git a/src/components/Auth/LoginApiKey/index.js b/src/components/Auth/LoginApiKey/index.js
@@ -0,0 +1 @@
+export { default } from './LoginApiKey'
diff --git a/src/components/Auth/LoginPassword/LoginPassword.js b/src/components/Auth/LoginPassword/LoginPassword.js
@@ -0,0 +1,44 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+import InputKey from '../InputKey'
+import ErrorLabel from '../ErrorLabel'
+
+export const LoginPassword = ({
+  onChange,
+  password,
+  passwordError,
+  passwordLabel,
+  passwordRepeat,
+  passwordRepeatLabel,
+  passwordRepeatError,
+}) => (
+  <>
+    <InputKey
+      name='password'
+      value={password}
+      onChange={onChange}
+      label={passwordLabel}
+    />
+    <ErrorLabel text={passwordError} />
+    <InputKey
+      onChange={onChange}
+      name='passwordRepeat'
+      value={passwordRepeat}
+      label={passwordRepeatLabel}
+    />
+    <ErrorLabel text={passwordRepeatError} />
+  </>
+)
+
+LoginPassword.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  password: PropTypes.string.isRequired,
+  passwordError: PropTypes.string.isRequired,
+  passwordLabel: PropTypes.string.isRequired,
+  passwordRepeat: PropTypes.string.isRequired,
+  passwordRepeatLabel: PropTypes.string.isRequired,
+  passwordRepeatError: PropTypes.string.isRequired,
+}
+
+export default memo(LoginPassword)
diff --git a/src/components/Auth/LoginPassword/index.js b/src/components/Auth/LoginPassword/index.js
@@ -0,0 +1 @@
+export { default } from './LoginPassword'
diff --git a/src/components/Auth/ModeSwitcher/ModeSwitcher.js b/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)
diff --git a/src/components/Auth/ModeSwitcher/index.js b/src/components/Auth/ModeSwitcher/index.js
@@ -0,0 +1 @@
+export { default } from './ModeSwitcher'