tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Switch to HCaptcha for Auth-related captchas (#2945)

Browse Source 
* Switch to HCaptcha for Auth-related captchas

* run fmt
This commit is contained in:
Geometrically
2024-11-16 16:57:32 -08:00
committed by GitHub
parent 5ab1263495
commit b188b3feb3
12 changed files with 137 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/frontend/nuxt.config.ts
View File

@@ -343,8 +343,6 @@ export default defineNuxtConfig({
globalThis.CF_PAGES_COMMIT_SHA ||
"unknown",
turnstile: { siteKey: "0x4AAAAAAAW3guHM6Eunbgwu" },
stripePublishableKey:
process.env.STRIPE_PUBLISHABLE_KEY ||
globalThis.STRIPE_PUBLISHABLE_KEY ||
@@ -362,7 +360,7 @@ export default defineNuxtConfig({
},
},
},
modules: ["@vintl/nuxt", "@nuxtjs/turnstile", "@pinia/nuxt"],
modules: ["@vintl/nuxt", "@pinia/nuxt"],
vintl: {
defaultLocale: "en-US",
locales: [

1
apps/frontend/package.json
View File

@@ -15,7 +15,6 @@
"devDependencies": {
"@formatjs/cli": "^6.2.12",
"@nuxt/devtools": "^1.3.3",
"@nuxtjs/turnstile": "^0.8.0",
"@types/dompurify": "^3.0.5",
"@types/node": "^20.1.0",
"@vintl/compact-number": "^2.0.5",

53
apps/frontend/src/components/ui/HCaptcha.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup>
const token = defineModel();
useHead({
script: [
{
src: "https://js.hcaptcha.com/1/api.js",
async: true,
defer: true,
},
],
});
function updateToken(newToken) {
token.value = newToken;
}
onMounted(() => {
window.updateCatpchaToken = updateToken;
});
defineExpose({
reset: () => {
token.value = null;
window.hcaptcha.reset();
},
});
</script>
<template>
<div
id="h-captcha"
class="h-captcha"
data-sitekey="4a7a2c80-68f2-4190-9d52-131c76e0c14e"
:data-theme="$theme.active === 'light' ? 'light' : 'dark'"
data-callback="updateCatpchaToken"
></div>
</template>
<style lang="scss">
.h-captcha {
display: flex;
justify-content: center;
overflow: hidden;
border-radius: var(--radius-md);
border: 2px solid var(--color-button-bg);
height: 78px;
iframe {
margin: -1px;
}
}
</style>

14
apps/frontend/src/pages/auth.vue
View File

@@ -60,20 +60,6 @@
}
}
.turnstile {
display: flex;
justify-content: center;
overflow: hidden;
border-radius: var(--radius-md);
border: 2px solid var(--color-button-bg);
height: 66px;
iframe {
margin: -1px;
min-width: calc(100% + 2px);
}
}
.auth-form {
display: flex;
flex-direction: column;

14
apps/frontend/src/pages/auth/reset-password.vue
View File

@@ -22,12 +22,7 @@
/>
</div>
<NuxtTurnstile
ref="turnstile"
v-model="token"
class="turnstile"
:options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
/>
<HCaptcha ref="captcha" v-model="token" />
<button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
@@ -73,6 +68,7 @@
</template>
<script setup>
import { SendIcon, MailIcon, KeyIcon } from "@modrinth/assets";
import HCaptcha from "@/components/ui/HCaptcha.vue";
const { formatMessage } = useVIntl();
@@ -165,7 +161,7 @@ if (route.query.flow) {
step.value = "passed_challenge";
}
const turnstile = ref();
const captcha = ref();
const email = ref("");
const token = ref("");
@@ -194,7 +190,7 @@ async function recovery() {
text: err.data ? err.data.description : err,
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
stopLoading();
}
@@ -227,7 +223,7 @@ async function changePassword() {
text: err.data ? err.data.description : err,
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
stopLoading();
}

14
apps/frontend/src/pages/auth/sign-in.vue
View File

@@ -81,12 +81,7 @@
/>
</div>
<NuxtTurnstile
ref="turnstile"
v-model="token"
class="turnstile"
:options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
/>
<HCaptcha ref="captcha" v-model="token" />
<button
class="btn btn-primary continue-btn centered-btn"
@@ -127,6 +122,7 @@ import {
KeyIcon,
MailIcon,
} from "@modrinth/assets";
import HCaptcha from "@/components/ui/HCaptcha.vue";
const { formatMessage } = useVIntl();
@@ -189,7 +185,7 @@ if (auth.value.user) {
await finishSignIn();
}
const turnstile = ref();
const captcha = ref();
const email = ref("");
const password = ref("");
@@ -225,7 +221,7 @@ async function beginPasswordSignIn() {
text: err.data ? err.data.description : err,
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
stopLoading();
}
@@ -250,7 +246,7 @@ async function begin2FASignIn() {
text: err.data ? err.data.description : err,
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
stopLoading();
}

14
apps/frontend/src/pages/auth/sign-up.vue
View File

@@ -106,12 +106,7 @@
</IntlFormatted>
</p>
<NuxtTurnstile
ref="turnstile"
v-model="token"
class="turnstile"
:options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
/>
<HCaptcha ref="captcha" v-model="token" />
<button
class="btn btn-primary continue-btn centered-btn"
@@ -145,6 +140,7 @@ import {
SSOGitLabIcon,
} from "@modrinth/assets";
import { Checkbox } from "@modrinth/ui";
import HCaptcha from "@/components/ui/HCaptcha.vue";
const { formatMessage } = useVIntl();
@@ -209,7 +205,7 @@ if (auth.value.user) {
await navigateTo("/dashboard");
}
const turnstile = ref();
const captcha = ref();
const email = ref("");
const username = ref("");
@@ -235,7 +231,7 @@ async function createAccount() {
}),
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
const res = await useBaseFetch("auth/create", {
@@ -264,7 +260,7 @@ async function createAccount() {
text: err.data ? err.data.description : err,
type: "error",
});
turnstile.value?.reset();
captcha.value?.reset();
}
stopLoading();
}