refactor: migrate to common eslint+prettier configs (#4168)
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
This commit is contained in:
Cal H.
@@ -1,314 +1,315 @@
|
||||
<template>
|
||||
<div v-if="subtleLauncherRedirectUri">
|
||||
<iframe
|
||||
:src="subtleLauncherRedirectUri"
|
||||
class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-else>
|
||||
<template v-if="flow && !subtleLauncherRedirectUri">
|
||||
<label for="two-factor-code">
|
||||
<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
|
||||
<span class="label__description">
|
||||
{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="two-factor-code"
|
||||
v-model="twoFactorCode"
|
||||
maxlength="11"
|
||||
type="text"
|
||||
:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
|
||||
autocomplete="one-time-code"
|
||||
autofocus
|
||||
@keyup.enter="begin2FASignIn"
|
||||
/>
|
||||
<div v-if="subtleLauncherRedirectUri">
|
||||
<iframe
|
||||
:src="subtleLauncherRedirectUri"
|
||||
class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-else>
|
||||
<template v-if="flow && !subtleLauncherRedirectUri">
|
||||
<label for="two-factor-code">
|
||||
<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
|
||||
<span class="label__description">
|
||||
{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="two-factor-code"
|
||||
v-model="twoFactorCode"
|
||||
maxlength="11"
|
||||
type="text"
|
||||
:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
|
||||
autocomplete="one-time-code"
|
||||
autofocus
|
||||
@keyup.enter="begin2FASignIn"
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
|
||||
{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
|
||||
<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
|
||||
{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn" :href="getAuthUrl('discord', redirectTarget)">
|
||||
<SSODiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('github', redirectTarget)">
|
||||
<SSOGitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
|
||||
<SSOMicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('google', redirectTarget)">
|
||||
<SSOGoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam', redirectTarget)">
|
||||
<SSOSteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
|
||||
<SSOGitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
<section class="third-party">
|
||||
<a class="btn" :href="getAuthUrl('discord', redirectTarget)">
|
||||
<SSODiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('github', redirectTarget)">
|
||||
<SSOGitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
|
||||
<SSOMicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('google', redirectTarget)">
|
||||
<SSOGoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam', redirectTarget)">
|
||||
<SSOSteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
|
||||
<SSOGitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
|
||||
<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
class="auth-form__input"
|
||||
:placeholder="formatMessage(messages.emailUsernameLabel)"
|
||||
/>
|
||||
</div>
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
class="auth-form__input"
|
||||
:placeholder="formatMessage(messages.emailUsernameLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="auth-form__input"
|
||||
:placeholder="formatMessage(messages.passwordLabel)"
|
||||
/>
|
||||
</div>
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="auth-form__input"
|
||||
:placeholder="formatMessage(messages.passwordLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<HCaptcha ref="captcha" v-model="token" />
|
||||
<HCaptcha ref="captcha" v-model="token" />
|
||||
|
||||
<button
|
||||
class="btn btn-primary continue-btn centered-btn"
|
||||
:disabled="!token"
|
||||
@click="beginPasswordSignIn()"
|
||||
>
|
||||
{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary continue-btn centered-btn"
|
||||
:disabled="!token"
|
||||
@click="beginPasswordSignIn()"
|
||||
>
|
||||
{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
<IntlFormatted :message-id="messages.additionalOptionsLabel">
|
||||
<template #forgot-password-link="{ children }">
|
||||
<NuxtLink
|
||||
class="text-link"
|
||||
:to="{
|
||||
path: '/auth/reset-password',
|
||||
query: route.query,
|
||||
}"
|
||||
>
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #create-account-link="{ children }">
|
||||
<NuxtLink
|
||||
class="text-link"
|
||||
:to="{
|
||||
path: '/auth/sign-up',
|
||||
query: route.query,
|
||||
}"
|
||||
>
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</IntlFormatted>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
<div class="auth-form__additional-options">
|
||||
<IntlFormatted :message-id="messages.additionalOptionsLabel">
|
||||
<template #forgot-password-link="{ children }">
|
||||
<NuxtLink
|
||||
class="text-link"
|
||||
:to="{
|
||||
path: '/auth/reset-password',
|
||||
query: route.query,
|
||||
}"
|
||||
>
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #create-account-link="{ children }">
|
||||
<NuxtLink
|
||||
class="text-link"
|
||||
:to="{
|
||||
path: '/auth/sign-up',
|
||||
query: route.query,
|
||||
}"
|
||||
>
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</IntlFormatted>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
KeyIcon,
|
||||
MailIcon,
|
||||
RightArrowIcon,
|
||||
SSODiscordIcon,
|
||||
SSOGitHubIcon,
|
||||
SSOGitLabIcon,
|
||||
SSOGoogleIcon,
|
||||
SSOMicrosoftIcon,
|
||||
SSOSteamIcon,
|
||||
} from "@modrinth/assets";
|
||||
import { commonMessages, injectNotificationManager } from "@modrinth/ui";
|
||||
import HCaptcha from "@/components/ui/HCaptcha.vue";
|
||||
KeyIcon,
|
||||
MailIcon,
|
||||
RightArrowIcon,
|
||||
SSODiscordIcon,
|
||||
SSOGitHubIcon,
|
||||
SSOGitLabIcon,
|
||||
SSOGoogleIcon,
|
||||
SSOMicrosoftIcon,
|
||||
SSOSteamIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { commonMessages, injectNotificationManager } from '@modrinth/ui'
|
||||
|
||||
const { addNotification } = injectNotificationManager();
|
||||
const { formatMessage } = useVIntl();
|
||||
import HCaptcha from '@/components/ui/HCaptcha.vue'
|
||||
|
||||
const { addNotification } = injectNotificationManager()
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const messages = defineMessages({
|
||||
additionalOptionsLabel: {
|
||||
id: "auth.sign-in.additional-options",
|
||||
defaultMessage:
|
||||
"<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>",
|
||||
},
|
||||
emailUsernameLabel: {
|
||||
id: "auth.sign-in.email-username.label",
|
||||
defaultMessage: "Email or username",
|
||||
},
|
||||
passwordLabel: {
|
||||
id: "auth.sign-in.password.label",
|
||||
defaultMessage: "Password",
|
||||
},
|
||||
signInWithLabel: {
|
||||
id: "auth.sign-in.sign-in-with",
|
||||
defaultMessage: "Sign in with",
|
||||
},
|
||||
signInTitle: {
|
||||
id: "auth.sign-in.title",
|
||||
defaultMessage: "Sign In",
|
||||
},
|
||||
twoFactorCodeInputPlaceholder: {
|
||||
id: "auth.sign-in.2fa.placeholder",
|
||||
defaultMessage: "Enter code...",
|
||||
},
|
||||
twoFactorCodeLabel: {
|
||||
id: "auth.sign-in.2fa.label",
|
||||
defaultMessage: "Enter two-factor code",
|
||||
},
|
||||
twoFactorCodeLabelDescription: {
|
||||
id: "auth.sign-in.2fa.description",
|
||||
defaultMessage: "Please enter a two-factor code to proceed.",
|
||||
},
|
||||
usePasswordLabel: {
|
||||
id: "auth.sign-in.use-password",
|
||||
defaultMessage: "Or use a password",
|
||||
},
|
||||
});
|
||||
additionalOptionsLabel: {
|
||||
id: 'auth.sign-in.additional-options',
|
||||
defaultMessage:
|
||||
'<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
|
||||
},
|
||||
emailUsernameLabel: {
|
||||
id: 'auth.sign-in.email-username.label',
|
||||
defaultMessage: 'Email or username',
|
||||
},
|
||||
passwordLabel: {
|
||||
id: 'auth.sign-in.password.label',
|
||||
defaultMessage: 'Password',
|
||||
},
|
||||
signInWithLabel: {
|
||||
id: 'auth.sign-in.sign-in-with',
|
||||
defaultMessage: 'Sign in with',
|
||||
},
|
||||
signInTitle: {
|
||||
id: 'auth.sign-in.title',
|
||||
defaultMessage: 'Sign In',
|
||||
},
|
||||
twoFactorCodeInputPlaceholder: {
|
||||
id: 'auth.sign-in.2fa.placeholder',
|
||||
defaultMessage: 'Enter code...',
|
||||
},
|
||||
twoFactorCodeLabel: {
|
||||
id: 'auth.sign-in.2fa.label',
|
||||
defaultMessage: 'Enter two-factor code',
|
||||
},
|
||||
twoFactorCodeLabelDescription: {
|
||||
id: 'auth.sign-in.2fa.description',
|
||||
defaultMessage: 'Please enter a two-factor code to proceed.',
|
||||
},
|
||||
usePasswordLabel: {
|
||||
id: 'auth.sign-in.use-password',
|
||||
defaultMessage: 'Or use a password',
|
||||
},
|
||||
})
|
||||
|
||||
useHead({
|
||||
title() {
|
||||
return `${formatMessage(messages.signInTitle)} - Modrinth`;
|
||||
},
|
||||
});
|
||||
title() {
|
||||
return `${formatMessage(messages.signInTitle)} - Modrinth`
|
||||
},
|
||||
})
|
||||
|
||||
const auth = await useAuth();
|
||||
const route = useNativeRoute();
|
||||
const auth = await useAuth()
|
||||
const route = useNativeRoute()
|
||||
|
||||
const redirectTarget = route.query.redirect || "";
|
||||
const subtleLauncherRedirectUri = ref();
|
||||
const redirectTarget = route.query.redirect || ''
|
||||
const subtleLauncherRedirectUri = ref()
|
||||
|
||||
if (route.query.code && !route.fullPath.includes("new_account=true")) {
|
||||
await finishSignIn();
|
||||
if (route.query.code && !route.fullPath.includes('new_account=true')) {
|
||||
await finishSignIn()
|
||||
}
|
||||
|
||||
if (auth.value.user) {
|
||||
await finishSignIn();
|
||||
await finishSignIn()
|
||||
}
|
||||
|
||||
const captcha = ref();
|
||||
const captcha = ref()
|
||||
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
const token = ref("");
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const token = ref('')
|
||||
|
||||
const flow = ref(route.query.flow);
|
||||
const flow = ref(route.query.flow)
|
||||
|
||||
async function beginPasswordSignIn() {
|
||||
startLoading();
|
||||
try {
|
||||
const res = await useBaseFetch("auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
username: email.value,
|
||||
password: password.value,
|
||||
challenge: token.value,
|
||||
},
|
||||
});
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
username: email.value,
|
||||
password: password.value,
|
||||
challenge: token.value,
|
||||
},
|
||||
})
|
||||
|
||||
if (res.flow) {
|
||||
flow.value = res.flow;
|
||||
} else {
|
||||
await finishSignIn(res.session);
|
||||
}
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: "error",
|
||||
});
|
||||
captcha.value?.reset();
|
||||
}
|
||||
stopLoading();
|
||||
if (res.flow) {
|
||||
flow.value = res.flow
|
||||
} else {
|
||||
await finishSignIn(res.session)
|
||||
}
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: 'error',
|
||||
})
|
||||
captcha.value?.reset()
|
||||
}
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
const twoFactorCode = ref(null);
|
||||
const twoFactorCode = ref(null)
|
||||
async function begin2FASignIn() {
|
||||
startLoading();
|
||||
try {
|
||||
const res = await useBaseFetch("auth/login/2fa", {
|
||||
method: "POST",
|
||||
body: {
|
||||
flow: flow.value,
|
||||
code: twoFactorCode.value ? twoFactorCode.value.toString() : twoFactorCode.value,
|
||||
},
|
||||
});
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login/2fa', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
flow: flow.value,
|
||||
code: twoFactorCode.value ? twoFactorCode.value.toString() : twoFactorCode.value,
|
||||
},
|
||||
})
|
||||
|
||||
await finishSignIn(res.session);
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: "error",
|
||||
});
|
||||
captcha.value?.reset();
|
||||
}
|
||||
stopLoading();
|
||||
await finishSignIn(res.session)
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: 'error',
|
||||
})
|
||||
captcha.value?.reset()
|
||||
}
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
async function finishSignIn(token) {
|
||||
if (route.query.launcher) {
|
||||
if (!token) {
|
||||
token = auth.value.token;
|
||||
}
|
||||
if (route.query.launcher) {
|
||||
if (!token) {
|
||||
token = auth.value.token
|
||||
}
|
||||
|
||||
const usesLocalhostRedirectionScheme =
|
||||
["4", "6"].includes(route.query.ipver) && Number(route.query.port) < 65536;
|
||||
const usesLocalhostRedirectionScheme =
|
||||
['4', '6'].includes(route.query.ipver) && Number(route.query.port) < 65536
|
||||
|
||||
const redirectUrl = usesLocalhostRedirectionScheme
|
||||
? `http://${route.query.ipver === "4" ? "127.0.0.1" : "[::1]"}:${route.query.port}/?code=${token}`
|
||||
: `https://launcher-files.modrinth.com/?code=${token}`;
|
||||
const redirectUrl = usesLocalhostRedirectionScheme
|
||||
? `http://${route.query.ipver === '4' ? '127.0.0.1' : '[::1]'}:${route.query.port}/?code=${token}`
|
||||
: `https://launcher-files.modrinth.com/?code=${token}`
|
||||
|
||||
if (usesLocalhostRedirectionScheme) {
|
||||
// When using this redirection scheme, the auth token is very visible in the URL to the user.
|
||||
// While we could make it harder to find with a POST request, such is security by obscurity:
|
||||
// the user and other applications would still be able to sniff the token in the request body.
|
||||
// So, to make the UX a little better by not changing the displayed URL, while keeping the
|
||||
// token hidden from very casual observation and keeping the protocol as close to OAuth's
|
||||
// standard flows as possible, let's execute the redirect within an iframe that visually
|
||||
// covers the entire page.
|
||||
subtleLauncherRedirectUri.value = redirectUrl;
|
||||
} else {
|
||||
await navigateTo(redirectUrl, {
|
||||
external: true,
|
||||
});
|
||||
}
|
||||
if (usesLocalhostRedirectionScheme) {
|
||||
// When using this redirection scheme, the auth token is very visible in the URL to the user.
|
||||
// While we could make it harder to find with a POST request, such is security by obscurity:
|
||||
// the user and other applications would still be able to sniff the token in the request body.
|
||||
// So, to make the UX a little better by not changing the displayed URL, while keeping the
|
||||
// token hidden from very casual observation and keeping the protocol as close to OAuth's
|
||||
// standard flows as possible, let's execute the redirect within an iframe that visually
|
||||
// covers the entire page.
|
||||
subtleLauncherRedirectUri.value = redirectUrl
|
||||
} else {
|
||||
await navigateTo(redirectUrl, {
|
||||
external: true,
|
||||
})
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (token) {
|
||||
await useAuth(token);
|
||||
await useUser();
|
||||
}
|
||||
if (token) {
|
||||
await useAuth(token)
|
||||
await useUser()
|
||||
}
|
||||
|
||||
if (route.query.redirect) {
|
||||
const redirect = decodeURIComponent(route.query.redirect);
|
||||
await navigateTo(redirect, {
|
||||
replace: true,
|
||||
});
|
||||
} else {
|
||||
await navigateTo("/dashboard");
|
||||
}
|
||||
if (route.query.redirect) {
|
||||
const redirect = decodeURIComponent(route.query.redirect)
|
||||
await navigateTo(redirect, {
|
||||
replace: true,
|
||||
})
|
||||
} else {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user