diff --git a/package-lock.json b/package-lock.json index eedf6a666..f36d4e3c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3126,6 +3126,12 @@ "integrity": "sha512-bM7dzLHuCqDNlbeOxvo/KfweN3La4d9C1VFGCgefxiZXn0JcRtyGDwWCSUEO8RrMhnx/LGhDOXP8TTokM1grSA==", "dev": true }, + "@types/webappsec-credential-management": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@types/webappsec-credential-management/-/webappsec-credential-management-0.5.1.tgz", + "integrity": "sha512-ZIl4fCJm3mo0jzivFnxhA4qYEY/HicVPxLbcqQTZ3JjnhEFJwYAEPEZft7AJo/MVxHU4mFdAauX+jo+a4m1Qkg==", + "dev": true + }, "@types/webpack-env": { "version": "1.14.0", "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.14.0.tgz", @@ -9409,7 +9415,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9427,11 +9434,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9444,15 +9453,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9555,7 +9567,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9565,6 +9578,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9577,17 +9591,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9604,6 +9621,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9676,7 +9694,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9686,6 +9705,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9761,7 +9781,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -9791,6 +9812,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9808,6 +9830,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9846,11 +9869,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/package.json b/package.json index d18a61efb..d10af41d7 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "@types/storybook__react": "^4.0.2", "@types/string-similarity": "^1.2.1", "@types/url-join": "^0.8.3", + "@types/webappsec-credential-management": "^0.5.1", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.6.0", "babel-loader": "^8.0.6", diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx index b09edcf96..78fcf76c1 100644 --- a/src/auth/AuthProvider.tsx +++ b/src/auth/AuthProvider.tsx @@ -99,15 +99,44 @@ class AuthProvider extends React.Component< const token = getAuthToken(); 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); + } + }); + } } } - login = (email: string, password: string, persistToken: boolean) => { + login = async (email: string, password: string) => { const { tokenAuth } = this.props; const [tokenAuthFn] = tokenAuth; - this.setState({ persistToken }); - tokenAuthFn({ variables: { email, password } }); + 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); + } + } + }); }; loginByToken = (token: string, user: User) => { @@ -117,6 +146,9 @@ class AuthProvider extends React.Component< logout = () => { this.setState({ user: undefined }); + if (navigator.credentials && navigator.credentials.preventSilentAccess) { + navigator.credentials.preventSilentAccess(); + } removeAuthToken(); }; diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 9f3345e54..6e510b5a5 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -10,23 +10,20 @@ import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import Form from "@saleor/components/Form"; import { FormSpacer } from "@saleor/components/FormSpacer"; import { commonMessages } from "@saleor/intl"; export interface FormData { email: string; - loading: boolean; password: string; - rememberMe: boolean; } const styles = (theme: Theme) => createStyles({ buttonContainer: { display: "flex", - justifyContent: "space-between" + justifyContent: "flex-end" }, link: { color: theme.palette.primary.main, @@ -65,10 +62,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })( const intl = useIntl(); return ( -
+ {({ change: handleChange, data, submit: handleSubmit }) => ( <> {error && ( @@ -105,16 +99,6 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })( />
- -