Skip to content

Commit 6d6f96e

Browse files
frascuchonleiyrepre-commit-ci[bot]paulbauriegel
authored
[REFACTOR][ENHANCEMENT] argilla server: better OAuth2 integration (#5689)
# Description <!-- Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change. --> This PR improves the `social_core` integration, making setup backends simpler. Improvements: - Reading `SOCIAL_AUTH_*` environment variables - Remove unnecessary settings attribute `enabled` - Add more backends with no-code: `extra_backends`* (some backends may be not fully supported, but users can create issues for that) **Type of change** <!-- Please delete options that are not relevant. Remember to title the PR according to the type of change --> - Refactor (change restructuring the codebase without changing functionality) - Improvement (change adding some improvement to an existing functionality) - Documentation update **How Has This Been Tested** <!-- Please add some reference about how your feature has been tested. --> **Checklist** <!-- Please go over the list and make sure you've taken everything into account --> - I added relevant documentation - I followed the style guidelines of this project - I did a self-review of my code - I made corresponding changes to the documentation - I confirm My changes generate no new warnings - I have added tests that prove my fix is effective or that my feature works - I have added relevant notes to the CHANGELOG.md file (See https://keepachangelog.com/) --------- Co-authored-by: Leire Aguirre <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Paul Bauriegel <[email protected]>
1 parent 105888a commit 6d6f96e

File tree

33 files changed

+1201
-447
lines changed

33 files changed

+1201
-447
lines changed

‎argilla-frontend/components/features/login/OAuthLogin.vue‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
<template>
22
<div class="oauth__container" v-if="providers.length">
33
<BaseSeparator />
4-
5-
<div v-for="provider in providers" :key="provider.name">
6-
<HuggingFaceButton
7-
v-if="provider.isHuggingFace"
8-
@click="authorize(provider.name)"
9-
/>
10-
</div>
4+
<ul class="oauth__container__providers">
5+
<li v-for="provider in providers" :key="provider.name">
6+
<HuggingFaceButton
7+
v-if="provider.isHuggingFace"
8+
@click="authorize(provider.name)"
9+
/>
10+
<OAuthLoginButton
11+
v-else
12+
:provider="provider.name"
13+
@click="authorize(provider.name)"
14+
/>
15+
</li>
16+
</ul>
1117
</div>
1218
</template>
1319

@@ -29,6 +35,14 @@ export default {
2935
display: flex;
3036
flex-direction: column;
3137
gap: $base-space * 3;
38+
&__providers {
39+
display: flex;
40+
flex-direction: column;
41+
gap: $base-space;
42+
justify-content: center;
43+
padding: 0;
44+
list-style: none;
45+
}
3246
}
3347
}
3448
</style>

