From 47aa3c52110c9d995c79a0030eba0b2e2998ad46 Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Thu, 21 Aug 2025 18:18:16 -0700 Subject: [PATCH 1/8] WIP commit for creating a QR code to share webId with others. --- package-lock.json | 32 ++++++++++++++ package.json | 1 + src/components/Profile/CreateQRCode.jsx | 49 +++++++++++++++++++++ src/components/Profile/ProfileComponent.jsx | 22 +++++---- 4 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 src/components/Profile/CreateQRCode.jsx diff --git a/package-lock.json b/package-lock.json index 3b919ebdf..de4b89ae6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-paginate": "^8.2.0", + "react-qr-code": "^2.0.18", "react-router-dom": "^6.10.0", "react-router-hash-link": "^2.4.3", "react-webcam": "^7.2.0", @@ -11631,6 +11632,11 @@ "node": ">=6" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/querystringify": { "version": "2.2.0", "dev": true, @@ -12031,6 +12037,18 @@ "react": "^16 || ^17 || ^18" } }, + "node_modules/react-qr-code": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz", + "integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "dev": true, @@ -22587,6 +22605,11 @@ "version": "2.3.1", "dev": true }, + "qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "querystringify": { "version": "2.2.0", "dev": true @@ -22905,6 +22928,15 @@ "prop-types": "^15" } }, + "react-qr-code": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz", + "integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==", + "requires": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + } + }, "react-refresh": { "version": "0.14.0", "dev": true diff --git a/package.json b/package.json index 38fc8a926..1e99b8546 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-paginate": "^8.2.0", + "react-qr-code": "^2.0.18", "react-router-dom": "^6.10.0", "react-router-hash-link": "^2.4.3", "react-webcam": "^7.2.0", diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx new file mode 100644 index 000000000..854004cb6 --- /dev/null +++ b/src/components/Profile/CreateQRCode.jsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import QRCode from 'react-qr-code'; +import QrCode2Icon from '@mui/icons-material/QrCode2'; +// import Box from '@mui/material/Box'; +// import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import IconButton from '@mui/material/IconButton'; +// import Typography from '@mui/material/Typography'; +// import useMediaQuery from '@mui/material/useMediaQuery'; +// import { useTheme } from '@mui/material/styles'; + +/** + * + * @param root0 + * @param root0.webId + */ +const CreateQRCode = ({ webId }) => { + console.log('WebId: ', webId); + const [qrIconClicked, setQrIconClicked] = useState(false); + + const createQrCode = () => { + setQrIconClicked(!qrIconClicked); + }; + + return ( + { + createQrCode(); + }} + > + + {qrIconClicked ? ( +
+ +
+ ) : ( + '' + )} + + ); +}; + +export default CreateQRCode; diff --git a/src/components/Profile/ProfileComponent.jsx b/src/components/Profile/ProfileComponent.jsx index 5d337e412..8454fbe61 100644 --- a/src/components/Profile/ProfileComponent.jsx +++ b/src/components/Profile/ProfileComponent.jsx @@ -18,6 +18,7 @@ import { saveToClipboard } from '@utils'; import ProfileInputField from './ProfileInputField'; import ProfileEditButtonGroup from './ProfileEditButtonGroup'; import ProfileImageField from './ProfileImageField'; +import CreateQRCode from './CreateQRCode'; /** * UserProfile - Component is a component that renders the user's profile on @@ -135,15 +136,18 @@ const ProfileComponent = ({ contactProfile, webId }) => { inputName="WebId" inputValue={webId} endAdornment={ - { - saveToClipboard(webId, 'webId copied to clipboard', addNotification); - }} - > - - + <> + { + saveToClipboard(webId, 'webId copied to clipboard', addNotification); + }} + > + + + + } /> From 973dec9f482ce3a6a0d34d96c84e95039083c8d5 Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Fri, 22 Aug 2025 14:30:23 -0700 Subject: [PATCH 2/8] Display QR code in a modal. --- src/components/Profile/CreateQRCode.jsx | 65 +++++++++++++++++++------ 1 file changed, 51 insertions(+), 14 deletions(-) diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx index 854004cb6..45d4b294a 100644 --- a/src/components/Profile/CreateQRCode.jsx +++ b/src/components/Profile/CreateQRCode.jsx @@ -1,24 +1,35 @@ import React, { useState } from 'react'; import QRCode from 'react-qr-code'; import QrCode2Icon from '@mui/icons-material/QrCode2'; -// import Box from '@mui/material/Box'; -// import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import IconButton from '@mui/material/IconButton'; -// import Typography from '@mui/material/Typography'; -// import useMediaQuery from '@mui/material/useMediaQuery'; -// import { useTheme } from '@mui/material/styles'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + Stack, + Typography +} from '@mui/material'; /** * * @param root0 * @param root0.webId */ + const CreateQRCode = ({ webId }) => { - console.log('WebId: ', webId); const [qrIconClicked, setQrIconClicked] = useState(false); + const [docUrl, setDocUrl] = useState(null); const createQrCode = () => { setQrIconClicked(!qrIconClicked); + const trimmedWebId = webId && webId.includes('#') ? webId.split('#')[0] : webId; + setDocUrl(trimmedWebId); + }; + + const closeModal = () => { + setQrIconClicked(false); }; return ( @@ -31,14 +42,40 @@ const CreateQRCode = ({ webId }) => { > {qrIconClicked ? ( -
- -
+ + + Share your WebID + + + +
+
+ +
+
+ + {docUrl} + + + + + + + ) : ( '' )} From 6e3dd192159a85db7cb8edfe664b4d54eb50ac8e Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Fri, 22 Aug 2025 15:21:10 -0700 Subject: [PATCH 3/8] Make 'close' button width responsive. --- src/components/Profile/CreateQRCode.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx index 45d4b294a..5a071e466 100644 --- a/src/components/Profile/CreateQRCode.jsx +++ b/src/components/Profile/CreateQRCode.jsx @@ -71,7 +71,13 @@ const CreateQRCode = ({ webId }) => { - From cb073d4fee111a51dac7bdd11cf74d4d71c3fd3d Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Fri, 22 Aug 2025 15:39:24 -0700 Subject: [PATCH 4/8] Change location of QR code feature and style as button. --- src/components/Profile/CreateQRCode.jsx | 21 ++++---- src/components/Profile/ProfileComponent.jsx | 60 +++++++++++---------- 2 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx index 5a071e466..fbe598002 100644 --- a/src/components/Profile/CreateQRCode.jsx +++ b/src/components/Profile/CreateQRCode.jsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import QRCode from 'react-qr-code'; import QrCode2Icon from '@mui/icons-material/QrCode2'; -import IconButton from '@mui/material/IconButton'; import { Dialog, DialogTitle, @@ -33,14 +32,16 @@ const CreateQRCode = ({ webId }) => { }; return ( - { - createQrCode(); - }} - > - + <> + {qrIconClicked ? ( { ) : ( '' )} - + ); }; diff --git a/src/components/Profile/ProfileComponent.jsx b/src/components/Profile/ProfileComponent.jsx index 8454fbe61..f99eb6e32 100644 --- a/src/components/Profile/ProfileComponent.jsx +++ b/src/components/Profile/ProfileComponent.jsx @@ -136,42 +136,44 @@ const ProfileComponent = ({ contactProfile, webId }) => { inputName="WebId" inputValue={webId} endAdornment={ - <> - { - saveToClipboard(webId, 'webId copied to clipboard', addNotification); - }} - > - - - - - } - /> - - {!contactProfile && ( - - - - Your Invite Link - { - saveToClipboard( - `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`, - 'Invite link copied to clipboard', - addNotification - ); + saveToClipboard(webId, 'webId copied to clipboard', addNotification); }} > - - + } + /> + + {!contactProfile && ( + <> + + + + Your Invite Link + + { + saveToClipboard( + `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`, + 'Invite link copied to clipboard', + addNotification + ); + }} + > + + + + + + + + )} From 664105078afe4e08826eafb6afc077daf58e37ad Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Fri, 22 Aug 2025 16:16:04 -0700 Subject: [PATCH 5/8] Update build artifacts. --- .github/workflows/ci.yml | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index debc019ce..a902635ed 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -36,12 +36,18 @@ jobs: with: path: './dist' + - name: Upload build artifacts + uses: actions/upload-artifact@v4 + with: + name: build-artifacts + path: ./dist + lint: name: Lint runs-on: ubuntu-latest permissions: contents: read - steps: + steps: - name: Code Checkout uses: actions/checkout@v3 - name: Setup Node.js @@ -61,7 +67,7 @@ jobs: runs-on: ubuntu-latest permissions: contents: read - steps: + steps: - name: Code Checkout uses: actions/checkout@v3 - name: Setup Node.js From f2ee7f671e90e8fc5cd02d8c7ac4331baa94b596 Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Fri, 22 Aug 2025 16:23:45 -0700 Subject: [PATCH 6/8] Update upload-pages-artifact to v2. --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a902635ed..875a36cb1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,7 +32,7 @@ jobs: npm run build - name: Upload frontend assets - uses: actions/upload-pages-artifact@v1 + uses: actions/upload-pages-artifact@v2 with: path: './dist' From b33c34225aee6c99bc0998894ba3f44c51e9e939 Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Tue, 26 Aug 2025 14:44:35 -0700 Subject: [PATCH 7/8] Revert commits made to ci.yml. This reverts commit 664105078afe4e08826eafb6afc077daf58e37ad. --- .github/workflows/ci.yml | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 875a36cb1..debc019ce 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,22 +32,16 @@ jobs: npm run build - name: Upload frontend assets - uses: actions/upload-pages-artifact@v2 + uses: actions/upload-pages-artifact@v1 with: path: './dist' - - name: Upload build artifacts - uses: actions/upload-artifact@v4 - with: - name: build-artifacts - path: ./dist - lint: name: Lint runs-on: ubuntu-latest permissions: contents: read - steps: + steps: - name: Code Checkout uses: actions/checkout@v3 - name: Setup Node.js @@ -67,7 +61,7 @@ jobs: runs-on: ubuntu-latest permissions: contents: read - steps: + steps: - name: Code Checkout uses: actions/checkout@v3 - name: Setup Node.js From 60ba1787d6ddc8a62ae5e18909ec3ca903fe8108 Mon Sep 17 00:00:00 2001 From: Brian Scherner Date: Tue, 26 Aug 2025 15:03:16 -0700 Subject: [PATCH 8/8] Update component documentation. --- src/components/Profile/CreateQRCode.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Profile/CreateQRCode.jsx b/src/components/Profile/CreateQRCode.jsx index fbe598002..120d82bd5 100644 --- a/src/components/Profile/CreateQRCode.jsx +++ b/src/components/Profile/CreateQRCode.jsx @@ -13,8 +13,11 @@ import { /** * - * @param root0 - * @param root0.webId + * @memberof Profile + * @name CreateQRCode + * @param {object} Props - React props + * @param {string} [Props.webId] - The webId of the user's profile + * @returns {React.JSX.Element} The CreateQRCode Modal */ const CreateQRCode = ({ webId }) => {