knadh/listmonk
1
1
Fork 0
mirror of https://github.com/knadh/listmonk.git synced 2025-03-01 00:35:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add one-click provider config shortcut in OIDC settings.

Browse source
This commit is contained in:
Kailash Nadh 2024-07-09 00:38:55 +05:30
parent 4eabd967d8
commit 193f8a866b
1 changed files with 54 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
frontend/src/views/settings/security.vue
View file

@ -8,21 +8,33 @@
</div>
<div class="column is-8">
<b-field :label="$t('settings.security.OIDCURL')" label-position="on-border">
<b-input v-model="data['security.oidc']['provider_url']" name="oidc.provider_url"
placeholder="https://login.yoursite.com" :disabled="!data['security.oidc']['enabled']" :maxlength="300"
required type="url" pattern="https?://.*" />
<div>
<b-input v-model="data['security.oidc']['provider_url']" name="oidc.provider_url"
placeholder="https://login.yoursite.com" :disabled="!data['security.oidc']['enabled']" :maxlength="300"
required type="url" pattern="https?://.*" />
<div class="spaced-links is-size-7 mt-2" :class="{ 'disabled': !data['security.oidc']['enabled'] }">
<a href="#" @click.prevent="() => setProvider(n, 'google')">Google</a>
<a href="#" @click.prevent="() => setProvider(n, 'github')">GitHub</a>
<a href="#" @click.prevent="() => setProvider(n, 'microsoft')">Microsoft</a>
<a href="#" @click.prevent="() => setProvider(n, 'apple')">Apple</a>
</div>
</div>
</b-field>
<b-field :label="$t('settings.security.OIDCClientID')" label-position="on-border">
<b-input v-model="data['security.oidc']['client_id']" name="oidc.client_id"
<b-input v-model="data['security.oidc']['client_id']" name="oidc.client_id" ref="client_id"
:disabled="!data['security.oidc']['enabled']" :maxlength="200" required />
</b-field>
<b-field :label="$t('settings.security.OIDCClientSecret')" label-position="on-border">
<b-input v-model="data['security.oidc']['client_secret']" name="oidc.client_secret" type="password"
:disabled="!data['security.oidc']['enabled']" :maxlength="200" required />
</b-field>
<p class="is-size-7">
<b-icon icon="warning-empty" /> {{ $t('settings.security.OIDCWarning') }}
</p>
<b-field :label="$t('settings.security.OIDCRedirectURL')">
<code><copy-text :text="`${serverConfig.root_url}/auth/oidc`" /></code>
</b-field>
</div>
</div>
@ -50,14 +62,49 @@
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import CopyText from '../../components/CopyText.vue';
const OIDC_PROVIDERS = {
google: 'https://accounts.google.com',
github: 'https://token.actions.githubusercontent.com',
microsoft: 'https://login.microsoftonline.com/{TENANT_HERE}/v2.0',
apple: 'https://appleid.apple.com',
};
export default Vue.extend({
components: {
CopyText,
},
props: {
form: {
type: Object, default: () => { },
},
},
computed: {
...mapState(['serverConfig']),
version() {
return import.meta.env.VUE_APP_VERSION;
},
isMobile() {
return this.windowWidth <= 768;
},
},
methods: {
setProvider(n, provider) {
this.$set(this.data['security.oidc'], 'provider_url', OIDC_PROVIDERS[provider]);
this.$nextTick(() => {
this.$refs.client_id.focus();
});
},
},
data() {
return {
data: this.form,