Merge branch 'daniel-schwartz-k:main' into main

Notes.md

@@ -0,0 +1,12 @@
+# Notes
+
+## Fix me
+
+
+
+## Todo
+
+1. add Encrypted secrets option
+   each secret can have an additional encryption key
+   add input for encryption key
+2. add Verified Invalid text to secret

src/components/common/textFieldCopy.tsx

@@ -9,26 +9,35 @@ export type ITextFieldCopyProps = Omit<TextFieldProps, 'onChange'> & {
 
 export default function TextFieldCopy(props: ITextFieldCopyProps) {
   const { value, error, onChange, ariaLabel, ...rest } = props
-  const [isHovered, setIsHovered] = useState(false)
+  const [isActive, setIsActive] = useState(false)
+
+  const onFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    setIsActive(true)
+    rest.onFocus?.(e)
+  }
+  const onBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    setIsActive(false)
+    rest.onBlur?.(e)
+  }
 
   return (
     <TextField
       {...rest}
       // If we use "DefaultValue" we can't control the TextField
       // If we use "value" in the TextField then we loose undo/redo and have a cursor bug.
-      defaultValue={isHovered ? value : undefined}
-      value={!isHovered ? value : undefined}
+      defaultValue={isActive ? value : undefined}
+      value={!isActive ? value : undefined}
       multiline
       error={error}
       fullWidth={true}
       spellCheck={false}
       onChange={(e) => onChange(e.target.value)}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onFocus={onFocus}
+      onBlur={onBlur}
       sx={{ '& textarea.MuiInputBase-inputMultiline': { mr: 5 } }}
       inputProps={ariaLabel ? { 'aria-label': ariaLabel } : undefined}
       InputProps={{
-        endAdornment: <CopyButton value={value} visible={!error && isHovered} />,
+        endAdornment: <CopyButton value={value} visible={!error && isActive} />,
       }}
     />
   )

src/components/encoded/encoded.tsx

@@ -25,7 +25,7 @@ export default function Encoded(props: IEncodedProps) {
       <StyledHeader variant="h4">{'Encoded'}</StyledHeader>
       <StyledCard>
         <TextFieldCopy
-          value={value}
+          value={isAppStart ? '' : value}
           placeholder="Paste JWT.."
           rows={10}
           error={error}

src/components/secret/secret.tsx

@@ -28,7 +28,7 @@ export default function Secret(props: ISecretProps) {
 
   return (
     <>
-      <StyledHeader variant="h5">{'Secret'}</StyledHeader>
+      <StyledHeader variant="h5">{'Verify Signature'}</StyledHeader>
       <StyledCard>
         <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
           <Grid item md={4} xs={6}>

src/src/state.ts

@@ -31,7 +31,7 @@ export const DefaultState = {
     name: 'John Doe',
     iat: 1516239022,
   }),
-  secret: 'YOUR SECRET HERE',
+  secret: 'YOUR-SECRET-HERE',
   isVerified: false,
 }