Merge pull request #117 from AnoldGH/qr-code

Qr-code display for safebag and backdrop around existing ones
UCLA-IRL · Jul 23, 2024 · 011dd6e · 011dd6e
2 parents 740a44e + aa665cc
commit 011dd6e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 11 deletions.
diff --git a/src/components/workspace/app-namespace.tsx b/src/components/workspace/app-namespace.tsx
@@ -1,4 +1,14 @@
-import { Card, CardContent, CardHeader, Divider, TextField, IconButton, Typography } from '@suid/material'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  TextField,
+  IconButton,
+  Typography,
+  Backdrop,
+  Button,
+} from '@suid/material'
 import {
   ExpandLess as ExpandLessIcon,
   ExpandMore as ExpandMoreIcon,
@@ -24,6 +34,7 @@ export default function AppNamespace(props: {
   const [edited, setEdited] = createSignal(false)
   //open or close video stream
   const [isPopupOpen, setPopupOpen] = createSignal(false)
+  const [taQrOpen, setTaQrOpen] = createSignal(false)
 
   // const readyToImport = () => !readOnly() && nameStr().length === 0
 
@@ -137,7 +148,14 @@ export default function AppNamespace(props: {
       <Show when={expanded()}>
         <Divider />
         <CardContent>
-          <div style={{ display: 'flex', 'flex-direction': 'row', 'align-items': 'center' }}>
+          <div
+            style={{
+              display: 'flex',
+              'flex-direction': 'column',
+              'align-items': 'flex-end',
+              'row-gap': '10px',
+            }}
+          >
             <TextField
               fullWidth
               required
@@ -158,9 +176,17 @@ export default function AppNamespace(props: {
               value={value()}
               onChange={(event) => onChange(event.target.value)}
             />
-            <div>
+            <Button onClick={() => setTaQrOpen(true)} variant="contained">
+              {' '}
+              Show QR Code{' '}
+            </Button>
+            <Backdrop
+              sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+              open={taQrOpen()}
+              onClick={() => setTaQrOpen(false)}
+            >
               <CertQrCode value={value()} />
-            </div>
+            </Backdrop>
           </div>
         </CardContent>
       </Show>

diff --git a/src/components/workspace/boot-safebag.tsx b/src/components/workspace/boot-safebag.tsx
@@ -1,10 +1,21 @@
-import { Card, CardContent, CardHeader, Divider, TextField, Stack, IconButton, Typography } from '@suid/material'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  TextField,
+  IconButton,
+  Typography,
+  Button,
+  Backdrop,
+} from '@suid/material'
 import { ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon } from '@suid/icons-material'
 import { Match, Show, Switch, createEffect, createSignal } from 'solid-js'
 import { base64ToBytes } from '../../utils'
 import { Decoder } from '@ndn/tlv'
 import { SafeBag } from '@ndn/ndnsec'
 import { Certificate } from '@ndn/keychain'
+import CertQrCode from './qr-gen'
 
 export default function BootSafebag(props: {
   setCertificate: (value: Certificate | undefined) => void
@@ -18,6 +29,7 @@ export default function BootSafebag(props: {
   const [errorText, setErrorText] = createSignal('')
   const [pwdErrorText, setPwdErrorText] = createSignal('')
   const [safeBag, setSafeBag] = createSignal<SafeBag>()
+  const [sbagQrOpen, setSbagQrOpen] = createSignal(false)
 
   // Disable when bootstrapping
   const readOnly = () => props.inProgress
@@ -111,7 +123,14 @@ export default function BootSafebag(props: {
       <Show when={expanded()}>
         <Divider />
         <CardContent>
-          <Stack spacing={2}>
+          <div
+            style={{
+              display: 'flex',
+              'flex-direction': 'column',
+              'align-items': 'flex-end',
+              'row-gap': '10px',
+            }}
+          >
             <TextField
               fullWidth
               required
@@ -144,7 +163,18 @@ export default function BootSafebag(props: {
               value={safebagText()}
               onChange={(event) => setSafebagText(event.target.value)}
             />
-          </Stack>
+            <Button onClick={() => setSbagQrOpen(true)} variant="contained">
+              {' '}
+              Show QR Code{' '}
+            </Button>
+            <Backdrop
+              sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+              open={sbagQrOpen()}
+              onClick={() => setSbagQrOpen(false)}
+            >
+              <CertQrCode value={safebagText()} />
+            </Backdrop>
+          </div>
         </CardContent>
       </Show>
     </Card>

diff --git a/src/components/workspace/own-certificate.tsx b/src/components/workspace/own-certificate.tsx
@@ -1,4 +1,14 @@
-import { Card, CardContent, CardHeader, Divider, TextField, IconButton, Typography } from '@suid/material'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  TextField,
+  IconButton,
+  Typography,
+  Button,
+  Backdrop,
+} from '@suid/material'
 import { ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon } from '@suid/icons-material'
 import { Show, createEffect, createSignal } from 'solid-js'
 import { bytesToBase64 } from '../../utils'
@@ -10,6 +20,7 @@ export default function OwnCertificate(props: { certificate: Certificate | undef
   const [expanded, setExpanded] = createSignal(true)
   const [nameStr, setNameStr] = createSignal('')
   const [certText, setCertText] = createSignal('')
+  const [certQrOpen, setCertQrOpen] = createSignal(false)
 
   createEffect(() => {
     const cert = props.certificate
@@ -54,7 +65,7 @@ export default function OwnCertificate(props: { certificate: Certificate | undef
       <Show when={expanded()}>
         <Divider />
         <CardContent>
-          <div style={{ display: 'flex', 'flex-direction': 'row', 'align-items': 'center' }}>
+          <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-end', 'row-gap': '10px' }}>
             <TextField
               fullWidth
               multiline
@@ -71,9 +82,17 @@ export default function OwnCertificate(props: { certificate: Certificate | undef
               }}
               value={certText()}
             />
-            <div>
+            <Button onClick={() => setCertQrOpen(true)} variant="contained">
+              {' '}
+              Show QR Code{' '}
+            </Button>
+            <Backdrop
+              sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+              open={certQrOpen()}
+              onClick={() => setCertQrOpen(false)}
+            >
               <CertQrCode value={certText()} />
-            </div>
+            </Backdrop>
           </div>
         </CardContent>
       </Show>