From cb73853680449dbfae5b8ec141ed4e6464a0ce8d Mon Sep 17 00:00:00 2001
From: Ram Yalamanchili <ramyinc@gmail.com>
Date: Wed, 1 Jan 2020 22:49:18 -0800
Subject: [PATCH] Add UI logic to support OAuth authentication flow

Add support in credentialsList to kickoff an OAuth2 authorization
flow. This enables users to authenticate and allow n8n to store
the resulting keys in the backend.
---
 packages/editor-ui/src/Interface.ts           |  2 ++
 .../src/components/CredentialsList.vue        | 20 +++++++++++++++++--
 .../src/components/mixins/restApi.ts          | 15 ++++++++++++++
 packages/editor-ui/src/router.ts              |  6 ++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index e6e34fb9d5..a79ebdd8fd 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -145,6 +145,8 @@ export interface IRestApi {
 	deleteExecutions(sendData: IExecutionDeleteFilter): Promise<void>;
 	retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
 	getTimezones(): Promise<IDataObject>;
+	OAuth2CredentialAuthorize(sendData: ICredentialsResponse): Promise<string>;
+	OAuth2Callback(code: string, state: string): Promise<string>;
 }
 
 export interface IBinaryDisplayData {
diff --git a/packages/editor-ui/src/components/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
index 758adf1a4c..eeece990bc 100644
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ b/packages/editor-ui/src/components/CredentialsList.vue
@@ -25,10 +25,12 @@
 				<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
 				<el-table-column
 					label="Operations"
-					width="120">
+					width="180">
 					<template slot-scope="scope">
 						<el-button title="Edit Credentials" @click.stop="editCredential(scope.row)" icon="el-icon-edit" circle></el-button>
 						<el-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
+						<!-- Would be nice to have this button switch from connect to disconnect based on the credential status -->
+						<el-button title="Connect OAuth Credentials" @click.stop="OAuth2CredentialAuthorize(scope.row)" icon="el-icon-caret-right" v-if="scope.row.type == 'OAuth2Api'" circle></el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -91,6 +93,20 @@ export default mixins(
 			this.editCredentials = null;
 			this.credentialEditDialogVisible = true;
 		},
+		async OAuth2CredentialAuthorize (credential: ICredentialsResponse) {
+			let url;
+			try {
+				url = await this.restApi().OAuth2CredentialAuthorize(credential) as string;
+			} catch (error) {
+				this.$showError(error, 'OAuth Authorization Error', 'Error generating authorization URL:');
+				return;
+			}
+
+			const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
+			const oauthPopup = window.open(url, 'OAuth2 Authorization', params);
+
+			console.log(oauthPopup);
+		},
 		editCredential (credential: ICredentialsResponse) {
 			const editCredentials = {
 				id: credential.id,
@@ -124,7 +140,7 @@ export default mixins(
 			try {
 				this.credentials = JSON.parse(JSON.stringify(this.$store.getters.allCredentials));
 			} catch (error) {
-				this.$showError(error, 'Proble loading credentials', 'There was a problem loading the credentials:');
+				this.$showError(error, 'Problem loading credentials', 'There was a problem loading the credentials:');
 				this.isDataLoading = false;
 				return;
 			}
diff --git a/packages/editor-ui/src/components/mixins/restApi.ts b/packages/editor-ui/src/components/mixins/restApi.ts
index a72520718e..a2cdbd6584 100644
--- a/packages/editor-ui/src/components/mixins/restApi.ts
+++ b/packages/editor-ui/src/components/mixins/restApi.ts
@@ -252,6 +252,21 @@ export const restApi = Vue.extend({
 					return self.restApi().makeRestApiRequest('GET', `/credential-types`);
 				},
 
+				// Get OAuth2 Authorization URL using the stored credentials
+				OAuth2CredentialAuthorize: (sendData: ICredentialsResponse): Promise<string> => {
+					return self.restApi().makeRestApiRequest('GET', `/oauth2-credential/auth`, sendData);
+				},
+
+				// Verify OAuth2 provider callback and kick off token generation
+				OAuth2Callback: (code: string, state: string): Promise<string> => {
+					const sendData = {
+						'code': code,
+						'state': state
+					};
+
+					return self.restApi().makeRestApiRequest('POST', `/oauth2-credential/callback`, sendData);
+				},
+
 				// Returns the execution with the given name
 				getExecution: async (id: string): Promise<IExecutionResponse> => {
 					const response = await self.restApi().makeRestApiRequest('GET', `/executions/${id}`);
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 14a31c7e80..f33d028f94 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -19,6 +19,12 @@ export default new Router({
 				sidebar: MainSidebar,
 			},
 		},
+		{
+			path: '/oauth2/callback',
+			name: 'OAuth2Callback',
+			components: {
+			},
+		},
 		{
 			path: '/workflow',
 			name: 'NodeViewNew',