From 193f8a866bec54a5912520411ea4ac4d2d176f9d Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Tue, 9 Jul 2024 00:38:55 +0530
Subject: [PATCH] Add one-click provider config shortcut in OIDC settings.

---
 frontend/src/views/settings/security.vue | 61 +++++++++++++++++++++---
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/settings/security.vue b/frontend/src/views/settings/security.vue
index 525a51e8..2c2b051c 100644
--- a/frontend/src/views/settings/security.vue
+++ b/frontend/src/views/settings/security.vue
@@ -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,