Add Google icon for OAuth to meet their branding guidelines

This commit is contained in:
Jan Oberhauser 2020-12-03 12:36:34 +01:00
parent 9969faf52a
commit 8fee799d3d
2 changed files with 21 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -52,12 +52,17 @@
</el-button>
Connected
</span>
<span v-else>
<span v-if="isGoogleOAuthType">
<img :src="basePath + 'google-signin.png'" class="google-icon clickable" alt="Sign in with Google" @click.stop="oAuthCredentialAuthorize()" />
</span>
<span v-else>
<el-button title="Connect OAuth Credentials" @click.stop="oAuthCredentialAuthorize()" circle>
<font-awesome-icon icon="sign-in-alt" />
</el-button>
Not connected
</span>
</span>
<div v-if="credentialProperties.length">
<div class="clickable oauth-callback-headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? 'Click to display Webhook URLs' : 'Click to hide Webhook URLs'">
@ -160,6 +165,7 @@ export default mixins(
},
data () {
return {
basePath: this.$store.getters.getBaseUrl,
isMinimized: true,
helpTexts: {
credentialsData: 'The credentials to set.',
@ -218,6 +224,13 @@ export default mixins(
return this.credentialDataTemp;
},
isGoogleOAuthType (): boolean {
if (this.credentialTypeData.name === 'googleOAuth2Api') {
return true;
}
const types = this.parentTypes(this.credentialTypeData.name);
return types.includes('googleOAuth2Api');
},
isOAuthType (): boolean {
if (['oAuth1Api', 'oAuth2Api'].includes(this.credentialTypeData.name)) {
return true;
@ -531,6 +544,10 @@ export default mixins(
.oauth-information {
line-height: 2.5em;
margin: 2em 0;
.google-icon {
width: 191px;
}
}
.parameter-wrapper {