From 231e4c67d83a34508a33cd3432207fcef4ae7066 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 11 Sep 2020 14:30:59 +0200
Subject: [PATCH] show warning (#3660)

---
 packages/page-accounts/src/modals/Create.tsx | 48 +++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx
index aaf2fdc1f0..a8f64f1c6e 100644
--- a/packages/page-accounts/src/modals/Create.tsx
+++ b/packages/page-accounts/src/modals/Create.tsx
@@ -35,8 +35,8 @@ type SeedType = 'bip' | 'raw' | 'dev';
 
 interface AddressState {
   address: string | null;
-  deriveError: string | null;
   derivePath: string;
+  deriveValidation? : DeriveValidationOutput
   isSeedValid: boolean;
   pairType: KeypairType;
   seed: string;
@@ -49,27 +49,38 @@ interface CreateOptions {
   tags?: string[];
 }
 
+interface DeriveValidationOutput {
+  error?: string;
+  warning?: string;
+}
+
 const DEFAULT_PAIR_TYPE = 'sr25519';
 const isElectron = navigator.userAgent.toLowerCase().indexOf(' electron/') > -1;
 
-function deriveValidate (seed: string, seedType: SeedType, derivePath: string, pairType: KeypairType): string | null {
+function deriveValidate (seed: string, seedType: SeedType, derivePath: string, pairType: KeypairType): DeriveValidationOutput {
   try {
     const { password, path } = keyExtractSuri(`${seed}${derivePath}`);
+    let result: DeriveValidationOutput = {};
+
+    // show a warning in case the password contains an unintended / character
+    if (password?.includes('/')) {
+      result = { warning: 'Your password contains at least one "/" character. Disregard this warning if it is intended.' };
+    }
 
     // we don't allow soft for ed25519
     if (pairType === 'ed25519' && path.some(({ isSoft }): boolean => isSoft)) {
-      return 'Soft derivation paths are not allowed on ed25519';
+      return { ...result, error: 'Soft derivation paths are not allowed on ed25519' };
     }
 
     // we don't allow password for hex seed
     if (seedType === 'raw' && password) {
-      return 'Password are ignored for hex seed';
+      return { ...result, error: 'Password are ignored for hex seed' };
     }
-  } catch (error) {
-    return (error as Error).message;
-  }
 
-  return null;
+    return result;
+  } catch (error) {
+    return { error: (error as Error).message };
+  }
 }
 
 function isHexSeed (seed: string): boolean {
@@ -103,8 +114,8 @@ function generateSeed (_seed: string | undefined | null, derivePath: string, see
 
   return {
     address,
-    deriveError: null,
     derivePath,
+    deriveValidation: undefined,
     isSeedValid: true,
     pairType,
     seed,
@@ -113,13 +124,13 @@ function generateSeed (_seed: string | undefined | null, derivePath: string, see
 }
 
 function updateAddress (seed: string, derivePath: string, seedType: SeedType, pairType: KeypairType): AddressState {
-  const deriveError = deriveValidate(seed, seedType, derivePath, pairType);
+  const deriveValidation = deriveValidate(seed, seedType, derivePath, pairType);
   let isSeedValid = seedType === 'raw'
     ? rawValidate(seed)
     : mnemonicValidate(seed);
   let address: string | null = null;
 
-  if (!deriveError && isSeedValid) {
+  if (!deriveValidation?.error && isSeedValid) {
     try {
       address = addressFromSeed(seed, derivePath, pairType);
     } catch (error) {
@@ -129,8 +140,8 @@ function updateAddress (seed: string, derivePath: string, seedType: SeedType, pa
 
   return {
     address,
-    deriveError,
     derivePath,
+    deriveValidation,
     isSeedValid,
     pairType,
     seed,
@@ -172,12 +183,12 @@ function createAccount (suri: string, pairType: KeypairType, { genesisHash, name
 function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, isDevelopment } = useApi();
-  const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
+  const [{ address, derivePath, deriveValidation, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
   const [isConfirmationOpen, toggleConfirmation] = useToggle();
   const [isBusy, setIsBusy] = useState(false);
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [{ isPasswordValid, password }, setPassword] = useState({ isPasswordValid: false, password: '' });
-  const isValid = !!address && !deriveError && isNameValid && isPasswordValid && isSeedValid;
+  const isValid = !!address && !deriveValidation?.error && isNameValid && isPasswordValid && isSeedValid;
 
   const seedOpt = useMemo(() => (
     isDevelopment
@@ -353,7 +364,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
                 <Modal.Column>
                   <Input
                     help={t<string>('You can set a custom derivation path for this account using the following syntax "/<soft-key>//<hard-key>". The "/<soft-key>" and "//<hard-key>" may be repeated and mixed`. An optional "///<password>" can be used with a mnemonic seed, and may only be specified once.')}
-                    isError={!!deriveError}
+                    isError={!!deriveValidation?.error}
                     label={t<string>('secret derivation path')}
                     onChange={_onChangeDerive}
                     onEnter={_onCommit}
@@ -369,8 +380,11 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
                     tabIndex={-1}
                     value={derivePath}
                   />
-                  {deriveError && (
-                    <article className='error'>{deriveError}</article>
+                  {deriveValidation?.error && (
+                    <article className='error'>{deriveValidation.error}</article>
+                  )}
+                  {deriveValidation?.warning && (
+                    <article className='warning'>{deriveValidation.warning}</article>
                   )}
                 </Modal.Column>
                 <Modal.Column>