Add a thin layer of abstraction

package-lock.json

@@ -9415,8 +9415,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9434,13 +9433,11 @@
         },
         "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"
@@ -9453,18 +9450,15 @@
         },
         "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",
@@ -9567,8 +9561,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": 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,
+          "bundled": true
-          "optional": 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,
+          "bundled": true
-          "optional": 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,
+          "bundled": true
-          "optional": 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,
+          "bundled": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         }
       }
     },

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) {
+      if (isCredentialsManagementAPISupported) {
-        navigator.credentials.get({ password: true }).then(credential => {
+        loginWithCredentialsManagementAPI(this.login);
-          if (credential instanceof PasswordCredential) {
-            this.login(credential.id, credential.password);
-          }
-        });
       }
     }
   }
@@ -116,24 +117,8 @@ class AuthProvider extends React.Component<
 
     tokenAuthFn({ variables: { email, password } }).then(result => {
       if (result && !result.data.tokenCreate.errors.length) {
-        if (
+        if (isCredentialsManagementAPISupported) {
-          navigator.credentials &&
+          saveCredentials(result.data.tokenCreate.user, password);
-          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);
         }
       }
     });
@@ -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();

src/auth/components/LoginPage/LoginPage.tsx

@@ -87,7 +87,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
             <FormSpacer />
             <TextField
               fullWidth
-              autoComplete="current-password"
+              autoComplete="password"
               label={intl.formatMessage({
                 defaultMessage: "Password"
               })}
@@ -95,7 +95,9 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
               onChange={handleChange}
               type="password"
               value={data.password}
-              data-tc="password"
+              inputProps={{
+                "data-tc": "password"
+              }}
             />
             <FormSpacer />
             <div className={classes.buttonContainer}>

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);
+}