mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-20 23:07:32 -07:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

⚡ Improve OAuth connect flow

Browse source
This commit is contained in:
Jan Oberhauser 2020-05-18 11:58:37 +02:00
parent 95097a8bd7
commit 00935032e2
1 changed files with 41 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
packages/editor-ui/src/components/CredentialsInput.vue
View file

@ -12,13 +12,41 @@
<el-input size="small" type="text" v-model="name"></el-input>
</el-col>
</el-row>
<br />
<div class="headline" v-if="credentialProperties.length">
Credential Data:
<el-tooltip class="credentials-info" placement="top" effect="light">
<div slot="content" v-html="helpTexts.credentialsData"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</div>
<div v-for="parameter in credentialProperties" :key="parameter.name">
<el-row class="parameter-wrapper">
<el-col :span="6" class="parameter-name">
{{parameter.displayName}}:
<el-tooltip placement="top" class="parameter-info" v-if="parameter.description" effect="light">
<div slot="content" v-html="parameter.description"></div>
<font-awesome-icon icon="question-circle"/>
</el-tooltip>
</el-col>
<el-col :span="18">
<parameter-input :parameter="parameter" :value="propertyValue[parameter.name]" :path="parameter.name" :isCredential="true" @valueChanged="valueChanged" />
</el-col>
</el-row>
</div>
<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">
<span v-if="requiredPropertiesFilled === false">
<el-button title="Connect OAuth Credentials" circle :disabled="true">
<font-awesome-icon icon="redo" />
</el-button>
Not all required credential properties are filled
</span>
<span v-else-if="isOAuthConnected === true">
<el-button title="Reconnect OAuth Credentials" @click.stop="oAuth2CredentialAuthorize()" circle>
<font-awesome-icon icon="redo" />
</el-button>
@ -46,29 +74,6 @@
</el-col>
</el-row>
<br />
<div class="headline" v-if="credentialProperties.length">
Credential Data:
<el-tooltip class="credentials-info" placement="top" effect="light">
<div slot="content" v-html="helpTexts.credentialsData"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</div>
<div v-for="parameter in credentialProperties" :key="parameter.name">
<el-row class="parameter-wrapper">
<el-col :span="6" class="parameter-name">
{{parameter.displayName}}:
<el-tooltip placement="top" class="parameter-info" v-if="parameter.description" effect="light">
<div slot="content" v-html="parameter.description"></div>
<font-awesome-icon icon="question-circle"/>
</el-tooltip>
</el-col>
<el-col :span="18">
<parameter-input :parameter="parameter" :value="propertyValue[parameter.name]" :path="parameter.name" :isCredential="true" @valueChanged="valueChanged" />
</el-col>
</el-row>
</div>
<el-row class="nodes-access-wrapper">
<el-col :span="6" class="headline">
Nodes with access:
@ -230,6 +235,18 @@ export default mixins(
oAuthCallbackUrl (): string {
return this.$store.getters.getWebhookBaseUrl + 'rest/oauth2-credential/callback';
},
requiredPropertiesFilled (): boolean {
for (const property of this.credentialProperties) {
if (property.required !== true) {
continue;
}
if (!this.propertyValue[property.name]) {
return false;
}
}
return true;
},
},
methods: {
copyCallbackUrl (): void {