From 6d6312248d806d5d2be5f31ea1927a3cd5f9c3f0 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 6 Sep 2019 17:30:33 +0200 Subject: [PATCH] Add a thin layer of abstraction --- package-lock.json | 41 ++++++--------------- src/auth/AuthProvider.tsx | 35 +++++------------- src/auth/components/LoginPage/LoginPage.tsx | 6 ++- src/utils/credentialsManagement.ts | 22 +++++++++++ 4 files changed, 47 insertions(+), 57 deletions(-) create mode 100644 src/utils/credentialsManagement.ts diff --git a/package-lock.json b/package-lock.json index f36d4e3c5..6881d9537 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9415,8 +9415,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -9434,13 +9433,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9453,18 +9450,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -9567,8 +9561,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -9578,7 +9571,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9591,20 +9583,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9621,7 +9610,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -9694,8 +9682,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -9705,7 +9692,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -9781,8 +9767,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -9812,7 +9797,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9830,7 +9814,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9869,13 +9852,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx index 78fcf76c1..18f00f423 100644 --- a/src/auth/AuthProvider.tsx +++ b/src/auth/AuthProvider.tsx @@ -1,5 +1,10 @@ import React from "react"; +import { + isSupported as isCredentialsManagementAPISupported, + login as loginWithCredentialsManagementAPI, + saveCredentials +} from "@saleor/utils/credentialsManagement"; import { MutationFunction, MutationResult } from "react-apollo"; import { UserContext } from "./"; import { TypedTokenAuthMutation, TypedVerifyTokenMutation } from "./mutations"; @@ -100,12 +105,8 @@ class AuthProvider extends React.Component< if (!!token && !user) { this.verifyToken(token); } else { - if (navigator.credentials && navigator.credentials.preventSilentAccess) { - navigator.credentials.get({ password: true }).then(credential => { - if (credential instanceof PasswordCredential) { - this.login(credential.id, credential.password); - } - }); + if (isCredentialsManagementAPISupported) { + loginWithCredentialsManagementAPI(this.login); } } } @@ -116,24 +117,8 @@ class AuthProvider extends React.Component< tokenAuthFn({ variables: { email, password } }).then(result => { if (result && !result.data.tokenCreate.errors.length) { - if ( - navigator.credentials && - navigator.credentials.preventSilentAccess - ) { - const { - data: { - tokenCreate: { user } - } - } = result; - const cred = new PasswordCredential({ - iconURL: user.avatar ? user.avatar.url : undefined, - id: email, - name: user.firstName - ? `${user.firstName} ${user.lastName}` - : undefined, - password - }); - navigator.credentials.store(cred); + if (isCredentialsManagementAPISupported) { + saveCredentials(result.data.tokenCreate.user, password); } } }); @@ -146,7 +131,7 @@ class AuthProvider extends React.Component< logout = () => { this.setState({ user: undefined }); - if (navigator.credentials && navigator.credentials.preventSilentAccess) { + if (isCredentialsManagementAPISupported) { navigator.credentials.preventSilentAccess(); } removeAuthToken(); diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 6e510b5a5..eeb409627 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -87,7 +87,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
diff --git a/src/utils/credentialsManagement.ts b/src/utils/credentialsManagement.ts new file mode 100644 index 000000000..1f02c20bd --- /dev/null +++ b/src/utils/credentialsManagement.ts @@ -0,0 +1,22 @@ +import { User } from "@saleor/auth/types/User"; + +export const isSupported = + navigator.credentials && navigator.credentials.preventSilentAccess; + +export function login(loginFn: (id: string, password: string) => void) { + navigator.credentials.get({ password: true }).then(credential => { + if (credential instanceof PasswordCredential) { + loginFn(credential.id, credential.password); + } + }); +} + +export function saveCredentials(user: User, password: string) { + const cred = new PasswordCredential({ + iconURL: user.avatar ? user.avatar.url : undefined, + id: user.email, + name: user.firstName ? `${user.firstName} ${user.lastName}` : undefined, + password + }); + navigator.credentials.store(cred); +}