From f37f8e95d1a85e00ceca2413dbb5e1f3f3f72255 Mon Sep 17 00:00:00 2001 From: Saad Jutt Date: Mon, 23 May 2022 20:29:29 +0500 Subject: [PATCH] fix(web): click to copy + notification --- web/package-lock.json | 90 ++++++++++++++++++++++++++- web/package.json | 5 +- web/src/components/header.tsx | 4 +- web/src/containers/AuthCode/index.tsx | 21 ++++++- 4 files changed, 115 insertions(+), 5 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 300af37..dbfbda5 100644 --- 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", diff --git a/web/package.json b/web/package.json index 6832f0b..a3a5898 100644 --- 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", diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx index c499ae3..7ea5ac9 100644 --- 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) diff --git a/web/src/containers/AuthCode/index.tsx b/web/src/containers/AuthCode/index.tsx index 59c392d..8476bc8 100644 --- 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 && {errorMessage}}
+ + + toast.info('Code copied to ClipBoard', { + theme: 'dark', + position: toast.POSITION.BOTTOM_RIGHT + }) + } + > + + + + ) }