modal and backend endpoints for app oauth

dashboard/src/main/home/Home.tsx

@@ -26,6 +26,7 @@ import ProjectSettings from "./project-settings/ProjectSettings";
 import Sidebar from "./sidebar/Sidebar";
 import PageNotFound from "components/PageNotFound";
 import DeleteNamespaceModal from "./modals/DeleteNamespaceModal";
+import AccountSettingsModal from "./modals/AccountSettingsModal";
 
 type PropsType = RouteComponentProps & {
   logOut: () => void;
@@ -520,6 +521,15 @@ class Home extends Component<PropsType, StateType> {
             <DeleteNamespaceModal />
           </Modal>
         )}
+        {currentModal === "AccountSettingsModal" && (
+          <Modal
+            onRequestClose={() => setCurrentModal(null, null)}
+            width="700px"
+            height="280px"
+          >
+            <AccountSettingsModal />
+          </Modal>
+        )}
 
         {this.renderSidebar()}
 

dashboard/src/main/home/modals/AccountSettingsModal.tsx

@@ -0,0 +1,87 @@
+import React, { useContext } from "react";
+import styled from "styled-components";
+import close from "../../../assets/close.png";
+import { Context } from "../../../shared/Context";
+
+const AccountSettingsModal = () => {
+  const { setCurrentModal } = useContext(Context);
+
+  const handleConnectGithub = () => {};
+
+  return (
+    <>
+      <CloseButton
+        onClick={() => {
+          setCurrentModal(null, null);
+        }}
+      >
+        <CloseButtonImg src={close} />
+      </CloseButton>
+      <ModalTitle>Account Settings</ModalTitle>
+      <Subtitle>Github Integration</Subtitle>
+      <br />
+      {/* Will be styled (and show what account is connected) later */}
+      No github integration detected. You can{" "}
+      <A href={"/api/integrations/github-app/install"}>
+        connect your GitHub account
+      </A>
+    </>
+  );
+};
+
+export default AccountSettingsModal;
+
+const ModalTitle = styled.div`
+  margin: 0px 0px 13px;
+  display: flex;
+  flex: 1;
+  font-family: "Assistant";
+  font-size: 18px;
+  color: #ffffff;
+  user-select: none;
+  font-weight: 700;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const Subtitle = styled.div`
+  margin-top: 23px;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #aaaabb;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: -10px;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  padding: 13px 0 12px 0;
+  z-index: 1;
+  text-align: center;
+  border-radius: 50%;
+  right: 15px;
+  top: 12px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+`;
+
+const CloseButtonImg = styled.img`
+  width: 14px;
+  margin: 0 auto;
+`;
+
+const A = styled.a`
+  color: #8590ff;
+  text-decoration: underline;
+  margin-left: 5px;
+  cursor: pointer;
+`;

dashboard/src/main/home/navbar/Navbar.tsx

@@ -31,7 +31,11 @@ export default class Navbar extends Component<PropsType, StateType> {
             <DropdownLabel>
               {this.context.user && this.context.user.email}
             </DropdownLabel>
-            <UserDropdownButton onClick={() => alert("hello")}>
+            <UserDropdownButton
+              onClick={() =>
+                this.context.setCurrentModal("AccountSettingsModal", {})
+              }
+            >
               Account Settings
             </UserDropdownButton>
             <UserDropdownButton onClick={this.props.logOut}>

server/api/integration_handler.go

@@ -3,6 +3,8 @@ package api
 import (
 	"encoding/json"
 	"github.com/google/go-github/github"
+	"github.com/porter-dev/porter/internal/oauth"
+	"golang.org/x/oauth2"
 	"gorm.io/gorm"
 	"io/ioutil"
 	"net/http"
@@ -428,3 +430,20 @@ func (app *App) HandleGithubAppEvent(w http.ResponseWriter, r *http.Request) {
 	}
 
 }
+
+// HandleGithubAppInstall starts the oauth2 flow for a project repo request.
+func (app *App) HandleGithubAppInstall(w http.ResponseWriter, r *http.Request) {
+	state := oauth.CreateRandomState()
+
+	err := app.populateOAuthSession(w, r, state, false)
+
+	if err != nil {
+		app.handleErrorDataRead(err, w)
+		return
+	}
+
+	// specify access type offline to get a refresh token
+	url := app.GithubAppConf.AuthCodeURL(state, oauth2.AccessTypeOffline)
+
+	http.Redirect(w, r, url, 302)
+}

server/router/router.go

@@ -182,6 +182,12 @@ func New(a *api.App) *chi.Mux {
 				requestlog.NewHandler(a.HandleGithubAppEvent, l),
 			)
 
+			r.Method(
+				"GET",
+				"/integrations/github-app/install",
+				requestlog.NewHandler(a.HandleGithubAppInstall, l),
+			)
+
 			// /api/templates routes
 			r.Method(
 				"GET",