feat(editor): SSO login button (#5615)

* feat(editor): SSO login button

* feat(editor): SSO login button

* feat(editor): SSO login button

packages/editor-ui/src/components/SSOLogin.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { Notification } from 'element-ui';
+import { useSSOStore } from '@/stores/sso';
+
+const ssoStore = useSSOStore();
+
+const onSSOLogin = async () => {
+	try {
+		window.location.href = await ssoStore.getSSORedirectUrl();
+	} catch (error) {
+		Notification.error({
+			title: 'Error',
+			message: error.message,
+			position: 'bottom-right',
+		});
+	}
+};
+</script>
+
+<template>
+	<div v-if="ssoStore.showSsoLoginButton" :class="$style.ssoLogin">
+		<div :class="$style.divider">
+			<span>{{ $locale.baseText('sso.login.divider') }}</span>
+		</div>
+		<n8n-button
+			@click="onSSOLogin"
+			size="large"
+			type="primary"
+			outline
+			:label="$locale.baseText('sso.login.button')"
+		/>
+	</div>
+</template>
+
+<style lang="scss" module>
+.ssoLogin {
+	text-align: center;
+}
+
+.divider {
+	position: relative;
+	text-transform: uppercase;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 0;
+		width: 100%;
+		height: 1px;
+		background-color: var(--color-foreground-base);
+	}
+
+	span {
+		position: relative;
+		display: inline-block;
+		padding: var(--spacing-xl) var(--spacing-l);
+		background: var(--color-foreground-xlight);
+	}
+}
+</style>