From 99c85a9662bceb3cb8df06806cbb8d45712e5d23 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 27 Oct 2021 21:54:44 +0100 Subject: [PATCH 01/12] ugly redirect --- packages/files-ui/package.json | 4 +-- .../files-ui/src/Components/FilesRoutes.tsx | 7 +++++ .../Components/Modules/LinkSharingModule.tsx | 5 +-- .../Modules/LoginModule/InitialScreen.tsx | 31 +++++++++++++++++-- .../Pages/InvalidSharingLinkPage.tsx | 8 +++++ packages/files-ui/src/Utils/pathUtils.ts | 5 ++- packages/gaming-ui/package.json | 2 +- packages/storage-ui/package.json | 2 +- yarn.lock | 8 ++--- 9 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 47de55c414..0de1624f5a 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "1.18.15", + "@chainsafe/files-api-client": "^1.18.19", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", @@ -31,9 +31,9 @@ "ethers": "^5.4.3", "fflate": "^0.7.1", "formik": "^2.2.5", + "heic-convert": "^1.2.4", "jsrsasign": "^10.4.1", "key-encoder": "^2.0.3", - "heic-convert": "^1.2.4", "mime-matcher": "^1.0.5", "posthog-js": "^1.13.10", "react": "^16.14.0", diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx index 70ae37185a..7a8fa77cef 100644 --- a/packages/files-ui/src/Components/FilesRoutes.tsx +++ b/packages/files-ui/src/Components/FilesRoutes.tsx @@ -29,6 +29,7 @@ export const ROUTE_LINKS = { SettingsDefault: `${SETTINGS_BASE}`, PurchasePlan: "/purchase", UserSurvey: "https://calendly.com/colinschwarz/chainsafe-files-chat", + InvalidSharingLink: "/invalid-link", SharedFolders: "/shared-overview", SharedFolderBrowserRoot: "/shared", SharingLink: (permission: NonceResponsePermission, jwt: string, bucketEncryptionKey: string) => @@ -113,6 +114,12 @@ const FilesRoutes = () => { component={PurchasePlanPage} redirectPath={ROUTE_LINKS.Landing} /> + { const { pathname, hash } = useLocation() @@ -73,7 +74,7 @@ const LinkSharingModule = () => { const classes = useStyles() const { bucket_id: bucketId, permission } = useMemo(() => { try { - return (jwt && jwtDecode(jwt)) || {} + return (jwt && jwtDecode(jwt)) || {} }catch (e) { console.error(e) return {} diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 3dc697007d..3e984e56d1 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from "react" +import React, { useCallback, useEffect, useMemo, useState } from "react" import { Button, GithubLogoIcon, @@ -8,7 +8,8 @@ import { Typography, FormikTextInput, EthereumLogoIcon, - useLocation + useLocation, + useHistory } from "@chainsafe/common-components" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { CSFTheme } from "../../../Themes/types" @@ -23,6 +24,9 @@ import { IdentityProvider } from "@chainsafe/files-api-client" import PasswordlessEmail from "./PasswordlessEmail" import { Form, FormikProvider, useFormik } from "formik" import { emailValidation } from "../../../Utils/validationSchema" +import { getJWT } from "../../../Utils/pathUtils" +import jwtDecode from "jwt-decode" +import { DecodedNounceJwt } from "../LinkSharingModule" const useStyles = makeStyles( ({ constants, palette, breakpoints, typography }: CSFTheme) => @@ -165,6 +169,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { const { selectWallet, resetAndSelectWallet } = useFilesApi() const { desktop } = useThemeSwitcher() const { wallet } = useWeb3() + const { redirect } = useHistory() const { login, status, resetStatus } = useThresholdKey() const classes = useStyles() const [loginMode, setLoginMode] = useState<"web3" | "email" | LOGIN_TYPE | undefined>() @@ -177,6 +182,28 @@ const InitialScreen = ({ className }: IInitialScreen) => { const { state } = useLocation<{from?: string}>() const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state]) + useEffect(() => { + if (!isSharing) return + + const jwt = getJWT(state?.from) + let nonce = "" + + try { + nonce = (jwt && jwtDecode(jwt).nonce_id) || "" + }catch (e) { + console.error(e) + } + + if (!nonce) return + + filesApiClient.isNonceValid(nonce) + .then((res) => { + console.log("res", res) + res.is_valid === false && redirect(ROUTE_LINKS.InvalidSharingLink) + }) + .catch(console.error) + }, [filesApiClient, isSharing, redirect, state]) + const handleSelectWalletAndConnect = async () => { setError(undefined) try { diff --git a/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx b/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx new file mode 100644 index 0000000000..6420d08b30 --- /dev/null +++ b/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx @@ -0,0 +1,8 @@ +import React from "react" +// import PurchasePlan from "../Modules/Settings/PurchasePlan" + +const InvalidSharingLink = () => { + return
Oops invalid link
+} + +export default InvalidSharingLink diff --git a/packages/files-ui/src/Utils/pathUtils.ts b/packages/files-ui/src/Utils/pathUtils.ts index 5f96cf6bae..0d01539479 100644 --- a/packages/files-ui/src/Utils/pathUtils.ts +++ b/packages/files-ui/src/Utils/pathUtils.ts @@ -104,7 +104,10 @@ export const isSubFolder = (fold1: string, fold2: string) => { } // get the jwt from /link-sharing/permision/jwt -export const getJWT = (pathname: string) => { +export const getJWT = (pathname?: string) => { + + if(!pathname) return + const arrayOfPaths = getArrayOfPaths(pathname) if(arrayOfPaths.length !== 3){ diff --git a/packages/gaming-ui/package.json b/packages/gaming-ui/package.json index 275518b256..bc30f7d52c 100644 --- a/packages/gaming-ui/package.json +++ b/packages/gaming-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "1.18.15", + "@chainsafe/files-api-client": "^1.18.19", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index d55c71882d..a912064d6b 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "1.18.15", + "@chainsafe/files-api-client": "^1.18.19", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/yarn.lock b/yarn.lock index ab35e87884..e606cb7a0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1925,10 +1925,10 @@ resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7" integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q== -"@chainsafe/files-api-client@1.18.15": - version "1.18.15" - resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.15.tgz#452572eb0ecb8178617d9faa37b7866bcfeeb4ec" - integrity sha512-W7MkZnK44dV1JixPavKKppi8KVhBk60uHoaDv/zRH0WVXT5QsWjQuCLpeWv9NcytHezsOv+5AAbovnjaZFwjpA== +"@chainsafe/files-api-client@^1.18.19": + version "1.18.19" + resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.19.tgz#2093d508d55b71abb3ec9cfb9c219fa62a4494c4" + integrity sha512-fFIGJg3XcS3hrNq4+UxjOEYYYiOtrYLTKxn0c/jXrlDFxA+Zjsn6G6d5O+KHJVfqoinRIyrRrMPXBHpBlFHpZg== dependencies: "@redocly/openapi-cli" "^1.0.0-beta.58" "@redocly/openapi-core" "^1.0.0-beta.58" From 90548ebb33ce8f2397ce8f44d4c5306ec80000c4 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 27 Oct 2021 23:17:23 +0100 Subject: [PATCH 02/12] better UX --- .../files-ui/src/Components/FilesRoutes.tsx | 7 ---- .../Components/Modules/LinkSharingModule.tsx | 37 ++++++++++++++++--- .../Modules/LoginModule/InitialScreen.tsx | 29 +++++++++++---- .../Pages/InvalidSharingLinkPage.tsx | 8 ---- 4 files changed, 53 insertions(+), 28 deletions(-) delete mode 100644 packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx index 7a8fa77cef..70ae37185a 100644 --- a/packages/files-ui/src/Components/FilesRoutes.tsx +++ b/packages/files-ui/src/Components/FilesRoutes.tsx @@ -29,7 +29,6 @@ export const ROUTE_LINKS = { SettingsDefault: `${SETTINGS_BASE}`, PurchasePlan: "/purchase", UserSurvey: "https://calendly.com/colinschwarz/chainsafe-files-chat", - InvalidSharingLink: "/invalid-link", SharedFolders: "/shared-overview", SharedFolderBrowserRoot: "/shared", SharingLink: (permission: NonceResponsePermission, jwt: string, bucketEncryptionKey: string) => @@ -114,12 +113,6 @@ const FilesRoutes = () => { component={PurchasePlanPage} redirectPath={ROUTE_LINKS.Landing} /> - { const { pathname, hash } = useLocation() const { redirect } = useHistory() @@ -72,7 +73,7 @@ const LinkSharingModule = () => { const [encryptedEncryptionKey, setEncryptedEncryptionKey] = useState("") const [error, setError] = useState("") const classes = useStyles() - const { bucket_id: bucketId, permission } = useMemo(() => { + const { bucket_id: bucketId, permission, nonce_id } = useMemo(() => { try { return (jwt && jwtDecode(jwt)) || {} }catch (e) { @@ -81,6 +82,17 @@ const LinkSharingModule = () => { } }, [jwt]) const newBucket = useMemo(() => buckets.find((b) => b.id === bucketId), [bucketId, buckets]) + const [isValidNonce, setIsValidNonce] = useState() + + useEffect(() => { + if(!nonce_id) return + + filesApiClient.isNonceValid(nonce_id) + .then((res) => { + setIsValidNonce(res.is_valid) + }) + .catch(console.error) + }, [filesApiClient, nonce_id]) useEffect(() => { if(!publicKey || !bucketDecryptionKey) return @@ -92,7 +104,7 @@ const LinkSharingModule = () => { }, [bucketDecryptionKey, encryptForPublicKey, publicKey]) useEffect(() => { - if(!jwt || !encryptedEncryptionKey || !!newBucket) return + if(!jwt || !encryptedEncryptionKey || !!newBucket || !isValidNonce) return filesApiClient.verifyNonce({ jwt, encryption_key: encryptedEncryptionKey }) .catch((e:any) => { @@ -102,7 +114,7 @@ const LinkSharingModule = () => { .finally(() => { refreshBuckets() }) - }, [encryptedEncryptionKey, error, filesApiClient, jwt, newBucket, refreshBuckets]) + }, [encryptedEncryptionKey, error, filesApiClient, isValidNonce, jwt, newBucket, refreshBuckets]) const onBrowseBucket = useCallback(() => { newBucket && redirect(ROUTE_LINKS.SharedFolderExplorer(newBucket.id, "/")) @@ -112,6 +124,17 @@ const LinkSharingModule = () => {
+ {!error && isValidNonce === false && ( + <> + + + This link is not valid any more. + + + )} {!error && !newBucket && ( <> { className={classes.icon} /> - Adding you to the shared folder... + {isValidNonce === undefined + ? Verifying the link... + : Adding you to the shared folder... + } + )} diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 3e984e56d1..2de73df766 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -9,7 +9,7 @@ import { FormikTextInput, EthereumLogoIcon, useLocation, - useHistory + ExclamationCircleIcon } from "@chainsafe/common-components" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { CSFTheme } from "../../../Themes/types" @@ -157,6 +157,9 @@ const useStyles = makeStyles( }, secondaryLoginText: { paddingTop: constants.generalUnit * 2 + }, + exclamationIcon: { + fontSize: 48 } }) ) @@ -169,7 +172,6 @@ const InitialScreen = ({ className }: IInitialScreen) => { const { selectWallet, resetAndSelectWallet } = useFilesApi() const { desktop } = useThemeSwitcher() const { wallet } = useWeb3() - const { redirect } = useHistory() const { login, status, resetStatus } = useThresholdKey() const classes = useStyles() const [loginMode, setLoginMode] = useState<"web3" | "email" | LOGIN_TYPE | undefined>() @@ -181,6 +183,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { const [email, setEmail] = useState("") const { state } = useLocation<{from?: string}>() const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state]) + const [isInvalidNonce, setIsInvalidNonce] = useState(false) useEffect(() => { if (!isSharing) return @@ -198,11 +201,10 @@ const InitialScreen = ({ className }: IInitialScreen) => { filesApiClient.isNonceValid(nonce) .then((res) => { - console.log("res", res) - res.is_valid === false && redirect(ROUTE_LINKS.InvalidSharingLink) + res.is_valid === false && setIsInvalidNonce(true) }) .catch(console.error) - }, [filesApiClient, isSharing, redirect, state]) + }, [filesApiClient, isSharing, state]) const handleSelectWalletAndConnect = async () => { setError(undefined) @@ -399,19 +401,19 @@ const InitialScreen = ({ className }: IInitialScreen) => { return (
- {loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( + {!isInvalidNonce && loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( - {isSharing + {isSharing && status !== "logging in" ? Sign in/up to access the shared folder : Get Started } )} - {!error && ( + {!error && !isInvalidNonce && ( loginMode !== "web3" && loginMode !== "email" ? <>
@@ -539,6 +541,17 @@ const InitialScreen = ({ className }: IInitialScreen) => {
)} + {isInvalidNonce && status !== "logging in" && ( +
+ + + This link is not valid any more. + +
+ )}
) } diff --git a/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx b/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx deleted file mode 100644 index 6420d08b30..0000000000 --- a/packages/files-ui/src/Components/Pages/InvalidSharingLinkPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react" -// import PurchasePlan from "../Modules/Settings/PurchasePlan" - -const InvalidSharingLink = () => { - return
Oops invalid link
-} - -export default InvalidSharingLink From cc7f9aa35b3b722cce6e96f03053875e9a341dfa Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 27 Oct 2021 22:24:48 +0000 Subject: [PATCH 03/12] lingui extract --- packages/files-ui/src/locales/de/messages.po | 6 ++++++ packages/files-ui/src/locales/en/messages.po | 6 ++++++ packages/files-ui/src/locales/es/messages.po | 6 ++++++ packages/files-ui/src/locales/fr/messages.po | 6 ++++++ packages/files-ui/src/locales/no/messages.po | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index e05e0f362d..4d0582d399 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -754,6 +754,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is not valid any more." +msgstr "" + msgid "This username is already taken" msgstr "" @@ -817,6 +820,9 @@ msgstr "Verifizierungscode nicht korrekt!" msgid "Verification code sent!" msgstr "Verifizierungscode gesendet!" +msgid "Verifying the link..." +msgstr "" + msgid "View folder" msgstr "Ordner anzeigen" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 04a0eccd69..6a99c18d59 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -757,6 +757,9 @@ msgstr "There was an error restoring your data" msgid "There was an error when setting username." msgstr "There was an error when setting username." +msgid "This link is not valid any more." +msgstr "This link is not valid any more." + msgid "This username is already taken" msgstr "This username is already taken" @@ -820,6 +823,9 @@ msgstr "Verification code not correct!" msgid "Verification code sent!" msgstr "Verification code sent!" +msgid "Verifying the link..." +msgstr "Verifying the link..." + msgid "View folder" msgstr "View folder" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index 98cde9765d..50f319c5ee 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -758,6 +758,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is not valid any more." +msgstr "" + msgid "This username is already taken" msgstr "" @@ -821,6 +824,9 @@ msgstr "" msgid "Verification code sent!" msgstr "" +msgid "Verifying the link..." +msgstr "" + msgid "View folder" msgstr "Utilice un navegador guardado" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index ede666ebf2..4d6cf70313 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -758,6 +758,9 @@ msgstr "Une erreur s'est produite lors de la restauration de vos données" msgid "There was an error when setting username." msgstr "Une erreur s'est produite lors de la définition du nom d'utilisateur." +msgid "This link is not valid any more." +msgstr "" + msgid "This username is already taken" msgstr "Ce nom d’utilisateur est déjà pris" @@ -821,6 +824,9 @@ msgstr "Code de vérification incorrect !" msgid "Verification code sent!" msgstr "Code de vérification envoyé !" +msgid "Verifying the link..." +msgstr "" + msgid "View folder" msgstr "Voir le dossier" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index d2f340a862..2d705fc37f 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -754,6 +754,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is not valid any more." +msgstr "" + msgid "This username is already taken" msgstr "" @@ -817,6 +820,9 @@ msgstr "" msgid "Verification code sent!" msgstr "" +msgid "Verifying the link..." +msgstr "" + msgid "View folder" msgstr "Vis mappe" From d2cd7cb82dcd805c88b41cc1db0d1a0edb5e9919 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 27 Oct 2021 23:31:10 +0100 Subject: [PATCH 04/12] consistancy --- .../Components/Modules/LoginModule/InitialScreen.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 2de73df766..c1ce2fd662 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -183,7 +183,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { const [email, setEmail] = useState("") const { state } = useLocation<{from?: string}>() const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state]) - const [isInvalidNonce, setIsInvalidNonce] = useState(false) + const [isValidNonce, setIsValidNonce] = useState(true) useEffect(() => { if (!isSharing) return @@ -201,7 +201,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { filesApiClient.isNonceValid(nonce) .then((res) => { - res.is_valid === false && setIsInvalidNonce(true) + setIsValidNonce(res.is_valid) }) .catch(console.error) }, [filesApiClient, isSharing, state]) @@ -401,7 +401,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { return (
- {!isInvalidNonce && loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( + {isValidNonce && loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( { } )} - {!error && !isInvalidNonce && ( + {!error && isValidNonce && ( loginMode !== "web3" && loginMode !== "email" ? <>
@@ -541,7 +541,7 @@ const InitialScreen = ({ className }: IInitialScreen) => {
)} - {isInvalidNonce && status !== "logging in" && ( + {!isValidNonce && status !== "logging in" && (
Date: Thu, 28 Oct 2021 16:50:08 +0100 Subject: [PATCH 05/12] hide loader when link is invalid --- packages/files-ui/src/Components/Modules/LinkSharingModule.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx index 0240e61adc..a9413fe681 100644 --- a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx +++ b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx @@ -135,7 +135,7 @@ const LinkSharingModule = () => { )} - {!error && !newBucket && ( + {!error && !newBucket && isValidNonce !== false && ( <> Date: Thu, 28 Oct 2021 17:06:09 +0100 Subject: [PATCH 06/12] typo and icon color --- .../src/Components/Modules/LinkSharingModule.tsx | 4 ++-- .../Components/Modules/LoginModule/InitialScreen.tsx | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx index a9413fe681..203a285d21 100644 --- a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx +++ b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx @@ -56,7 +56,7 @@ const useStyles = makeStyles( }) ) -export interface DecodedNounceJwt { +export interface DecodedNonceJwt { bucket_id?: string permission?: NonceResponsePermission nonce_id?: string @@ -75,7 +75,7 @@ const LinkSharingModule = () => { const classes = useStyles() const { bucket_id: bucketId, permission, nonce_id } = useMemo(() => { try { - return (jwt && jwtDecode(jwt)) || {} + return (jwt && jwtDecode(jwt)) || {} }catch (e) { console.error(e) return {} diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index e789823294..7394d4cfe1 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -26,7 +26,7 @@ import { Form, FormikProvider, useFormik } from "formik" import { emailValidation } from "../../../Utils/validationSchema" import { getJWT } from "../../../Utils/pathUtils" import jwtDecode from "jwt-decode" -import { DecodedNounceJwt } from "../LinkSharingModule" +import { DecodedNonceJwt } from "../LinkSharingModule" import dayjs from "dayjs" const useStyles = makeStyles( @@ -160,7 +160,11 @@ const useStyles = makeStyles( paddingTop: constants.generalUnit * 2 }, exclamationIcon: { - fontSize: 48 + fontSize: 48, + "& svg": { + marginRight: constants.generalUnit, + fill: palette.additional["gray"][7] + } }, maintenanceMessage: { display: "block", @@ -202,7 +206,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { let nonce = "" try { - nonce = (jwt && jwtDecode(jwt).nonce_id) || "" + nonce = (jwt && jwtDecode(jwt).nonce_id) || "" }catch (e) { console.error(e) } From 298730de08ee3e7d89f7bea4ce33be56f088d2c3 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Thu, 28 Oct 2021 17:12:45 +0100 Subject: [PATCH 07/12] add button to go back --- .../src/Components/Modules/LoginModule/InitialScreen.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 7394d4cfe1..96a2f47f31 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -243,6 +243,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { setErrorEmail("") setLoginMode(undefined) resetStatus() + setIsValidNonce(true) } const handleLogin = async (loginType: IdentityProvider) => { @@ -578,6 +579,12 @@ const InitialScreen = ({ className }: IInitialScreen) => { This link is not valid any more. +
)}
From 13c63039a7a7abb594565ee3f1cb9cdbae5f1305 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 28 Oct 2021 16:14:17 +0000 Subject: [PATCH 08/12] lingui extract --- packages/files-ui/src/locales/de/messages.po | 3 +++ packages/files-ui/src/locales/en/messages.po | 3 +++ packages/files-ui/src/locales/es/messages.po | 3 +++ packages/files-ui/src/locales/fr/messages.po | 3 +++ packages/files-ui/src/locales/no/messages.po | 3 +++ 5 files changed, 15 insertions(+) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index ea4bac723f..8fba5f25a4 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -331,6 +331,9 @@ msgstr "" msgid "Go back" msgstr "Zurück" +msgid "Go to login" +msgstr "" + msgid "Got it" msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 195e3fd138..ed348b54e1 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -334,6 +334,9 @@ msgstr "Give view-only permission to:" msgid "Go back" msgstr "Go back" +msgid "Go to login" +msgstr "Go to login" + msgid "Got it" msgstr "Got it" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index f381abcc8a..72162afd56 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -335,6 +335,9 @@ msgstr "" msgid "Go back" msgstr "Regresar" +msgid "Go to login" +msgstr "" + msgid "Got it" msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 7cbd265d3a..4b468a4950 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -335,6 +335,9 @@ msgstr "Donner l’accès en lecture seule à :" msgid "Go back" msgstr "Retour" +msgid "Go to login" +msgstr "" + msgid "Got it" msgstr "Compris" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index f8864cbc6a..a70f185bfa 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -331,6 +331,9 @@ msgstr "" msgid "Go back" msgstr "Tilbake" +msgid "Go to login" +msgstr "" + msgid "Got it" msgstr "" From 5f107f0ea53dde14ffa59c0d99dd39e7c0e734ec Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Thu, 28 Oct 2021 17:49:28 +0100 Subject: [PATCH 09/12] nice error with malformed jwt --- .../Components/Modules/LinkSharingModule.tsx | 50 +++++++++---------- .../Modules/LoginModule/InitialScreen.tsx | 43 ++++++++-------- 2 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx index 203a285d21..db09dd02e6 100644 --- a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx +++ b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx @@ -3,7 +3,7 @@ import { Button, CheckCircleIcon, ExclamationCircleIcon, Loading, Typography, us import { getBucketDecryptionFromHash, getJWT } from "../../Utils/pathUtils" import { useFilesApi } from "../../Contexts/FilesApiContext" import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" import { useFiles } from "../../Contexts/FilesContext" import jwtDecode from "jwt-decode" import { createStyles, makeStyles } from "@chainsafe/common-theme" @@ -37,12 +37,11 @@ const useStyles = makeStyles( alignItems: "center", fontSize: constants.generalUnit * 6, "& svg": { - marginRight: constants.generalUnit, fill: palette.additional["gray"][7] } }, - error: { - color: palette.error.main + errorMessage: { + textAlign: "center" }, messageWrapper: { display: "flex", @@ -78,6 +77,7 @@ const LinkSharingModule = () => { return (jwt && jwtDecode(jwt)) || {} }catch (e) { console.error(e) + setError(t`This link is marlformed. Please verify that you copy/pasted it correctly.`) return {} } }, [jwt]) @@ -124,17 +124,6 @@ const LinkSharingModule = () => {
- {!error && isValidNonce === false && ( - <> - - - This link is not valid any more. - - - )} {!error && !newBucket && isValidNonce !== false && ( <> { size={48} className={classes.icon} /> - + {isValidNonce === undefined ? Verifying the link... : Adding you to the shared folder... @@ -151,13 +140,13 @@ const LinkSharingModule = () => { )} - {!error && newBucket && permission && ( + {!error && newBucket && permission && isValidNonce && ( <> - + You were added to the shared folder ({translatedPermission(permission)}): {newBucket.name} @@ -170,15 +159,24 @@ const LinkSharingModule = () => { )} + {(!!error || isValidNonce === false) && ( + <> + + + { isValidNonce === false + ? This link is not valid any more. + : error + } + + + )}
- {!!error && ( - - {error} - - )}
) diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 96a2f47f31..8b9feae201 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -197,7 +197,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { const [email, setEmail] = useState("") const { state } = useLocation<{from?: string}>() const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state]) - const [isValidNonce, setIsValidNonce] = useState(true) + const [isValidNonce, setIsValidNonce] = useState() useEffect(() => { if (!isSharing) return @@ -208,6 +208,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { try { nonce = (jwt && jwtDecode(jwt).nonce_id) || "" }catch (e) { + setError(t`The link you typed in looks malformed. Please verify it.`) console.error(e) } @@ -243,7 +244,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { setErrorEmail("") setLoginMode(undefined) resetStatus() - setIsValidNonce(true) + setIsValidNonce(undefined) } const handleLogin = async (loginType: IdentityProvider) => { @@ -416,7 +417,9 @@ const InitialScreen = ({ className }: IInitialScreen) => { return (
- {isValidNonce && loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( + {isValidNonce !== false && + loginMode !== "email" && + ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && ( { } )} - {!error && isValidNonce && ( + {!error && isValidNonce !== false && ( loginMode !== "web3" && loginMode !== "email" ? <>
@@ -553,24 +556,22 @@ const InitialScreen = ({ className }: IInitialScreen) => { : )} {!!error && ( - <> -
- - Connection failed - - - {error} - - -
- +
+ + Connection failed + + + {error} + + +
)} - {!isValidNonce && status !== "logging in" && ( + {isValidNonce === false && status !== "logging in" && (
Date: Thu, 28 Oct 2021 16:52:03 +0000 Subject: [PATCH 10/12] lingui extract --- packages/files-ui/src/locales/de/messages.po | 6 ++++++ packages/files-ui/src/locales/en/messages.po | 6 ++++++ packages/files-ui/src/locales/es/messages.po | 6 ++++++ packages/files-ui/src/locales/fr/messages.po | 6 ++++++ packages/files-ui/src/locales/no/messages.po | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 8fba5f25a4..ae8d0a5572 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -724,6 +724,9 @@ msgstr "" msgid "The files are already in this folder" msgstr "" +msgid "The link you typed in looks malformed. Please verify it." +msgstr "" + msgid "The username is too long" msgstr "" @@ -757,6 +760,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is marlformed. Please verify that you copy/pasted it correctly." +msgstr "" + msgid "This link is not valid any more." msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index ed348b54e1..f3418f7b1e 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -727,6 +727,9 @@ msgstr "The authentication popup was closed" msgid "The files are already in this folder" msgstr "The files are already in this folder" +msgid "The link you typed in looks malformed. Please verify it." +msgstr "The link you typed in looks malformed. Please verify it." + msgid "The username is too long" msgstr "The username is too long" @@ -760,6 +763,9 @@ msgstr "There was an error restoring your data" msgid "There was an error when setting username." msgstr "There was an error when setting username." +msgid "This link is marlformed. Please verify that you copy/pasted it correctly." +msgstr "This link is marlformed. Please verify that you copy/pasted it correctly." + msgid "This link is not valid any more." msgstr "This link is not valid any more." diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index 72162afd56..af6400960d 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -728,6 +728,9 @@ msgstr "Se cerró la ventana emergente de autenticación" msgid "The files are already in this folder" msgstr "" +msgid "The link you typed in looks malformed. Please verify it." +msgstr "" + msgid "The username is too long" msgstr "" @@ -761,6 +764,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is marlformed. Please verify that you copy/pasted it correctly." +msgstr "" + msgid "This link is not valid any more." msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 4b468a4950..7208ff9cf5 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -728,6 +728,9 @@ msgstr "Le popup d’authentification a été fermé" msgid "The files are already in this folder" msgstr "Les fichiers sont déjà dans ce dossier" +msgid "The link you typed in looks malformed. Please verify it." +msgstr "" + msgid "The username is too long" msgstr "Le nom d'utilisateur est trop long" @@ -761,6 +764,9 @@ msgstr "Une erreur s'est produite lors de la restauration de vos données" msgid "There was an error when setting username." msgstr "Une erreur s'est produite lors de la définition du nom d'utilisateur." +msgid "This link is marlformed. Please verify that you copy/pasted it correctly." +msgstr "" + msgid "This link is not valid any more." msgstr "" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index a70f185bfa..c8fa17ce94 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -724,6 +724,9 @@ msgstr "" msgid "The files are already in this folder" msgstr "" +msgid "The link you typed in looks malformed. Please verify it." +msgstr "" + msgid "The username is too long" msgstr "" @@ -757,6 +760,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This link is marlformed. Please verify that you copy/pasted it correctly." +msgstr "" + msgid "This link is not valid any more." msgstr "" From 579f13163adef6ea4d92735f9b479b60c09d61b6 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Thu, 28 Oct 2021 18:23:18 +0100 Subject: [PATCH 11/12] redirect to / --- .../src/Components/Modules/LoginModule/InitialScreen.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx index 8b9feae201..673d278543 100644 --- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx +++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx @@ -9,7 +9,8 @@ import { FormikTextInput, EthereumLogoIcon, useLocation, - ExclamationCircleIcon + ExclamationCircleIcon, + useHistory } from "@chainsafe/common-components" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { CSFTheme } from "../../../Themes/types" @@ -198,6 +199,7 @@ const InitialScreen = ({ className }: IInitialScreen) => { const { state } = useLocation<{from?: string}>() const isSharing = useMemo(() => state?.from?.includes(LINK_SHARING_BASE), [state]) const [isValidNonce, setIsValidNonce] = useState() + const { redirect } = useHistory() useEffect(() => { if (!isSharing) return @@ -582,7 +584,10 @@ const InitialScreen = ({ className }: IInitialScreen) => { From ec472624fe756535b2d80a31d0c5d6bab93dacae Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Tue, 2 Nov 2021 11:31:21 +0000 Subject: [PATCH 12/12] lingui extract --- packages/files-ui/src/locales/fr/messages.po | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index d3950155e5..b6534b6db0 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -5,8 +5,7 @@ msgstr "" "POT-Creation-Date: 2021-04-23 11:05+0200\n" "PO-Revision-Date: 2021-10-30 12:33+0000\n" "Last-Translator: J. Lavoie \n" -"Language-Team: French \n" +"Language-Team: French \n" "Language: fr\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" @@ -712,9 +711,7 @@ msgid "Stored by miner" msgstr "Sauvegardé par le mineur" msgid "System maintenance is scheduled to start at {0}. The system will be unavailable." -msgstr "" -"Une maintenance du système est prévue pour démarrer à {0}. Le système sera " -"indisponible." +msgstr "Une maintenance du système est prévue pour démarrer à {0}. Le système sera indisponible." msgid "Teams" msgstr "Équipes" @@ -849,9 +846,7 @@ msgid "Want to help shape this product?" msgstr "Vous voulez participer à l'élaboration de ce produit ?" msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel on Discord" -msgstr "" -"Nous effectuons une maintenance de routine du système. Les mises à jour de " -"l'état du service seront postées sur le canal <0>Files Support<0> sur Discord" +msgstr "Nous effectuons une maintenance de routine du système. Les mises à jour de l'état du service seront postées sur le canal <0>Files Support<0> sur Discord" msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded" msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"