Implement the Credential Management API

Fixes #156

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
         }
       }
     },

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",

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 } }).then(result => {
-    tokenAuthFn({ variables: { email, password } });
+      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();
   };
 

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 (
-      <Form
+      <Form initial={{ email: "", password: "" }} onSubmit={onSubmit}>
-        initial={{ email: "", password: "", rememberMe: false }}
-        onSubmit={onSubmit}
-      >
         {({ change: handleChange, data, submit: handleSubmit }) => (
           <>
             {error && (
@@ -105,16 +99,6 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
             />
             <FormSpacer />
             <div className={classes.buttonContainer}>
-              <ControlledCheckbox
-                checked={data.rememberMe}
-                label={intl.formatMessage({
-                  defaultMessage: "Remember me",
-                  description: "login"
-                })}
-                name="rememberMe"
-                onChange={handleChange}
-              />
-              <FormSpacer />
               <Button
                 className={classes.loginButton}
                 color="primary"

src/auth/index.tsx

@@ -14,7 +14,7 @@ import ResetPassword from "./views/ResetPassword";
 import ResetPasswordSuccess from "./views/ResetPasswordSuccess";
 
 interface UserContext {
-  login: (username: string, password: string, persist: boolean) => void;
+  login: (username: string, password: string) => void;
   loginByToken: (token: string, user: User) => void;
   logout: () => void;
   tokenAuthLoading: boolean;

src/auth/views/Login.tsx

@@ -9,8 +9,7 @@ const LoginView: React.FC = () => {
   const navigate = useNavigator();
   const { login, user, tokenAuthLoading } = useUser();
 
-  const handleSubmit = (data: FormData) =>
+  const handleSubmit = (data: FormData) => login(data.email, data.password);
-    login(data.email, data.password, data.rememberMe);
 
   return (
     <LoginPage