fix(web): click to copy + notification

2025-12-10 19:34:34 +00:00 · 2022-05-23 20:29:29 +05:00
parent 80b33c7a18
commit f37f8e95d1
4 changed files with 115 additions and 5 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -24,9 +24,11 @@
        "monaco-editor": "^0.33.0",
        "monaco-editor-webpack-plugin": "^7.0.1",
        "react": "^17.0.2",
+        "react-copy-to-clipboard": "^5.1.0",
        "react-dom": "^17.0.2",
        "react-monaco-editor": "^0.48.0",
-        "react-router-dom": "^5.3.0"
+        "react-router-dom": "^5.3.0",
+        "react-toastify": "^9.0.1"
      },
      "devDependencies": {
        "@babel/core": "^7.16.0",
@@ -38,6 +40,7 @@
        "@types/dotenv-webpack": "^7.0.3",
        "@types/prismjs": "^1.16.6",
        "@types/react": "^17.0.37",
+        "@types/react-copy-to-clipboard": "^5.0.2",
        "@types/react-dom": "^17.0.11",
        "@types/react-router-dom": "^5.3.1",
        "babel-loader": "^8.2.3",
@@ -3296,6 +3299,15 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-dom": {
      "version": "17.0.11",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -4863,6 +4875,14 @@
      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
      "dev": true
    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "node_modules/copy-webpack-plugin": {
      "version": "10.2.4",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
@@ -9299,6 +9319,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
    "node_modules/react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -9372,6 +9404,18 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-toastify": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.1.tgz",
+      "integrity": "sha512-c2zeZHkCX+WXuItS/JRqQ/8CH8Qm/je+M0rt09xe9fnu5YPJigtNOdD8zX4fwLA093V2am3abkGfOowwpkrwOQ==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -10335,6 +10379,11 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
    "node_modules/toidentifier": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -13641,6 +13690,15 @@
        "csstype": "^3.0.2"
      }
    },
+    "@types/react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/react-dom": {
      "version": "17.0.11",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
@@ -14848,6 +14906,14 @@
      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
      "dev": true
    },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "copy-webpack-plugin": {
      "version": "10.2.4",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
@@ -18162,6 +18228,15 @@
        "object-assign": "^4.1.1"
      }
    },
+    "react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "requires": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      }
+    },
    "react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -18223,6 +18298,14 @@
        "tiny-warning": "^1.0.0"
      }
    },
+    "react-toastify": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.1.tgz",
+      "integrity": "sha512-c2zeZHkCX+WXuItS/JRqQ/8CH8Qm/je+M0rt09xe9fnu5YPJigtNOdD8zX4fwLA093V2am3abkGfOowwpkrwOQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
    "react-transition-group": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -18967,6 +19050,11 @@
        "is-number": "^7.0.0"
      }
    },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
    "toidentifier": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -23,9 +23,11 @@
    "monaco-editor": "^0.33.0",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "^17.0.2",
    "react-monaco-editor": "^0.48.0",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^5.3.0",
+    "react-toastify": "^9.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
@@ -37,6 +39,7 @@
    "@types/dotenv-webpack": "^7.0.3",
    "@types/prismjs": "^1.16.6",
    "@types/react": "^17.0.37",
+    "@types/react-copy-to-clipboard": "^5.0.2",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.1",
    "babel-loader": "^8.2.3",
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -24,7 +24,9 @@ const Header = (props: any) => {
  const history = useHistory()
  const { pathname } = useLocation()
  const appContext = useContext(AppContext)
-  const [tabValue, setTabValue] = useState(pathname)
+  const [tabValue, setTabValue] = useState(
+    pathname === '/SASjsLogon' ? '/' : pathname
+  )
  const [anchorEl, setAnchorEl] = useState<
    (EventTarget & HTMLButtonElement) | null
  >(null)
--- a/web/src/containers/AuthCode/index.tsx
+++ b/web/src/containers/AuthCode/index.tsx
@@ -1,15 +1,18 @@
 import axios from 'axios'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 import React, { useEffect, useState } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { useLocation } from 'react-router-dom'

-import { CssBaseline, Box, Typography } from '@mui/material'
+import { CssBaseline, Box, Typography, Button } from '@mui/material'

 const getAuthCode = async (credentials: any) =>
  axios.post('/SASLogon/authorize', credentials).then((res) => res.data)

 const AuthCode = () => {
  const location = useLocation()
-  const [displayCode, setDisplayCode] = useState(null)
+  const [displayCode, setDisplayCode] = useState('')
  const [errorMessage, setErrorMessage] = useState('')

  useEffect(() => {
@@ -56,6 +59,20 @@ const AuthCode = () => {
      {errorMessage && <Typography>{errorMessage}</Typography>}

      <br />
+
+      <CopyToClipboard
+        text={displayCode}
+        onCopy={() =>
+          toast.info('Code copied to ClipBoard', {
+            theme: 'dark',
+            position: toast.POSITION.BOTTOM_RIGHT
+          })
+        }
+      >
+        <Button variant="contained">Copy to Clipboard</Button>
+      </CopyToClipboard>
+
+      <ToastContainer />
    </Box>
  )
 }