‎argilla-frontend/components/features/login/components/HuggingFaceButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default {
1616
background: var(--color-black);
1717
color: var(--color-white);
1818
width: 100%;
19+
min-height: $base-space * 6;
1920
padding: calc($base-space / 2) $base-space * 4;
2021
justify-content: center;
2122
&:hover {

‎argilla-frontend/components/features/login/components/KeycloakLogo.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<!--https://github.com/keycloak/keycloak-misc/blob/main/logo/icon.svg-->
3+
<svg
4+
width="256"
5+
height="256"
6+
viewBox="0 0 44.216 39.861"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="m88.61 138.456 5.716-9.865 23.018-.004 5.686 9.965.007 19.932-5.691 9.957-23.012.008-5.782-9.965z"
12+
style="
13+
display: inline;
14+
fill: #4d4d4d;
15+
fill-opacity: 1;
16+
stroke-width: 0.264583;
17+
"
18+
transform="translate(-82.815 -128.588)"
19+
/>
20+
<path
21+
d="M88.552 158.481h10.375l-5.699-10.041 4.634-9.982-9.252-.002-5.795 10.065"
22+
style="
23+
fill: #ededed;
24+
fill-opacity: 1;
25+
fill-rule: nonzero;
26+
stroke: none;
27+
stroke-width: 0.330729;
28+
"
29+
transform="translate(-82.815 -128.588)"
30+
/>
31+
<path
32+
d="M102.073 158.481h7.582l6.706-9.773-6.589-10.156h-8.921l-5.373 9.814z"
33+
style="
34+
fill: #e0e0e0;
35+
fill-opacity: 1;
36+
fill-rule: nonzero;
37+
stroke: none;
38+
stroke-width: 0.330729;
39+
"
40+
transform="translate(-82.815 -128.588)"
41+
/>
42+
<path
43+
d="m82.815 148.52 5.738 9.964h10.374l-5.636-9.93z"
44+
style="
45+
fill: #acacac;
46+
fill-opacity: 1;
47+
fill-rule: nonzero;
48+
stroke: none;
49+
stroke-width: 0.330729;
50+
"
51+
transform="translate(-82.815 -128.588)"
52+
/>
53+
<path
54+
d="m95.589 148.522 6.484 9.963h7.582l6.601-9.959z"
55+
style="
56+
fill: #9e9e9e;
57+
fill-opacity: 1;
58+
fill-rule: nonzero;
59+
stroke: none;
60+
stroke-width: 0.330729;
61+
"
62+
transform="translate(-82.815 -128.588)"
63+
/>
64+
<path
65+
d="m98.157 148.529-1.958.569-1.877-.572 7.667-13.288 1.918 3.316"
66+
style="
67+
fill: #00b8e3;
68+
fill-opacity: 1;
69+
fill-rule: nonzero;
70+
stroke: none;
71+
stroke-width: 0.330729;
72+
"
73+
transform="translate(-82.815 -128.588)"
74+
/>
75+
<path
76+
d="m103.9 158.482-1.909 3.332-5.093-5.487-2.58-7.797v-.004h3.838"
77+
style="
78+
fill: #33c6e9;
79+
fill-opacity: 1;
80+
fill-rule: nonzero;
81+
stroke: none;
82+
stroke-width: 0.330729;
83+
"
84+
transform="translate(-82.815 -128.588)"
85+
/>
86+
<path
87+
d="M94.322 148.526h-.003v.003l-1.918 3.322-1.925-3.307 1.952-3.386 5.728-9.92h3.834"
88+
style="
89+
fill: #008aaa;
90+
fill-opacity: 1;
91+
fill-rule: nonzero;
92+
stroke: none;
93+
stroke-width: 0.330729;
94+
"
95+
transform="translate(-82.815 -128.588)"
96+
/>
97+
<path
98+
d="M115.42 158.481h11.611l-.007-19.93h-11.605z"
99+
style="
100+
fill: #d4d4d4;
101+
fill-opacity: 1;
102+
fill-rule: nonzero;
103+
stroke: none;
104+
stroke-width: 0.330729;
105+
"
106+
transform="translate(-82.815 -128.588)"
107+
/>
108+
<path
109+
d="M115.42 148.554v9.93h11.59v-9.93z"
110+
style="
111+
fill: #919191;
112+
fill-opacity: 1;
113+
fill-rule: nonzero;
114+
stroke: none;
115+
stroke-width: 0.330729;
116+
"
117+
transform="translate(-82.815 -128.588)"
118+
/>
119+
<path
120+
d="M101.992 161.817h-3.836l-5.755-9.966 1.918-3.321z"
121+
style="
122+
fill: #00b8e3;
123+
fill-opacity: 1;
124+
fill-rule: nonzero;
125+
stroke: none;
126+
stroke-width: 0.330729;
127+
"
128+
transform="translate(-82.815 -128.588)"
129+
/>
130+
<path
131+
d="m117.333 148.526-7.669 13.289c-.705-1.036-1.913-3.331-1.913-3.331l5.753-9.959z"
132+
style="
133+
fill: #008aaa;
134+
fill-opacity: 1;
135+
fill-rule: nonzero;
136+
stroke: none;
137+
stroke-width: 0.330729;
138+
"
139+
transform="translate(-82.815 -128.588)"
140+
/>
141+
<path
142+
d="m113.495 161.815-3.831-.001 7.67-13.288 1.917-3.317 1.921 3.34m-3.839-.023h-3.828l-5.755-9.973 1.905-3.314 4.658 5.922z"
143+
style="
144+
fill: #00b8e3;
145+
fill-opacity: 1;
146+
fill-rule: nonzero;
147+
stroke: none;
148+
stroke-width: 0.330729;
149+
"
150+
transform="translate(-82.815 -128.588)"
151+
/>
152+
<path
153+
d="M119.25 145.205v.003l-1.917 3.318-7.677-13.286 3.841.002z"
154+
style="
155+
fill: #33c6e9;
156+
fill-opacity: 1;
157+
fill-rule: nonzero;
158+
stroke: none;
159+
stroke-width: 0.330729;
160+
"
161+
transform="translate(-82.815 -128.588)"
162+
/>
163+
</svg>
164+
</template>

‎argilla-frontend/components/features/login/components/OAuthLoginButton.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<BaseButton class="sign-in-button" @click="$emit('click')">
3+
<KeycloakLogo v-if="provider === 'keycloak'" />
4+
{{ signinText }}
5+
</BaseButton>
6+
</template>
7+
8+
<script>
9+
import KeycloakLogo from "./KeycloakLogo.vue";
10+
11+
export default {
12+
name: "OAuthLoginButton",
13+
components: {
14+
KeycloakLogo,
15+
},
16+
props: {
17+
provider: {
18+
type: String,
19+
required: true,
20+
},
21+
},
22+
computed: {
23+
providerName() {
24+
return this.provider.charAt(0).toUpperCase() + this.provider.slice(1);
25+
},
26+
signinText() {
27+
return this.$t("button.signin_with_provider", {
28+
provider: this.providerName,
29+
});
30+
},
31+
},
32+
};
33+
</script>
34+
35+
<style lang="scss" scoped>
36+
.sign-in-button {
37+
@extend %button !optional;
38+
background: var(--color-black);
39+
color: var(--color-white);
40+
width: 100%;
41+
min-height: $base-space * 6;
42+
padding: calc($base-space / 2) $base-space * 4;
43+
justify-content: center;
44+
&:hover {
45+
background: hsl(from var(--color-black) h s l / 80%);
46+
}
47+
svg {
48+
width: 30px;
49+
height: auto;
50+
}
51+
}
52+
</style>

‎argilla-frontend/translation/de.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ export default {
120120
button: {
121121
ignore_and_continue: "Ignorieren und fortfahren",
122122
login: "Anmelden",
123+
signin_with_provider: "Mit {provider} anmelden",
123124
"hf-login": "Mit Hugging Face anmelden",
124125
sign_in_with_username: "Mit Benutzername anmelden",
125126
cancel: "Abbrechen",

‎argilla-frontend/translation/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export default {
123123
button: {
124124
ignore_and_continue: "Ignore and continue",
125125
login: "Sign in",
126+
signin_with_provider: "Sign in with {provider}",
126127
"hf-login": "Sign in with Hugging Face",
127128
sign_in_with_username: "Sign in with username",
128129
cancel: "Cancel",

‎argilla-frontend/translation/es.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export default {
117117
button: {
118118
ignore_and_continue: "Ignorar y continuar",
119119
login: "Iniciar sesión",
120+
signin_with_provider: "Iniciar sesión con {provider}",
120121
"hf-login": "Iniciar sesión con Hugging Face",
121122
sign_in_with_username: "Iniciar sesión con nombre de usuario",
122123
cancel: "Cancelar",

‎argilla-server/src/argilla_server/_app.py‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -306,9 +306,6 @@ def _show_telemetry_warning():
306306
async def _create_oauth_allowed_workspaces(db: AsyncSession):
307307
from argilla_server.security.settings import settings as security_settings
308308

309-
if not security_settings.oauth.enabled:
310-
return
311-
312309
for allowed_workspace in security_settings.oauth.allowed_workspaces:
313310
if await Workspace.get_by(db, name=allowed_workspace.name) is None:
314311
_LOGGER.info(f"Creating workspace with name {allowed_workspace.name!r}")

0 commit comments

Comments
 (0)