Customize log in button

src/app-helpers.js

@@ -29,6 +29,7 @@ export function Loading({ repo, path }) {
 }
 
 export function Error({ error, gitProvider }) {
+  const { LogInButton } = gitProvider;
   if (error.status === 403) {
     return (
       <Center>
@@ -36,7 +37,7 @@ export function Error({ error, gitProvider }) {
           GitHub API rate limit exceeded for your IP (60 requests per hour).
         </p>
         <p>Sign in with GitHub for more:</p>
-        <GitHubButton onClick={gitProvider.logIn} />
+        <LogInButton />
       </Center>
     );
   }
@@ -47,8 +48,8 @@ export function Error({ error, gitProvider }) {
         <p>File not found.</p>
         {gitProvider.isLoggedIn && !gitProvider.isLoggedIn() && (
           <React.Fragment>
-            <p>Is it from a private repo? Sign in with GitHub:</p>
+            <p>Is it from a private repo? Sign in:</p>
-            <GitHubButton onClick={gitProvider.logIn} />
+            <LogInButton />
           </React.Fragment>
         )}
       </Center>
@@ -66,31 +67,6 @@ export function Error({ error, gitProvider }) {
   );
 }
 
-function GitHubButton({ onClick }) {
-  return (
-    <button
-      onClick={onClick}
-      style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
-    >
-      <div>
-        <svg
-          fill="currentColor"
-          preserveAspectRatio="xMidYMid meet"
-          height="1em"
-          width="1em"
-          viewBox="0 0 40 40"
-          style={{ verticalAlign: "middle", marginRight: "0.5rem" }}
-        >
-          <g>
-            <path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
-          </g>
-        </svg>
-        Sign in with GitHub
-      </div>
-    </button>
-  );
-}
-
 export function useLoader(promiseFactory, deps) {
   const [state, setState] = useState({
     data: null,

src/git-providers/github-provider.js

@@ -1,4 +1,5 @@
 import netlify from "netlify-auth-providers";
+import React from "react";
 import { Base64 } from "js-base64";
 const TOKEN_KEY = "github-token";
 
@@ -114,11 +115,36 @@ function logIn() {
   });
   // });
 }
+function LogInButton() {
+  return (
+    <button
+      onClick={logIn}
+      style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
+    >
+      <div>
+        <svg
+          fill="currentColor"
+          preserveAspectRatio="xMidYMid meet"
+          height="1em"
+          width="1em"
+          viewBox="0 0 40 40"
+          style={{ verticalAlign: "middle", marginRight: "0.5rem" }}
+        >
+          <g>
+            <path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
+          </g>
+        </svg>
+        Sign in with GitHub
+      </div>
+    </button>
+  );
+}
 
 export default {
   showLanding,
   getPath,
   getCommits,
   logIn,
-  isLoggedIn
+  isLoggedIn,
+  LogInButton
 };

src/git-providers/gitlab-provider.js

@@ -1,5 +1,6 @@
 import netlify from "netlify-auth-providers";
 import { Base64 } from "js-base64";
+import React from "react";
 const TOKEN_KEY = "gitlab-token";
 
 function getHeaders() {
@@ -115,10 +116,22 @@ function logIn() {
   // });
 }
 
+function LogInButton() {
+  return (
+    <button
+      onClick={logIn}
+      style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
+    >
+      <div>Sign in with GitLab</div>
+    </button>
+  );
+}
+
 export default {
   showLanding,
   getPath,
   getCommits,
   logIn,
-  isLoggedIn
+  isLoggedIn,
+  LogInButton
 };