Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upd: add FriendlyCaptcha as a captcha solution

Browse source 
FriendlyCaptcha is a german captcha solution which is GDPR compliant and has a non-commerical free license
This commit is contained in:
Marie 2024-11-02 02:20:35 +01:00
parent 8824422cb5
commit d786e96c2b
No known key found for this signature in database
GPG key ID: 7ADF6C9CD9A28555
18 changed files with 175 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/components/MkCaptcha.vue
View file

@ -27,9 +27,12 @@ export type Captcha = {
execute(id: string): void;
reset(id?: string): void;
getResponse(id: string): string;
WidgetInstance(container: string | Node, options: {
readonly [_ in 'sitekey' | 'doneCallback' | 'errorCallback' | 'puzzleEndpoint']?: unknown;
}): void;
};
export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile' | 'mcaptcha';
export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile' | 'mcaptcha' | 'fc';
type CaptchaContainer = {
readonly [_ in CaptchaProvider]?: Captcha;
@ -60,6 +63,7 @@ const variable = computed(() => {
case 'recaptcha': return 'grecaptcha';
case 'turnstile': return 'turnstile';
case 'mcaptcha': return 'mcaptcha';
case 'fc': return 'friendlyChallenge';
}
});
@ -70,6 +74,7 @@ const src = computed(() => {
case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
case 'fc': return 'https://cdn.jsdelivr.net/npm/friendly-challenge@0.9.18/widget.min.js';
case 'mcaptcha': return null;
}
});
@ -110,6 +115,14 @@ async function requestRender() {
key: props.sitekey,
},
});
} else if (variable.value === 'friendlyChallenge' && captchaEl.value instanceof Element) {
new captcha.value.WidgetInstance(captchaEl.value, {
sitekey: props.sitekey,
doneCallback: callback,
errorCallback: callback,
});
// The following line is needed so that the design gets applied without it the captcha will look broken
captchaEl.value.className = 'frc-captcha';
} else {
window.setTimeout(requestRender, 1);
}

6
packages/frontend/src/components/MkSignupDialog.form.vue
View file

@ -70,6 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
<MkCaptcha v-if="instance.enableFC" ref="fc" v-model="fcResponse" :class="$style.captcha" provider="fc" :sitekey="instance.fcSiteKey"/>
<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-cy-signup-submit style="margin: 0 auto;">
<template v-if="submitting">
<MkLoading :em="true" :colored="false"/>
@ -112,6 +113,7 @@ const host = toUnicode(config.host);
const hcaptcha = ref<Captcha | undefined>();
const recaptcha = ref<Captcha | undefined>();
const turnstile = ref<Captcha | undefined>();
const fc = ref<Captcha | undefined>();
const username = ref<string>('');
const password = ref<string>('');
@ -128,6 +130,7 @@ const hCaptchaResponse = ref<string | null>(null);
const mCaptchaResponse = ref<string | null>(null);
const reCaptchaResponse = ref<string | null>(null);
const turnstileResponse = ref<string | null>(null);
const fcResponse = ref<string | null>(null);
const usernameAbortController = ref<null | AbortController>(null);
const emailAbortController = ref<null | AbortController>(null);
@ -137,6 +140,7 @@ const shouldDisableSubmitting = computed((): boolean => {
instance.enableMcaptcha && !mCaptchaResponse.value ||
instance.enableRecaptcha && !reCaptchaResponse.value ||
instance.enableTurnstile && !turnstileResponse.value ||
instance.enableFC && !fcResponse.value ||
instance.emailRequiredForSignup && emailState.value !== 'ok' ||
usernameState.value !== 'ok' ||
passwordRetypeState.value !== 'match';
@ -266,6 +270,7 @@ async function onSubmit(): Promise<void> {
'm-captcha-response': mCaptchaResponse.value,
'g-recaptcha-response': reCaptchaResponse.value,
'turnstile-response': turnstileResponse.value,
'frc-captcha-solution': fcResponse.value,
});
if (instance.emailRequiredForSignup) {
os.alert({
@ -297,6 +302,7 @@ async function onSubmit(): Promise<void> {
hcaptcha.value?.reset?.();
recaptcha.value?.reset?.();
turnstile.value?.reset?.();
fc.value?.reset?.();
os.alert({
type: 'error',