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 e6e34fb9d..a79ebdd8f 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 758adf1a4..eeece990b 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 a72520718..a2cdbd658 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 14a31c7e8..f33d028f9 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',