Updated flow for creating accounts (polkadot-js#3880)

* Add 3 step account creation

* Add textarea with dropdown

* Add OWASP and styles to PasswordStrength

* Align the checkbox with other ui elements

* Notification on mnemonic copy

* Make confirmation label clickable

* Do not shorten address in creation modal

* Make address name not editable in header

* Always show password strength meter

* Always show password strength meter

* Update tests to new account flow

* Remove repeated dependency

* Remove console.log from test

* Update yarn.lock

* Restore imports order.

* Format div component according to style

* Remove cursor styling for old browsers

* Empty line

* Organize imports. Configure StrengthTester once. Use color from theme.

* wip on text area

* TextArea styling

* Checbox styling

* Update repeated password validity on first password change

* Simplify CopyButton notification code.

* Change TextArea styling to more consistent

* Make password strength indicator wider

* Move external warning down and show on both steps

* Inline TextArea subcomponents

* Move mnemonic saved confirmation label closer to buttons

* Add steps counter to header

* Remove space

Co-authored-by: Michał Ziętalak <[email protected]>
Co-authored-by: Jaco Greeff <[email protected]>

jest.config.js

@@ -16,11 +16,11 @@ const internalModules = findPackages()
 const defaultConfig = {
   moduleNameMapper: {
     ...internalModules,
+    '@polkadot/apps/(.*)$': '<rootDir>/packages/apps/src/$1',
     '\\.(css|less)$': 'empty/object',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
     '\\.(md)$': '<rootDir>/__mocks__/fileMock.js'
   },
-  testTimeout: 25000,
   transformIgnorePatterns: [
     '<rootDir>/node_modules'
   ]
@@ -38,5 +38,6 @@ module.exports = Object.assign({}, config, {
       ...defaultConfig,
       displayName: 'fast-tests'
     }
-  ]
+  ],
+  testTimeout: 25000
 });

packages/apps/public/locales/ar/translation.json

@@ -36,7 +36,7 @@
   "Add a tip to this extrinsic, paying the block author for greater priority": "أضف جائزة إلى هذا البرنامج الخارجي، لتدفع لكاتب الكتلة في مقابل أولوية أكبر",
   "Add account": "أضف حسابًا",
   "Add account via Qr": "QR أضف حسابًا عبر كود",
-  "Add an account via seed": "seed أضف حسابًا باستخدام الجملة البذرة",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "{{step}}/{{STEPS_COUNT}} seed أضف حسابًا باستخدام الجملة البذرة",
   "Add an address": "أضف عنوانا",
   "Add an existing code hash": "إضافة تجزئة رمز موجودة",
   "Add an existing contract": "إضافة عقد موجود",

packages/apps/public/locales/en/app-accounts.json

@@ -14,7 +14,7 @@
   "Add account": "Add account",
   "Add account via Ledger": "Add account via Ledger",
   "Add account via Qr": "Add account via Qr",
-  "Add an account via seed": "Add an account via seed",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Add an account via seed {{step}}/{{STEPS_COUNT}}",
   "Add identity judgment": "Add identity judgment",
   "Add multisig": "Add multisig",
   "Add proxied account": "Add proxied account",
@@ -63,6 +63,7 @@
   "Forget this account": "Forget this account",
   "Full Legal Name": "Full Legal Name",
   "Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.": "Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.",
+  "I have saved my mnemonic seed safely": "I have saved my mnemonic seed safely",
   "If the delegated account is currently voting in a referendum, the delegating vote and conviction will be added.": "If the delegated account is currently voting in a referendum, the delegating vote and conviction will be added.",
   "If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.": "If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.",
   "If you add several proxy accounts for the same proxy type (e.g 2 accounts set as proxy for Governance), then any of those 2 accounts will be able to perfom governance actions on behalf of the proxied account": "If you add several proxy accounts for the same proxy type (e.g 2 accounts set as proxy for Governance), then any of those 2 accounts will be able to perfom governance actions on behalf of the proxied account",

packages/apps/public/locales/en/react-components.json

