⚡ Some small changes to basic OAuth support

packages/editor-ui/src/components/CredentialsInput.vue

@@ -13,6 +13,26 @@
 			</el-col>
 		</el-row>
 
+		<el-row v-if="isOAuthType" class="oauth-information">
+			<el-col :span="6" class="headline">
+				OAuth
+			</el-col>
+			<el-col :span="18">
+				<span v-if="isOAuthConnected === true">
+					<el-button title="Reconnect OAuth Credentials" @click.stop="oAuth2CredentialAuthorize()" circle>
+						<font-awesome-icon icon="redo" />
+					</el-button>
+					Is connected
+				</span>
+				<span v-else>
+					<el-button title="Connect OAuth Credentials" @click.stop="oAuth2CredentialAuthorize()" circle>
+						<font-awesome-icon icon="sign-in-alt" />
+					</el-button>
+					Is NOT connected
+				</span>
+			</el-col>
+		</el-row>
+
 		<br />
 		<div class="headline">
 			Credential Data:
@@ -152,6 +172,16 @@ export default mixins(
 				};
 			});
 		},
+		isOAuthType (): boolean {
+			return this.credentialData && this.credentialData.type === 'oAuth2Api';
+		},
+		isOAuthConnected (): boolean {
+			if (this.isOAuthType === false) {
+				return false;
+			}
+
+			return !!this.credentialData.data.oauthTokenData;
+		},
 	},
 	methods: {
 		valueChanged (parameterData: IUpdateInformation) {
@@ -189,6 +219,48 @@ export default mixins(
 
 			this.$emit('credentialsCreated', result);
 		},
+		async oAuth2CredentialAuthorize () {
+			let url;
+			try {
+				url = await this.restApi().oAuth2CredentialAuthorize(this.credentialData) as string;
+			} catch (error) {
+				this.$showError(error, 'OAuth Authorization Error', 'Error generating authorization URL:');
+				return;
+			}
+
+			const params = `scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700`;
+			const oauthPopup = window.open(url, 'OAuth2 Authorization', params);
+
+			const receiveMessage = (event: MessageEvent) => {
+				// // TODO: Add check that it came from n8n
+				// if (event.origin !== 'http://example.org:8080') {
+				// 	return;
+				// }
+
+				if (event.data === 'success') {
+
+					// Set some kind of data that status changes.
+					// As data does not get displayed directly it does not matter what data.
+					this.credentialData.data.oauthTokenData = {};
+
+					// Close the window
+					if (oauthPopup) {
+						oauthPopup.close();
+					}
+
+					this.$showMessage({
+						title: 'Connected',
+						message: 'Got connected!',
+						type: 'success',
+					});
+				}
+
+				// Make sure that the event gets removed again
+				window.removeEventListener('message', receiveMessage, false);
+			};
+
+			window.addEventListener('message', receiveMessage, false);
+		},
 		async updateCredentials () {
 			const nodesAccess: ICredentialNodeAccess[] = [];
 			const addedNodeTypes: string[] = [];
@@ -301,6 +373,11 @@ export default mixins(
 		line-height: 1.75em;
 	}
 
+	.oauth-information {
+		line-height: 2.5em;
+		margin-top: 2em;
+	}
+
 	.parameter-wrapper {
 		line-height: 3em;
 

packages/editor-ui/src/components/CredentialsList.vue

@@ -25,12 +25,10 @@
 				<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
 				<el-table-column
 					label="Operations"
-					width="180">
+					width="120">
 					<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>
@@ -93,20 +91,6 @@ 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,

packages/editor-ui/src/components/mixins/restApi.ts

@@ -253,15 +253,15 @@ export const restApi = Vue.extend({
 				},
 
 				// Get OAuth2 Authorization URL using the stored credentials
-				OAuth2CredentialAuthorize: (sendData: ICredentialsResponse): Promise<string> => {
+				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> => {
+				oAuth2Callback: (code: string, state: string): Promise<string> => {
 					const sendData = {
 						'code': code,
-						'state': state
+						'state': state,
 					};
 
 					return self.restApi().makeRestApiRequest('POST', `/oauth2-credential/callback`, sendData);