From bce18a16145a697282243743a5eb03ee16ec3187 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Thu, 10 Aug 2023 02:45:45 -0700
Subject: [PATCH] Desktop: Resolves #8493: Draw red border around missing
 encryption key passwords (#8636)

---
 .../EncryptionConfigScreen.tsx                  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx b/packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx
index 4e83fd16b..3add1187e 100644
--- a/packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx
+++ b/packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx
@@ -94,6 +94,12 @@ const EncryptionConfigScreen = (props: Props) => {
 			borderColor: theme.dividerColor,
 		};
 
+		const missingPasswordCellStyle = {
+			...theme.textStyle,
+			border: '3px solid',
+			borderColor: theme.colorError,
+		};
+
 		const password = inputPasswords[mk.id] ? inputPasswords[mk.id] : '';
 		const isActive = props.activeMasterKeyId === mk.id;
 		const activeIcon = isActive ? '✔' : '';
@@ -108,8 +114,15 @@ const EncryptionConfigScreen = (props: Props) => {
 				);
 			} else {
 				return (
-					<td style={theme.textStyle}>
-						<input type="password" style={passwordStyle} value={password} onChange={event => onInputPasswordChange(mk, event.target.value)} />{' '}
+					<td style={missingPasswordCellStyle}>
+						<input
+							type="password"
+							placeholder={_('Enter password')}
+							style={passwordStyle}
+							value={password}
+							onChange={event => onInputPasswordChange(mk, event.target.value)}
+						/>
+						{' '}
 						<button style={theme.buttonStyle} onClick={() => onSavePasswordClick(mk, { ...props.passwords, ...inputPasswords })}>
 							{_('Save')}
 						</button>