fix hardcoded google login, add to register endpoint

dashboard/src/main/auth/Login.tsx

@@ -47,7 +47,7 @@ export default class Login extends Component<PropsType, StateType> {
       .getCapabilities("", {}, {})
       .then((res) => {
         this.setState({ 
-          hasGithub: false,
+          hasGithub: res.data?.github,
           hasGoogle: res.data?.google,
         });
       })

dashboard/src/main/auth/Register.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEvent, Component, useContext } from "react";
 import styled from "styled-components";
 import logo from "assets/logo.png";
 import github from "assets/github-icon.png";
+import GoogleIcon from "assets/GoogleIcon";
 
 import api from "shared/api";
 import { emailRegex } from "shared/regex";
@@ -18,6 +19,7 @@ type StateType = {
   emailError: boolean;
   confirmPasswordError: boolean;
   hasGithub: boolean;
+  hasGoogle: boolean;
 };
 
 export default class Register extends Component<PropsType, StateType> {
@@ -28,6 +30,7 @@ export default class Register extends Component<PropsType, StateType> {
     emailError: false,
     confirmPasswordError: false,
     hasGithub: true,
+    hasGoogle: false,
   };
 
   handleKeyDown = (e: any) => {
@@ -41,7 +44,10 @@ export default class Register extends Component<PropsType, StateType> {
     api
       .getCapabilities("", {}, {})
       .then((res) => {
-        this.setState({ hasGithub: res.data?.github });
+        this.setState({ 
+          hasGithub: res.data?.github,
+          hasGoogle: res.data?.google,
+        });
       })
       .catch((err) => console.log(err));
   }
@@ -55,6 +61,11 @@ export default class Register extends Component<PropsType, StateType> {
     window.location.href = redirectUrl;
   };
 
+  googleRedirect = () => {
+    let redirectUrl = `/api/oauth/login/google`;
+    window.location.href = redirectUrl;
+  };
+
   handleRegister = (): void => {
     let { email, password, confirmPassword } = this.state;
     let { authenticate } = this.props;
@@ -119,18 +130,25 @@ export default class Register extends Component<PropsType, StateType> {
   renderGithubSection = () => {
     if (this.state.hasGithub) {
       return (
-        <>
           <OAuthButton onClick={this.githubRedirect}>
             <IconWrapper>
               <Icon src={github} />
-              Sign up with GitHub
+              Log in with GitHub
+            </IconWrapper>
+          </OAuthButton>
+      );
+    }
+  };
+
+  renderGoogleSection = () => {
+    if (this.state.hasGoogle) {
+      return (
+          <OAuthButton onClick={this.googleRedirect}>
+            <IconWrapper>
+              <StyledGoogleIcon />
+              Log in with Google
             </IconWrapper>
           </OAuthButton>
-          <OrWrapper>
-            <Line />
-            <Or>or</Or>
-          </OrWrapper>
-        </>
       );
     }
   };
@@ -146,7 +164,7 @@ export default class Register extends Component<PropsType, StateType> {
 
     return (
       <StyledRegister>
-        <LoginPanel>
+        <LoginPanel numOAuth={+this.state.hasGithub + +this.state.hasGoogle}>
           <OverflowWrapper>
             <GradientBg />
           </OverflowWrapper>
@@ -154,6 +172,14 @@ export default class Register extends Component<PropsType, StateType> {
             <Logo src={logo} />
             <Prompt>Sign up for Porter</Prompt>
             {this.renderGithubSection()}
+            {this.renderGoogleSection()}
+            {(this.state.hasGithub || this.state.hasGoogle) ? 
+              <OrWrapper>
+                <Line />
+                <Or>or</Or>
+              </OrWrapper> :
+              null
+            }
             <DarkMatter />
             <InputWrapper>
               <Input
@@ -263,9 +289,14 @@ const IconWrapper = styled.div`
 
 const Icon = styled.img`
   height: 18px;
-  margin-right: 20px;
+  margin: 14px;
 `;
 
+const StyledGoogleIcon = styled(GoogleIcon)`
+  width: 38px;
+  height: 38px;
+`
+
 const OAuthButton = styled.div`
   width: 200px;
   height: 30px;
@@ -278,6 +309,8 @@ const OAuthButton = styled.div`
   user-select: none;
   font-weight: 500;
   font-size: 13px;
+  margin: 10px 0; 
+  overflow: hidden;
   :hover {
     background: #ffffffdd;
   }
@@ -405,11 +438,11 @@ const FormWrapper = styled.div`
 
 const GradientBg = styled.div`
   background: linear-gradient(#8ce1ff, #a59eff, #fba8ff);
-  width: 180%;
-  height: 180%;
+  width: 200%;
+  height: 200%;
   position: absolute;
-  top: -40%;
-  left: -40%;
+  top: -50%;
+  left: -50%;
   animation: flip 6s infinite linear;
   @keyframes flip {
     from {
@@ -423,7 +456,8 @@ const GradientBg = styled.div`
 
 const LoginPanel = styled.div`
   width: 330px;
-  height: 500px;
+  height: ${(props: { numOAuth: number }) =>
+    450 + props.numOAuth * 50}px;
   background: white;
   margin-top: -20px;
   border-radius: 10px;

server/router/router.go

@@ -11,8 +11,8 @@ import (
 	"github.com/go-chi/chi/middleware"
 	"github.com/porter-dev/porter/internal/auth/token"
 	"github.com/porter-dev/porter/server/api"
-	"github.com/porter-dev/porter/server/requestlog"
-	mw "github.com/porter-dev/porter/server/router/middleware"
+	mw "github.com/porter-dev/porter/server/middleware"
+	"github.com/porter-dev/porter/server/middleware/requestlog"
 )
 
 // New creates a new Chi router instance and registers all routes supported by the