@@ -41,6 +41,7 @@
   "lifetime": "lifetime",
   "lock expired": "lock expired",
   "locked": "locked",
+  "mnemonic copied": "mnemonic copied",
   "no tags": "no tags",
   "ongoing referendum": "ongoing referendum",
   "only this network": "only this network",
@@ -50,6 +51,7 @@
   "reserved": "reserved",
   "session keys": "session keys",
   "session next": "session next",
+  "strong": "strong",
   "tip": "tip",
   "total": "total",
   "transactions": "transactions",
@@ -68,6 +70,7 @@
   "vote value": "vote value",
   "vote with account": "vote with account",
   "voting balance": "voting balance",
+  "weak": "weak",
   "{{blocks}} blocks": "{{blocks}} blocks",
   "{{eras}} eras remaining": "{{eras}} eras remaining",
   "{{name}} ({{size}} bytes)": "{{name}} ({{size}} bytes)",

packages/apps/public/locales/es/translation.json

@@ -27,7 +27,7 @@
   "Add a tip to this extrinsic, paying the block author for greater priority": "Añade una propina a este extrinsic, pagando al autor del bloque por una mayor prioridad",
   "Add account": "Añadir cuenta",
   "Add account via Qr": "Añadir cuenta desde el Qr",
-  "Add an account via seed": "Añadir cuenta desde la semilla",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Añadir cuenta desde la semilla {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Añadir una dirección",
   "Add an existing code hash": "Añadir un hash de código existente",
   "Add an existing contract": "Añadir un contrato existente",

packages/apps/public/locales/fr/translation.json

@@ -43,7 +43,7 @@
   "Add account": "Ajouter un compte",
   "Add account via Ledger": "Ajouter un compte via Ledger",
   "Add account via Qr": "Ajouter via Code QR",
-  "Add an account via seed": "Ajouter un compte via phrase secrète",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Ajouter un compte via phrase secrète {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Ajouter une adresse",
   "Add an existing code hash": "Ajouter un code de hachage existant",
   "Add an existing contract": "Ajouter un contrat existant",

packages/apps/public/locales/id/translation.json

@@ -42,7 +42,7 @@
   "Add account": "Tambahkan akun",
   "Add account via Ledger": "Tambah akun melalui Ledger",
   "Add account via Qr": "Tambahkan akun melalui Qr",
-  "Add an account via seed": "Tambahkan akun via seed",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Tambahkan akun via seed {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Tambah sebuah alamat",
   "Add an existing code hash": "Tambahkan kode hash yang ada",
   "Add an existing contract": "Tambahkan kontrak yang ada",

packages/apps/public/locales/it/translation.json

@@ -42,7 +42,7 @@
   "Add account": "Aggiungi account",
   "Add account via Ledger": "Aggiungi account via Ledger",
   "Add account via Qr": "Aggiungi account via QR Code",
-  "Add an account via seed": "Aggiungi account via seed",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Aggiungi account via seed {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Aggiungi un indirizzo",
   "Add an existing code hash": "Aggiungi un codice hash",
   "Add an existing contract": "Aggiungi un contratto",

packages/apps/public/locales/ja/translation.json

@@ -18,7 +18,7 @@
   "Add Ledger": "クエリーレッジャー",
   "Add account": "アカウントを追加する",
   "Add account via Qr": "QRを追加する",
-  "Add an account via seed": "シード経由でアカウントを追加する",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "シード経由でアカウントを追加する{{step}}/{{STEPS_COUNT}}",
   "Add an address": "アドレスを追加する",
   "Add an existing code hash": "既存のコードハッシュを追加する",
   "Add an existing contract": "既存のコントラクトを追加する",

packages/apps/public/locales/ko/translation.json

@@ -41,7 +41,7 @@
   "Add account": "계정 추가하기",
   "Add account via Ledger": "원장 통해서 계정을 추가하다",
   "Add account via Qr": "QR코드로 계정 추가하기",
-  "Add an account via seed": "난수 값을 이용해서 계정 생성하기",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "난수 값을 이용해서 계정 생성하기{{step}}/{{STEPS_COUNT}}",
   "Add an address": "주소 추가하기",
   "Add an existing code hash": "현재 존재하는 코드 해시를 추가하다",
   "Add an existing contract": "현재 존재하는 계약서를 추가하다",

packages/apps/public/locales/pt/translation.json

@@ -27,7 +27,7 @@
   "Add a tip to this extrinsic, paying the block author for greater priority": "Adicione uma gorjeta a esse extrínseco, pagando ao autor do bloco por maior prioridade",
   "Add account": "Adicionar Conta",
   "Add account via Qr": "Adicionar conta via código QR",
-  "Add an account via seed": "Adicionar uma conta via semente",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Adicionar uma conta via semente {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Adicionar um endereço",
   "Add an existing code hash": "Adicione um hash de código existente",
   "Add an existing contract": "Adicionar um contrato existente",

packages/apps/public/locales/ru/translation.json

@@ -27,7 +27,7 @@
   "Add a tip to this extrinsic, paying the block author for greater priority": "Добавыть чаевые для автора блока для большей приоритезации",
   "Add account": "Добавить аккаунт",
   "Add account via Qr": "Добавить аккаунт с помощью QR-кода",
-  "Add an account via seed": "Добавить аккаунт с помощью секретной фразы",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "Добавить аккаунт с помощью секретной фразы {{step}}/{{STEPS_COUNT}}",
   "Add an address": "Добавить адрес",
   "Add an existing code hash": "Добавить существующий хэш кода",
   "Add an existing contract": "Добавить существующий контракт",

packages/apps/public/locales/zh/translation.json

@@ -39,7 +39,7 @@
   "Add a tip to this extrinsic, paying the block author for greater priority": "添加小费到这个外部，为获得更高的优先级去支付区块生产者",
   "Add account": "添加账户",
   "Add account via Qr": "通过二维码添加账户",
-  "Add an account via seed": "通过种子添加账户",
+  "Add an account via seed {{step}}/{{STEPS_COUNT}}": "通过种子添加账户 {{step}}/{{STEPS_COUNT}}",
   "Add an address": "添加一个地址",
   "Add an existing code hash": "添加一个已经存在的代码哈希",
   "Add an existing contract": "添加一个已存在的合约",
@@ -1380,4 +1380,4 @@
   "{{threshold}}, not passing": "{{threshold}},没有通过",
   "{{threshold}}, passing": "{{threshold}}, 通过",
   "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)": "{{value}}x投票余额，锁定 {{lock}}x 执行 ({{period}} days)"
-}
+}

packages/apps/src/themes.ts

@@ -16,6 +16,7 @@ export const darkTheme: ThemeDef = {
   borderTable: 'transparent',
   borderTabs: 'transparent',
   color: 'rgba(244, 242, 240, 0.9)',
+  colorCheckbox: 'rgba(78, 78, 78, 0.66)',
   colorError: 'rgba(255, 0, 0, 0.85)',
   colorLabel: 'rgba(244, 242, 240, 0.45)',
   colorSummary: 'rgba(244, 242, 240, 0.75)',
@@ -35,6 +36,7 @@ export const lightTheme: ThemeDef = {
   borderTable: '#eeecea',
   borderTabs: '#eeecea',
   color: '#4e4e4e',
+  colorCheckbox: 'rgba(34, 36, 38, 0.15)',
   colorError: 'rgba(139, 0, 0)',
   colorLabel: 'rgba(78, 78, 78, 0.66)',
   colorSummary: 'rgba(0, 0, 0, 0.6)',

packages/page-accounts/src/CreateAccount.spec.tsx

@@ -3,12 +3,14 @@
 
 import AccountsApp from '@polkadot/app-accounts';
 import { MemoryStore } from '@polkadot/app-accounts/test-support/MemoryStore';
+import { lightTheme } from '@polkadot/apps/themes';
 import { Api } from '@polkadot/react-api';
 import '@polkadot/react-components/i18n';
 import { useApi } from '@polkadot/react-hooks';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
 import React, { PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
 
 const SUBSTRATE_PORT = Number.parseInt(process.env.TEST_SUBSTRATE_PORT || '30333');
 
@@ -18,12 +20,12 @@ const WaitForApi = ({ children }: { children: React.ReactNode }): PropsWithChild
   return api.isApiReady ? (children) : null;
 };
 
-describe('--SLOW--: Account Create', () => {
-  it('asks for confirmation after saving new account', async () => {
-    const memoryStore = new MemoryStore();
+const renderAccounts = () => {
+  const memoryStore = new MemoryStore();
 
-    const { findByPlaceholderText, findByTestId, findByText } = render(
-      <MemoryRouter>
+  return render(
+    <MemoryRouter>
+      <ThemeProvider theme={lightTheme}>
         <Api store={memoryStore}
           url={`ws://127.0.0.1:${SUBSTRATE_PORT}`}>
           <WaitForApi>
@@ -34,29 +36,70 @@ describe('--SLOW--: Account Create', () => {
             </div>
           </WaitForApi>
         </Api>
-      </MemoryRouter>
-    );
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+};
+
+describe.only('--SLOW--: Account Create', () => {
+  it('new create modal', async () => {
+    const { findByTestId, findByText, queryByText } = renderAccounts();
 
-    const addAccountButton = await findByText('Add account', {}, { timeout: 4000 });
+    const addAccountButton = await findByText('Add account', {}, { timeout: 5000 });
 
     fireEvent.click(addAccountButton);
 
-    const nameInput = await findByPlaceholderText('new account');
+    const isSeedSavedCheckbox = await findByText('I have saved my mnemonic seed safely');
+    const hiddenCheckbox = isSeedSavedCheckbox as HTMLInputElement;
+
+    fireEvent.click(hiddenCheckbox);
+
+    const nextStepButton = await findByText('Next', {}, { timeout: 4000 });
+
+    fireEvent.click(nextStepButton);
 
-    fireEvent.change(nameInput, { target: { value: 'my super account' } });
+    const accountNameInput = await findByTestId('name');
+
+    fireEvent.change(accountNameInput, { target: { value: 'my new account' } });
 
     const passwordInput = await findByTestId('password');
 
-    fireEvent.change(passwordInput, { target: { value: 'a' } });
+    fireEvent.change(passwordInput, { target: { value: 'password' } });
+
+    const passwordInput2 = await findByTestId('password (repeat)');
+
+    fireEvent.change(passwordInput2, { target: { value: 'password' } });
+
+    const toStep3Button = await findByText('Next', {}, { timeout: 4000 });
+
+    fireEvent.click(toStep3Button);
+
+    const createAnAccountButton = await findByText('Save', {}, { timeout: 4000 });
+
+    fireEvent.click(createAnAccountButton);
+
+    await waitForElementToBeRemoved(() => queryByText('Add an account via seed'));
+
+    expect(await findByText('MY NEW ACCOUNT')).toBeTruthy();
+  });
+
+  it('error message for derivation path', async () => {
+    const { findByTestId, findByText } = renderAccounts();
+
+    const addAccountButton = await findByText('Add account', {}, { timeout: 5000 });
+
+    fireEvent.click(addAccountButton);
+
+    const showAdvancedOptionsButton = await findByText('Advanced creation options', {}, { timeout: 5000 });
 
-    const passwordRepeatInput = await findByTestId('password (repeat)');
+    fireEvent.click(showAdvancedOptionsButton);
 
-    fireEvent.change(passwordRepeatInput, { target: { value: 'a' } });
+    const derivationPathInput = await findByTestId('secret derivation path', {}, { timeout: 5000 });
 
-    const saveButton = await findByText('Save');
+    fireEvent.change(derivationPathInput, { target: { value: '//abc//' } });
 
-    fireEvent.click(saveButton);
+    const errorMsg = await findByText('Unable to match provided value to a secret URI', {}, { timeout: 5000 });
 
-    expect(await findByText('Create and backup account')).toBeTruthy();
+    expect(errorMsg).toBeTruthy();
   });
 });