Fetch and show provider links on login

app/src/lang/en-US/index.json

@@ -690,6 +690,8 @@
 
 	"empty_item": "Empty Item",
 
+	"log_in_with": "Log In with {provider}",
+
 	"filter": "Filter",
 	"advanced_filter": "Advanced Filter",
 	"operators": {

app/src/routes/login/components/login-form/login-form.vue

@@ -17,32 +17,14 @@
 			</router-link>
 		</div>
 
-		<!-- <template v-if="ssoProviders">
-			<v-divider class="sso-divider" />
-
-			<v-button
-				secondary
-				class="sso-button"
-				rounded
-				icon
-				v-for="provider in ssoProviders"
-				:key="provider.name"
-				:href="provider.link"
-			>
-				<img :src="provider.icon" :alt="provider.name" />
-			</v-button>
-
-			<v-notice class="sso-notice" type="danger" v-if="ssoError">
-				{{ translateAPIError(ssoError) }}
-			</v-notice>
-		</template> -->
+		<sso-links />
 	</form>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import router from '@/router';
-//
+import ssoLinks from '../sso-links.vue';
 import { login } from '@/auth';
 import { RequestError } from '@/api';
 import { translateAPIError } from '@/lang';
@@ -55,12 +37,7 @@ type Credentials = {
 };
 
 export default defineComponent({
-	props: {
-		ssoError: {
-			type: String,
-			default: null,
-		},
-	},
+	components: { ssoLinks },
 	setup() {
 		const loggingIn = ref(false);
 		const email = ref<string | null>(null);
@@ -81,19 +58,7 @@ export default defineComponent({
 			return null;
 		});
 
-		/** @todo fetch these from /auth/sso */
-		// const ssoProviders = computed(() => {
-		// 	const redirectURL = getRootPath() + `admin/login`;
-		// 	return projectsStore.currentProject.value.sso.map((provider: { icon: string; name: string }) => {
-		// 		return {
-		// 			...provider,
-		// 			link: `/auth/sso/${provider.name}?mode=cookie&redirect_url=${redirectURL}`,
-		// 		};
-		// 	});
-		// });
-
 		return {
-			// ssoProviders,
 			errorFormatted,
 			error,
 			email,
@@ -162,19 +127,4 @@ export default defineComponent({
 		color: var(--foreground-normal);
 	}
 }
-
-.sso-divider {
-	margin: 24px 0;
-}
-
-.sso-button {
-	img {
-		width: 24px;
-		height: auto;
-	}
-}
-
-.sso-notice {
-	margin-top: 24px;
-}
 </style>

app/src/routes/login/components/sso-links.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="sso-links">
+		<template v-if="providers.length > 0">
+			<v-divider />
+
+			<a class="sso-link" v-for="provider in providers" :key="provider.name" :href="provider.link">
+				{{ $t('log_in_with', { provider: provider.name }) }}
+			</a>
+		</template>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/composition-api';
+import api from '@/api';
+import getRootPath from '@/utils/get-root-path';
+
+export default defineComponent({
+	setup() {
+		const providers = ref([]);
+		const loading = ref(false);
+		const error = ref(null);
+
+		onMounted(() => fetchProviders());
+
+		return { providers };
+
+		async function fetchProviders() {
+			loading.value = true;
+			error.value = null;
+
+			try {
+				const response = await api.get('/auth/oauth/');
+
+				providers.value = response.data.data.map((providerName: string) => {
+					return {
+						name: providerName,
+						link: `${getRootPath()}auth/oauth/${providerName.toLowerCase()}?redirect=${
+							window.location.href
+						}`,
+					};
+				});
+			} catch (err) {
+				error.value = err;
+				console.error(err);
+			} finally {
+				loading.value = false;
+			}
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-divider {
+	margin: 24px 0;
+}
+
+.sso-link {
+	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: var(--input-height);
+	text-align: center;
+	background-color: var(--background-normal);
+	border-radius: var(--border-radius);
+	transition: background var(--fast) var(--transition);
+
+	&:hover {
+		background-color: var(--background-normal-alt);
+	}
+
+	& + & {
+		margin-top: 12px;
+	}
+}
+</style>