feat: add key on encrypt popup view

src/default-popup/components/decrypt/decrypt-message.component.tsx

@@ -50,7 +50,9 @@ export const DecryptMessageComponent: FunctionComponent<DecryptMessageComponentP
 
   return (
     <div>
-      <Typography fontSize="2em">Decrypt</Typography>
+      <Typography fontSize="1.5em" fontWeight="bold" style={{ marginTop: 10, marginBottom: 10 }}>
+        Decrypt
+      </Typography>
       <div>
         <TextareaAutosize
           value={message}
@@ -66,7 +68,7 @@ export const DecryptMessageComponent: FunctionComponent<DecryptMessageComponentP
           <Typography>Check signature</Typography>
           <Checkbox checked={checked} onChange={handleCheckSignatureChange} />
         </div>
-        <Button variant="outlined" onClick={handleDecrypt}>
+        <Button variant="outlined" onClick={handleDecrypt} style={{ marginTop: 10 }}>
           Decrypt
         </Button>
       </div>

src/default-popup/components/encrypt/encrypt-add-key.component.tsx

@@ -0,0 +1,105 @@
+/*
+ * This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
+ * Copyright (c) 2023 Michal Szczepanski.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { COLOR_DEFAULT_BORDER, DEFAULT_BORDER_RADIUS } from '../../../common/components/colors';
+import React, { FunctionComponent, useState } from 'react';
+import Button from '@mui/material/Button';
+import { CryptoStore } from '../../../common/store/crypto.store';
+import { StyledInput } from '../../../common/components/react/styled.input';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import Typography from '@mui/material/Typography';
+
+interface EncryptAddKeyComponentProps {
+  hideComponent: () => void;
+}
+
+const validatePublicKey = (key: string): boolean => {
+  if (!key) return false;
+  return true;
+};
+
+const inputContainerStyle = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: 5,
+  borderRadius: DEFAULT_BORDER_RADIUS,
+  margin: '5px 10px 0px 0px'
+};
+
+export const EncryptAddKeyComponent: FunctionComponent<EncryptAddKeyComponentProps> = (props) => {
+  const [username, setUsername] = useState<string>('');
+  const [publicKey, setPublicKey] = useState<string>('');
+
+  const handleAdd = async () => {
+    if (!username) {
+      alert('Empty Username');
+      return;
+    }
+    if (!validatePublicKey(publicKey)) {
+      alert('Invalid public key');
+      return;
+    }
+    const added = await CryptoStore.addUserPublicKey(username, publicKey);
+    if (!added) {
+      alert('Username with key already exists');
+      return;
+    }
+    setUsername('');
+    setPublicKey('');
+    props.hideComponent();
+  };
+
+  return (
+    <div>
+      <div style={{ width: '100%' }}>
+        <Typography fontSize="1.5em" fontWeight="bold" style={{ marginTop: 10 }}>
+          Add public key
+        </Typography>
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div style={{ border: COLOR_DEFAULT_BORDER, ...inputContainerStyle }}>
+            <StyledInput
+              onChange={(e) => setUsername(e.target.value)}
+              style={{ width: 288 }}
+              value={username}
+              placeholder="Username"
+            />
+          </div>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+          <Typography fontSize="1.2em" style={{ marginTop: 10, marginBottom: 10 }}>
+            Armored Public Key
+          </Typography>
+          <TextareaAutosize
+            cols={33}
+            minRows={12}
+            maxRows={12}
+            onChange={(e) => setPublicKey(e.target.value)}
+            value={publicKey}
+            placeholder="Public key"
+          />
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'row', marginTop: 15, justifyContent: 'space-between' }}>
+          <Button sx={{ width: '40%' }} variant="outlined" onClick={() => props.hideComponent()}>
+            Cancel
+          </Button>
+          <Button sx={{ width: '40%' }} variant="outlined" onClick={handleAdd}>
+            Add Key
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/default-popup/components/encrypt/encrypt-message.component.tsx

@@ -16,14 +16,17 @@
  */
 import { Autocomplete, TextField } from '@mui/material';
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
 import Button from '@mui/material/Button';
 import { CryptoStore } from '../../../common/store/crypto.store';
 import { EncryptMessage } from '../component-model';
+import IconButton from '@mui/material/IconButton';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Typography from '@mui/material/Typography';
 
 interface EncryptMessageComponentProps {
   encryptCallback: (message: EncryptMessage) => void;
+  addCallback: () => void;
   message: EncryptMessage;
 }
 
@@ -62,9 +65,12 @@ export const EncryptMessageComponent: FunctionComponent<EncryptMessageComponentP
           size="small"
           value={username}
           onChange={handleUsernameChange}
-          renderInput={(params) => <TextField style={{ width: '300px' }} {...params} label="user" />}
+          renderInput={(params) => <TextField style={{ width: '260px' }} {...params} label="user" />}
           options={usernameList}
         />
+        <IconButton onClick={() => props.addCallback()}>
+          <AddIcon />
+        </IconButton>
       </div>
       <div style={{ marginTop: 10 }}>
         <TextareaAutosize

src/default-popup/components/encrypt/encrypt.component.tsx

@@ -17,13 +17,15 @@
 import React, { useState } from 'react';
 import { CryptoEncryptCommand } from '../../../common/command/crypto/crypto-encrypt.command';
 import { CryptoStore } from '../../../common/store/crypto.store';
+import { EncryptAddKeyComponent } from './encrypt-add-key.component';
 import { EncryptMessage } from '../component-model';
 import { EncryptMessageComponent } from './encrypt-message.component';
 import { EncryptedValueComponent } from './encrypted-value.component';
 
 enum ComponentState {
   ENCRYPT_MESSAGE = 'ENCRYPT_MESSAGE',
-  ENCRYPTED_VALUE = 'ENCRYPTED_VALUE'
+  ENCRYPTED_VALUE = 'ENCRYPTED_VALUE',
+  ADD_KEY = 'ADD_KEY'
 }
 
 export const EncryptComponent = () => {
@@ -37,10 +39,14 @@ export const EncryptComponent = () => {
     setState(ComponentState.ENCRYPTED_VALUE);
   };
 
-  const handleBackToMessage = () => {
+  const setEncryptMessageState = () => {
     setState(ComponentState.ENCRYPT_MESSAGE);
   };
 
+  const handleNewKey = () => {
+    setState(ComponentState.ADD_KEY);
+  };
+
   const encryptMessage = async (data: EncryptMessage) => {
     const { username, message } = data;
     const key = await CryptoStore.getUserPublicKey(username);
@@ -53,14 +59,18 @@ export const EncryptComponent = () => {
     }
   };
 
-  return (
-    <div>
-      <div style={{ display: state == ComponentState.ENCRYPT_MESSAGE ? 'inline-block' : 'none' }}>
-        <EncryptMessageComponent message={message} encryptCallback={handleEncrypt} />
-      </div>
-      <div style={{ display: state == ComponentState.ENCRYPTED_VALUE ? 'inline-block' : 'none' }}>
-        <EncryptedValueComponent backToMessageCallback={handleBackToMessage} message={encryptedMessage} />
-      </div>
-    </div>
-  );
+  const getComponent = (state: ComponentState) => {
+    switch (state) {
+      case ComponentState.ENCRYPT_MESSAGE:
+        return <EncryptMessageComponent message={message} encryptCallback={handleEncrypt} addCallback={handleNewKey} />;
+      case ComponentState.ENCRYPTED_VALUE:
+        return <EncryptedValueComponent backToMessageCallback={setEncryptMessageState} message={encryptedMessage} />;
+      case ComponentState.ADD_KEY:
+        return <EncryptAddKeyComponent hideComponent={setEncryptMessageState} />;
+    }
+  };
+
+  const component = getComponent(state);
+
+  return <div>{component}</div>;
 };