require stronger password

Author: wepsree

README.md

@@ -1,9 +1,13 @@
 # Vite Passport
 
-## How to run
+## How to run for development
 
 1. `npm install`
 2. go to [brave://extensions/](brave://extensions/) or [chrome://extensions/](chrome://extensions/)
 3. turn on dev mode
-4. `npm start` which generates `dist` folder
+4. `npm run dev` which generates `dist` folder
 5. drag `dist` folder into extensions tabs or select it in "Load unpacked"
+
+
+## How to build for production
+1. `npm run build` which generates minified `dist` folder

esbuild.js

@@ -36,6 +36,7 @@ require('esbuild')
 			'.json': 'copy',
 			'.png': 'copy',
 		},
+		drop: PROD ? ['console'] : [],
 		// logLevel: 'debug',
 		// logLevel: 'silent',
 		plugins: [

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Vite Passport",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"icons": {
 		"1024": "src/assets/logo-blue-1024.png"
 	},

package-lock.json

@@ -38,6 +38,7 @@ type Props = State &
 		onMetaEnter?: () => void;
 		placeholder?: string;
 		optional?: boolean;
+		showPasswordRequirements?: boolean;
 		maxLength?: number;
 		getIssue?: (value: string) => string | void;
 		onKeyDown?: (key: string) => void;
@@ -67,6 +68,7 @@ const TextInput = ({
 	textarea,
 	numeric,
 	password,
+	showPasswordRequirements,
 	initialValue,
 	resizable,
 	maxDecimals,
@@ -180,6 +182,15 @@ const TextInput = ({
 							if (!optional && !trimmedValue) {
 								errorSet(i18n.thisFieldCannotBeBlank);
 								return false;
+							} else if (password) {
+								if (
+									internalValue.length < 8 ||
+									!/[A-Z]/.test(internalValue) ||
+									!/[0-9]/.test(internalValue)
+								) {
+									errorSet(i18n.invalidPassword);
+									return false;
+								}
 							} else if (trimmedValue && getIssue) {
 								const newIssue = getIssue(trimmedValue) || '';
 								errorSet(newIssue);
@@ -213,6 +224,11 @@ const TextInput = ({
 				<div className={`h-0.5 duration-200 ${focused ? 'bg-skin-lowlight' : 'bg-skin-divider'}`} />
 			)}
 			{error && <p className="mt-1 text-sm leading-3 font-bold text-red-500">{error}</p>}
+			{showPasswordRequirements && (
+				<p className="mt-1 text-xs text-skin-tertiary">
+					{i18n.mustContainAtLeast8Characters1UppercaseLetterAnd1Number}
+				</p>
+			)}
 		</div>
 	);
 };

src/containers/TextInput.tsx

@@ -174,6 +174,9 @@ const en = {
 	none: 'None',
 	noPrice: 'No Price',
 	waitForWalletBalanceToLoad: 'Wait for wallet balance to load',
+	mustContainAtLeast8Characters1UppercaseLetterAnd1Number:
+		'Must contain at least 8 characters, 1 uppercase letter, and 1 number.',
+	invalidPassword: 'Invalid password',
 	test: 'test',
 	'': '',
 };

src/i18n/en.ts

@@ -39,7 +39,13 @@ const Create2 = ({ i18n, sendBgScriptPortMessage, setState, secrets }: State) =>
 					}
 				}}
 			/>
-			<TextInput password containerClassName="mt-4" _ref={passwordRef} label={i18n.password} />
+			<TextInput
+				password
+				showPasswordRequirements
+				containerClassName="mt-4"
+				_ref={passwordRef}
+				label={i18n.password}
+			/>
 			<TextInput
 				password
 				containerClassName="mt-4"

src/pages/Create2.tsx

@@ -40,7 +40,7 @@ const Import = ({ i18n, sendBgScriptPortMessage, setState }: State) => {
 					}
 				}}
 			/>
-			<TextInput password _ref={passwordRef} label={i18n.password} />
+			<TextInput password showPasswordRequirements _ref={passwordRef} label={i18n.password} />
 			<TextInput password _ref={confirmPasswordRef} label={i18n.confirmPassword} />
 			{/* <p className="mt-1 text-skin-tertiary text-sm">{i18n.mustContainAtLeast8Characters}</p> */}
 			<div className="fx">

src/pages/Import.tsx

@@ -221,7 +221,12 @@ const Settings = ({
 					}}
 				>
 					<div className="p-3 space-y-3">
-						<TextInput password _ref={passwordRef} label={i18n.currentPassword} />
+						<TextInput
+							password
+							showPasswordRequirements
+							_ref={passwordRef}
+							label={i18n.currentPassword}
+						/>
 						<TextInput password _ref={newPasswordRef} label={i18n.newPassword} />
 						<TextInput password _ref={confirmNewPasswordRef} label={i18n.confirmNewPassword} />
 					</div>