diff --git a/inji-web/.env b/inji-web/.env index 114aaaa..75ff978 100644 --- a/inji-web/.env +++ b/inji-web/.env @@ -1 +1 @@ -REACT_APP_MIMOTO_URL=http://localhost:3010 +#REACT_APP_MIMOTO_URL=http://localhost:3010 diff --git a/inji-web/package-lock.json b/inji-web/package-lock.json index d3df0b4..c96aca3 100644 --- a/inji-web/package-lock.json +++ b/inji-web/package-lock.json @@ -21,6 +21,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", + "react-toastify": "^10.0.5", + "styled-components": "^6.1.8", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -5830,6 +5832,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -7434,6 +7441,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -8017,6 +8032,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -8207,6 +8230,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -20186,6 +20219,18 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -20984,6 +21029,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -21516,6 +21566,80 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "node_modules/styled-components/node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -27456,6 +27580,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" + }, "@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -28646,6 +28775,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -29080,6 +29214,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -29187,6 +29326,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -37881,6 +38030,14 @@ } } }, + "react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "requires": { + "clsx": "^2.1.0" + } + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -38458,6 +38615,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -38857,6 +39019,54 @@ "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", "requires": {} }, + "styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "requires": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "requires": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, + "tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + } + } + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/inji-web/package.json b/inji-web/package.json index 68fd6a5..0966a88 100644 --- a/inji-web/package.json +++ b/inji-web/package.json @@ -16,6 +16,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", + "react-toastify": "^10.0.5", + "styled-components": "^6.1.8", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/inji-web/public/favicon.ico b/inji-web/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/inji-web/public/favicon.ico and /dev/null differ diff --git a/inji-web/public/inji-logo.png b/inji-web/public/inji-logo.png deleted file mode 100644 index e9dacc6..0000000 Binary files a/inji-web/public/inji-logo.png and /dev/null differ diff --git a/inji-web/public/logo192.png b/inji-web/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/inji-web/public/logo192.png and /dev/null differ diff --git a/inji-web/public/logo512.png b/inji-web/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/inji-web/public/logo512.png and /dev/null differ diff --git a/inji-web/public/manifest.json b/inji-web/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/inji-web/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/inji-web/public/robots.txt b/inji-web/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/inji-web/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/inji-web/src/Router.js b/inji-web/src/Router.js index 92dcf01..35fea1a 100644 --- a/inji-web/src/Router.js +++ b/inji-web/src/Router.js @@ -1,7 +1,8 @@ import { createBrowserRouter } from "react-router-dom"; -import Issuer from "./pages/IssuerPage"; -import Home from "./pages/Home"; -import Certificate from "./pages/Certificate"; +import Issuer from "./pages/IssuerPage/IssuersPage"; +import Home from "./pages/Home/HomePage"; +import Certificate from "./pages/Certificate/CertificatePage"; +import {HelpPage} from "./pages/Help/HelpPage"; export const router = createBrowserRouter([ { @@ -18,6 +19,10 @@ export const router = createBrowserRouter([ }, { path: "/issuers/:issuerId/certificate/:certificateId", - element: , + element: , + }, + { + path: "/help", + element: , }, ]); diff --git a/inji-web/src/pages/Certificate/DisplayComponent.jsx b/inji-web/src/components/Certificate/DisplayComponent.jsx similarity index 100% rename from inji-web/src/pages/Certificate/DisplayComponent.jsx rename to inji-web/src/components/Certificate/DisplayComponent.jsx diff --git a/inji-web/src/pages/Certificate/DisplayComponent.test.js b/inji-web/src/components/Certificate/DisplayComponent.test.js similarity index 100% rename from inji-web/src/pages/Certificate/DisplayComponent.test.js rename to inji-web/src/components/Certificate/DisplayComponent.test.js diff --git a/inji-web/src/pages/Certificate/Header.js b/inji-web/src/components/Certificate/Header.js similarity index 93% rename from inji-web/src/pages/Certificate/Header.js rename to inji-web/src/components/Certificate/Header.js index 068db61..f7cdbc4 100644 --- a/inji-web/src/pages/Certificate/Header.js +++ b/inji-web/src/components/Certificate/Header.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React from 'react'; import {Grid, IconButton, Typography, Autocomplete, TextField} from "@mui/material"; import styled from "@emotion/styled"; import Box from "@mui/material/Box"; @@ -30,7 +30,7 @@ const CertificateTitle = styled(Typography)` font-family: Inter; `; -function Header() { +function Header({title}) { const navigate = useNavigate(); const { issuerId, certificateId } = useParams(); @@ -43,7 +43,7 @@ function Header() { - {issuerId} + {title ? title : issuerId} diff --git a/inji-web/src/pages/Certificate/Header.test.js b/inji-web/src/components/Certificate/Header.test.js similarity index 100% rename from inji-web/src/pages/Certificate/Header.test.js rename to inji-web/src/components/Certificate/Header.test.js diff --git a/inji-web/src/pages/Certificate/ResultBackButton.jsx b/inji-web/src/components/Certificate/ResultBackButton.jsx similarity index 100% rename from inji-web/src/pages/Certificate/ResultBackButton.jsx rename to inji-web/src/components/Certificate/ResultBackButton.jsx diff --git a/inji-web/src/pages/Certificate/ResultBackButton.test.js b/inji-web/src/components/Certificate/ResultBackButton.test.js similarity index 100% rename from inji-web/src/pages/Certificate/ResultBackButton.test.js rename to inji-web/src/components/Certificate/ResultBackButton.test.js diff --git a/inji-web/src/utils/LoadingScreen.css b/inji-web/src/components/Common/LoadingScreen.css similarity index 100% rename from inji-web/src/utils/LoadingScreen.css rename to inji-web/src/components/Common/LoadingScreen.css diff --git a/inji-web/src/utils/LoadingScreen.js b/inji-web/src/components/Common/LoadingScreen.js similarity index 100% rename from inji-web/src/utils/LoadingScreen.js rename to inji-web/src/components/Common/LoadingScreen.js diff --git a/inji-web/src/components/Help/HelpContent.jsx b/inji-web/src/components/Help/HelpContent.jsx new file mode 100644 index 0000000..a56fed9 --- /dev/null +++ b/inji-web/src/components/Help/HelpContent.jsx @@ -0,0 +1,59 @@ +import {useState} from "react"; +import {HelpContentItem} from "./HelpContentItem"; + +const data = [ + { + panelId: "panel1", + panelHeading: "What is credential?", + panelContent: "Verifiable credentials are digital documents that help users to share information like identity or qualifications to the service provider which can be instantly verified. They're issued by trusted entities and can be cryptographically verified for authenticity. These credentials streamline identity verification processes." + }, + { + panelId: "panel2", + panelHeading: "Who are issuers?", + panelContent: "Issuers are either governmental bodies or entities trusted by the government, responsible for providing verifiable credentials in PDF format to residents upon request." + }, + { + panelId: "panel3", + panelHeading: "How can I download a credential in Inji Web?", + panelContent: "Step1: Search & choose an Issuer from the landing page and select a credential type.\n" + + "\n" + + "Step2: In the authentication page, provide required details\n" + + "\n" + + "Step3: PDF format of the verifiable credential will be downloaded into the system." + }, + { + panelId: "panel4", + panelHeading: "What details I need to provide to download my credential?", + panelContent: "The credential issuer would have provided details like UIN/VID in case of MOSIP National ID or Policy number, Name and DoB for an Insurance card. This information has to be fed to the authentication system to enable download." + }, + { + panelId: "panel5", + panelHeading: "Where can I find my credential?", + panelContent: "The verifiable credential will be downloaded into the Downloads folder of your system." + }, + { + panelId: "panel6", + panelHeading: "What details are present in the PDF credential?", + panelContent: "Details collected as part of the registration process will be presented in the PDF. At present, for Insurance use case, one can find Policy details like Name, DoB, " + }, + { + panelId: "panel7", + panelHeading: "Why I am not finding the list of issuers?", + panelContent: "We’re sorry you stumbled upon an error. However, please check if the issuers' end point is available. If the end point health check is good, please check if the issuers list is configured in the mimoto-issuers config.json." + } +] + +export const HelpContent = () => { + + const [expanded, setExpanded] = useState('panel1'); + const handleChange = (panel) => (event, isExpanded) => { + setExpanded(isExpanded ? panel : false); + }; + + return data.map(entry => + ) +} diff --git a/inji-web/src/components/Help/HelpContentItem.jsx b/inji-web/src/components/Help/HelpContentItem.jsx new file mode 100644 index 0000000..dc7029b --- /dev/null +++ b/inji-web/src/components/Help/HelpContentItem.jsx @@ -0,0 +1,25 @@ +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; +import Typography from "@mui/material/Typography"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import {HorizontalLine} from "../atoms/HorizontalLine"; + +export const HelpContentItem = ({panelId, expanded, handleChange, panelHeading, panelContent}) => { + return + } + aria-controls={`${panelId}-content`} + id={`${panelId}-header`}> + + {panelHeading} + {expanded === panelId && } + + + + + {panelContent} + + + +} diff --git a/inji-web/src/pages/Home/IssuerList.js b/inji-web/src/components/Home/IssuerList.js similarity index 70% rename from inji-web/src/pages/Home/IssuerList.js rename to inji-web/src/components/Home/IssuerList.js index 4e8c690..fff3612 100644 --- a/inji-web/src/pages/Home/IssuerList.js +++ b/inji-web/src/components/Home/IssuerList.js @@ -1,11 +1,11 @@ import React from 'react'; -import GridComponent from "../../components/molecules/GridComponent"; +import GridComponent from "../molecules/GridComponent"; import {Typography} from "@mui/material"; import Box from "@mui/material/Box"; import styled from "@emotion/styled"; import { useNavigate } from 'react-router-dom'; -import CustonDownloadButton from "../../components/atoms/CustomDownloadButton.js"; +import Paper from "@mui/material/Paper"; const IssuersBox = styled(Box)` @@ -20,6 +20,10 @@ const Title = styled(Typography)` margin-bottom: 10px; `; +const CenteredTypography = styled(Typography)` + text-align-last: center; +` + const getCardsData = (issuersList, navigate) => { return issuersList.map(issuer => { return { @@ -35,6 +39,13 @@ const getCardsData = (issuersList, navigate) => { }); } +const PaperStyled = styled(Paper)` + margin: 30px auto; + padding: 40px; + max-width: 1140px; + +`; + function IssuersList({issuersList}) { const navigate = useNavigate(); const cards = getCardsData(issuersList, navigate); @@ -43,7 +54,10 @@ function IssuersList({issuersList}) { List of Issuers - + {(issuersList.length === 0) ? + {"No issuers found. Please refresh your browser window or try again later"} + : } + ); } diff --git a/inji-web/src/pages/Home/IssuerList.test.js b/inji-web/src/components/Home/IssuerList.test.js similarity index 100% rename from inji-web/src/pages/Home/IssuerList.test.js rename to inji-web/src/components/Home/IssuerList.test.js diff --git a/inji-web/src/pages/Home/SearchIssuers.js b/inji-web/src/components/Home/SearchIssuers.js similarity index 100% rename from inji-web/src/pages/Home/SearchIssuers.js rename to inji-web/src/components/Home/SearchIssuers.js diff --git a/inji-web/src/pages/Home/testData.js b/inji-web/src/components/Home/testData.js similarity index 100% rename from inji-web/src/pages/Home/testData.js rename to inji-web/src/components/Home/testData.js diff --git a/inji-web/src/pages/IssuerPage/CertificateList.js b/inji-web/src/components/Issuers/CertificateList.js similarity index 92% rename from inji-web/src/pages/IssuerPage/CertificateList.js rename to inji-web/src/components/Issuers/CertificateList.js index f663e9b..c3b99fe 100644 --- a/inji-web/src/pages/IssuerPage/CertificateList.js +++ b/inji-web/src/components/Issuers/CertificateList.js @@ -1,11 +1,11 @@ import React from 'react'; -import GridComponent from "../../components/molecules/GridComponent"; +import GridComponent from "../molecules/GridComponent"; import {Typography} from "@mui/material"; import Box from "@mui/material/Box"; import styled from "@emotion/styled"; import {getESignetRedirectURL} from "../../utils/config"; import {generateCodeChallenge, generateRandomString} from "../../utils/oauth-utils"; -import CustonDownloadButton from "../../components/atoms/CustomDownloadButton.js"; +import CustonDownloadButton from "../atoms/CustomDownloadButton.js"; import {addNewSession, } from "../../utils/sessionUtils"; diff --git a/inji-web/src/pages/IssuerPage/CertificateList.test.js b/inji-web/src/components/Issuers/CertificateList.test.js similarity index 92% rename from inji-web/src/pages/IssuerPage/CertificateList.test.js rename to inji-web/src/components/Issuers/CertificateList.test.js index c9a8192..b3a6b59 100644 --- a/inji-web/src/pages/IssuerPage/CertificateList.test.js +++ b/inji-web/src/components/Issuers/CertificateList.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; -import Certificate from "../Certificate"; +import Certificate from "../../pages/Certificate/CertificatePage"; import CertificateList from "./CertificateList"; import {SampleCredentialsSupportedData, SampleIssuersData} from "../Home/testData"; diff --git a/inji-web/src/pages/IssuerPage/Header.js b/inji-web/src/components/Issuers/Header.js similarity index 100% rename from inji-web/src/pages/IssuerPage/Header.js rename to inji-web/src/components/Issuers/Header.js diff --git a/inji-web/src/pages/PageTemplate/Footer.jsx b/inji-web/src/components/PageTemplate/Footer.jsx similarity index 100% rename from inji-web/src/pages/PageTemplate/Footer.jsx rename to inji-web/src/components/PageTemplate/Footer.jsx diff --git a/inji-web/src/pages/PageTemplate/Navbar.jsx b/inji-web/src/components/PageTemplate/Navbar.jsx similarity index 83% rename from inji-web/src/pages/PageTemplate/Navbar.jsx rename to inji-web/src/components/PageTemplate/Navbar.jsx index 413939a..1e43534 100644 --- a/inji-web/src/pages/PageTemplate/Navbar.jsx +++ b/inji-web/src/components/PageTemplate/Navbar.jsx @@ -21,7 +21,10 @@ function Navbar(props) { - {"About Inji"} + {"Help"} + + + {"About Inji"} diff --git a/inji-web/src/pages/PageTemplate/styles.jsx b/inji-web/src/components/PageTemplate/styles.jsx similarity index 100% rename from inji-web/src/pages/PageTemplate/styles.jsx rename to inji-web/src/components/PageTemplate/styles.jsx diff --git a/inji-web/src/components/atoms/HorizontalLine.js b/inji-web/src/components/atoms/HorizontalLine.js new file mode 100644 index 0000000..571f07b --- /dev/null +++ b/inji-web/src/components/atoms/HorizontalLine.js @@ -0,0 +1,10 @@ +import styled from 'styled-components' +export const HorizontalLine = styled.div` + content: ''; + position: absolute; + width: 100%; + height: 1px; + left: 0; + bottom: 0; + background-color: lightgray; +`; diff --git a/inji-web/src/index.css b/inji-web/src/index.css deleted file mode 100644 index a08fb0a..0000000 --- a/inji-web/src/index.css +++ /dev/null @@ -1,19 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -/*The following changes are to remove default 'x' button that appears in a input field of type search in chrome browser*/ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { display: none; } \ No newline at end of file diff --git a/inji-web/src/index.js b/inji-web/src/index.js index 45cfea0..d404ea2 100644 --- a/inji-web/src/index.js +++ b/inji-web/src/index.js @@ -1,8 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import {RouterProvider} from "react-router-dom"; import {router} from "./Router"; +import 'react-toastify/dist/ReactToastify.css' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( diff --git a/inji-web/src/pages/Certificate/index.js b/inji-web/src/pages/Certificate/CertificatePage.js similarity index 94% rename from inji-web/src/pages/Certificate/index.js rename to inji-web/src/pages/Certificate/CertificatePage.js index 1d3236f..4366526 100644 --- a/inji-web/src/pages/Certificate/index.js +++ b/inji-web/src/pages/Certificate/CertificatePage.js @@ -1,13 +1,13 @@ import React, {useEffect, useState} from 'react'; -import PageTemplate from "../PageTemplate"; +import PageTemplate from "../PageTemplate/PageTemplate"; import Box from "@mui/material/Box"; import {Grid} from "@mui/material"; import {useLocation, useParams} from "react-router-dom"; -import Header from "./Header"; +import Header from "../../components/Certificate/Header"; import {fetchAccessToken} from "../../utils/oauth-utils"; import {downloadCredentials, getUrlParamsMap} from "../../utils/misc"; import {CustomError} from "../../errors/CustomError"; -import {DisplayComponent} from "./DisplayComponent"; +import {DisplayComponent} from "../../components/Certificate/DisplayComponent"; import {getActiveSession, removeActiveSession} from "../../utils/sessionUtils"; const useCodeVerifierAndClientId = (location) => { diff --git a/inji-web/src/pages/Certificate/index.test.js b/inji-web/src/pages/Certificate/CertificatePage.test.js similarity index 97% rename from inji-web/src/pages/Certificate/index.test.js rename to inji-web/src/pages/Certificate/CertificatePage.test.js index cbf8b0e..3f3db60 100644 --- a/inji-web/src/pages/Certificate/index.test.js +++ b/inji-web/src/pages/Certificate/CertificatePage.test.js @@ -1,7 +1,7 @@ import React from 'react'; import axios from 'axios'; import {render, screen} from "@testing-library/react"; -import Certificate from "./index"; +import Certificate from "./CertificatePage"; jest.mock('../../assets/inji-logo.png', () => ({ ...jest.requireActual('../../assets/inji-logo.png'), diff --git a/inji-web/src/pages/Help/HelpPage.js b/inji-web/src/pages/Help/HelpPage.js new file mode 100644 index 0000000..c56c6e6 --- /dev/null +++ b/inji-web/src/pages/Help/HelpPage.js @@ -0,0 +1,20 @@ +import Header from "../../components/Certificate/Header"; +import Box from "@mui/material/Box"; +import {Grid} from "@mui/material"; +import PageTemplate from "../PageTemplate/PageTemplate"; +import React from "react"; +import {HelpContent} from "../../components/Help/HelpContent"; + +export const HelpPage = () => { + return ( + +
+ + + + + + + ); + +} diff --git a/inji-web/src/pages/Home/index.js b/inji-web/src/pages/Home/HomePage.js similarity index 57% rename from inji-web/src/pages/Home/index.js rename to inji-web/src/pages/Home/HomePage.js index 01d2445..ed60a3f 100644 --- a/inji-web/src/pages/Home/index.js +++ b/inji-web/src/pages/Home/HomePage.js @@ -1,21 +1,19 @@ import React from "react"; -import { Box, Grid } from "@mui/material"; -import PageTemplate from "../PageTemplate"; -import Image from '../../assets/Background.svg'; -import IssuersList from "../Home/IssuerList"; -import SearchIssuers from "../Home/SearchIssuers"; +import PageTemplate from "../PageTemplate/PageTemplate"; +import IssuersList from "../../components/Home/IssuerList"; +import SearchIssuers from "../../components/Home/SearchIssuers"; import { useEffect, useState } from "react"; import _axios from 'axios'; -import { SampleIssuersData } from "./testData"; -import {FETCH_ISSUERS_URL, MIMOTO_URL} from "../../utils/config"; -import LoadingScreen from "../../utils/LoadingScreen"; +import {FETCH_ISSUERS_URL} from "../../utils/config"; +import LoadingScreen from "../../components/Common/LoadingScreen"; import {removeUinAndESignetIssuers} from "../../utils/misc"; +import {toast} from "react-toastify"; export default function Home(props) { const [issuersList, setIssuersList] = useState([]); const [loading, setLoading] = useState(true); - const [errorMessage, setErrorMessage] = useState(); + const [errorMessage, setErrorMessage] = useState(""); // logic to fetch the list of IssuerPage on page load useEffect(() => { @@ -27,9 +25,17 @@ export default function Home(props) { setLoading(false); }) .catch(error => { - console.error('Error fetching issuers:', error); + toast.error(error.message, { + position: "top-right", + autoClose: 5000, + hideProgressBar: true, + closeOnClick: true, + progress: undefined, + theme: "colored" + }); + console.error('Error fetching issuers:', error.message); setLoading(false); - setErrorMessage(error); + setErrorMessage(error.message); }); }, []); diff --git a/inji-web/src/pages/Home/index.test.js b/inji-web/src/pages/Home/HomePage.test.js similarity index 93% rename from inji-web/src/pages/Home/index.test.js rename to inji-web/src/pages/Home/HomePage.test.js index 60b7b0f..b9dfa48 100644 --- a/inji-web/src/pages/Home/index.test.js +++ b/inji-web/src/pages/Home/HomePage.test.js @@ -1,9 +1,9 @@ import React from "react"; import {render, screen} from "@testing-library/react"; import { act } from "react-dom/test-utils"; -import {SampleIssuersData} from "./testData"; +import {SampleIssuersData} from "../../components/Home/testData"; import * as axios from "axios"; -import Home from "./index"; +import Home from "./HomePage"; // Mock out all top level functions, such as get, put, delete and post: jest.mock("axios"); diff --git a/inji-web/src/pages/IssuerPage/index.js b/inji-web/src/pages/IssuerPage/IssuersPage.js similarity index 91% rename from inji-web/src/pages/IssuerPage/index.js rename to inji-web/src/pages/IssuerPage/IssuersPage.js index 39e043b..947b67d 100644 --- a/inji-web/src/pages/IssuerPage/index.js +++ b/inji-web/src/pages/IssuerPage/IssuersPage.js @@ -1,11 +1,11 @@ import React, { useEffect, useState } from 'react'; -import PageTemplate from "../PageTemplate"; -import Header from "./Header"; -import CertificateList from "./CertificateList"; +import PageTemplate from "../PageTemplate/PageTemplate"; +import Header from "../../components/Issuers/Header"; +import CertificateList from "../../components/Issuers/CertificateList"; import _axios from 'axios'; import {getCredentialsSupportedUrl, getSearchIssuersUrl} from "../../utils/config"; import {useParams, useLocation, useNavigate} from 'react-router-dom'; -import LoadingScreen from '../../utils/LoadingScreen'; +import LoadingScreen from '../../components/Common/LoadingScreen'; function Issuer() { const { issuerId, displayName } = useParams(); @@ -58,7 +58,7 @@ function Issuer() {
- {loading + {loading ? : {children}