You've already forked AstralRinth
forked from didirus/AstralRinth
Migrate to Nuxt 3 (#933)
* Migrate to Nuxt 3 * Update vercel config * remove tsconfig comment * Changelog experiment + working proj pages * Fix package json * Prevent vercel complaining * fix deploy (hopefully) * Tag generator * Switch to yarn * Vercel pls 🙏 * Fix tag generation bug * Make (most) non-logged in pages work * fix base build * Linting + state * Eradicate axios, make most user pages work * Fix checkbox state being set incorrectly * Make most things work * Final stretch * Finish (most) things * Move to update model value * Fix modal text getting blurred from transforms (#964) * Adjust nav-link border radius when focused (#961) * Transition between animation states on TextLogo (#955) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Disable tabbing to pagination arrows when disabled (#972) * Make position of the "no results" text on grid/gallery views consistent (fixes #963) (#965) * Fix position of the "no results" text on grid view * fix padding * Remove extra margin on main page, fixes #957 (#959) * Fix layout shift and placeholder line height (#973) * Fix a lot of issues * Fix more nuxt 3 issues * fix not all versions showing up (temp) * inline inter css file * More nuxt 3 fixes * [skip ci] broken- backup changes * Change modpack warnings to blue instead of red (#991) * Fix some hydration issues * Update nuxt * Fix some images not showing * Add pagination to versions page + fix lag * Make changelog page consistent with versions page * sync before merge * Delete old file * Fix actions failing * update branch * Fixes navbar transition animation. (#1012) * Fixes navbar transition animation. * Fixes Y-axis animation. Fixes mobile menu. Removes highlightjs prop. * Changes xss call to renderString. * Fixes renderString call. * Removes unnecessary styling. * Reverts mobile nav change. * Nuxt 3 Lazy Loading Search (#1022) * Uses lazyFetch for results. onSearchChange refreshes. Adds loading circle. * Removes console.log * Preserves old page when paging. * Diagnosing filtering bugs. * Fix single facet filtering * Implements useAuth in settings/account. * tiny ssr fix * Updating nuxt.config checklist. * Implements useAuth in revenue, moneitzation, and dashboard index pages. * Fixes setups. * Eliminates results when path changes. Adds animated logo. * Ensures loading animation renders on search page. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix navigation issues * Square button fix (#1023) * Removes checklist from nuxt.config. * Modifies Nuxt CI to build after linting. * Fixes prettierignore file. * bug fixes * Update whitelist domains * Page improvements, fix CLS * Fix a lot of things * Fix project type redirect * Fix 404 errors * Fix user settings + hydration error * Final fixes * fix(creator-section): border radius on icons not aligning with bg (#1027) Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk> * Improvements to the mobile navbar (#984) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Improvements to the mobile nav menu * fix avatar alt text * Nevermind, got confused for a moment * Tab bar, menu layout improvements * Highlight search icon when menu is open * Update layouts/default.vue Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> * Fix some issues * Use caret instead * Run prettier * Add create a project --------- Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix mobile menu issues * More issues * Fix lint --------- Co-authored-by: Kaeden Murphy <kmurphy@kaedenmurphy.dev> Co-authored-by: triphora <emmaffle@modrinth.com> Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com> Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com> Co-authored-by: Zachary Baird <zdb1994@yahoo.com> Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>
This commit is contained in:
Geometrically
@@ -5,7 +5,7 @@
|
||||
title="Are you sure you want to delete your account?"
|
||||
description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.gg/EUHuJHt)."
|
||||
proceed-label="Delete this account"
|
||||
:confirmation-text="$auth.user.username"
|
||||
:confirmation-text="auth.user.username"
|
||||
:has-to-type="true"
|
||||
@proceed="deleteAccount"
|
||||
/>
|
||||
@@ -13,18 +13,14 @@
|
||||
<Modal ref="modal_revoke_token" header="Revoke your Modrinth token">
|
||||
<div class="modal-revoke-token markdown-body">
|
||||
<p>
|
||||
Revoking your Modrinth token can have unintended consequences. Please
|
||||
be aware that the following could break:
|
||||
Revoking your Modrinth token can have unintended consequences. Please be aware that the
|
||||
following could break:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Any application that uses your token to access the API.</li>
|
||||
<li>Gradle - if Minotaur is given a incorrect token, your Gradle builds could fail.</li>
|
||||
<li>
|
||||
Gradle - if Minotaur is given a incorrect token, your Gradle builds
|
||||
could fail.
|
||||
</li>
|
||||
<li>
|
||||
GitHub - if you use a GitHub action that uses the Modrinth API, it
|
||||
will cause errors.
|
||||
GitHub - if you use a GitHub action that uses the Modrinth API, it will cause errors.
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you are willing to continue, complete the following steps:</p>
|
||||
@@ -33,32 +29,23 @@
|
||||
<a
|
||||
href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
rel="noopener"
|
||||
>
|
||||
Head to the Modrinth Application page on GitHub.
|
||||
</a>
|
||||
Make sure to be logged into the GitHub account you used for
|
||||
Modrinth!
|
||||
</li>
|
||||
<li>
|
||||
Press the big red "Revoke Access" button next to the "Permissions"
|
||||
header.
|
||||
Make sure to be logged into the GitHub account you used for Modrinth!
|
||||
</li>
|
||||
<li>Press the big red "Revoke Access" button next to the "Permissions" header.</li>
|
||||
</ol>
|
||||
<p>
|
||||
Once you have completed those steps, press the continue button below.
|
||||
</p>
|
||||
<p>Once you have completed those steps, press the continue button below.</p>
|
||||
<p>
|
||||
<strong>
|
||||
This will log you out of Modrinth, however, when you log back in,
|
||||
your token will be regenerated.
|
||||
This will log you out of Modrinth, however, when you log back in, your token will be
|
||||
regenerated.
|
||||
</strong>
|
||||
</p>
|
||||
<div class="button-group">
|
||||
<button
|
||||
class="iconified-button"
|
||||
@click="$refs.modal_revoke_token.hide()"
|
||||
>
|
||||
<button class="iconified-button" @click="$refs.modal_revoke_token.hide()">
|
||||
<CrossIcon />
|
||||
Cancel
|
||||
</button>
|
||||
@@ -73,7 +60,7 @@
|
||||
<section class="universal-card">
|
||||
<h2>User profile</h2>
|
||||
<p>Visit your user profile to edit your profile information.</p>
|
||||
<NuxtLink class="iconified-button" :to="`/user/${$auth.user.username}`">
|
||||
<NuxtLink class="iconified-button" :to="`/user/${auth.user.username}`">
|
||||
<UserIcon /> Visit your profile
|
||||
</NuxtLink>
|
||||
</section>
|
||||
@@ -83,13 +70,11 @@
|
||||
<p>Your account information is not displayed publicly.</p>
|
||||
<ul class="known-errors">
|
||||
<li v-if="hasMonetizationEnabled() && !email">
|
||||
You must have an email address set since you are enrolled in the
|
||||
Creator Monetization Program.
|
||||
You must have an email address set since you are enrolled in the Creator Monetization
|
||||
Program.
|
||||
</li>
|
||||
</ul>
|
||||
<label for="email-input"
|
||||
><span class="label__title">Email address</span>
|
||||
</label>
|
||||
<label for="email-input"><span class="label__title">Email address</span> </label>
|
||||
<input
|
||||
id="email-input"
|
||||
v-model="email"
|
||||
@@ -113,28 +98,18 @@
|
||||
<section class="universal-card">
|
||||
<h2>Authorization token</h2>
|
||||
<p>
|
||||
Your authorization token can be used with the Modrinth API, the Minotaur
|
||||
Gradle plugin, and other applications that interact with Modrinth's API.
|
||||
Be sure to keep this secret!
|
||||
Your authorization token can be used with the Modrinth API, the Minotaur Gradle plugin, and
|
||||
other applications that interact with Modrinth's API. Be sure to keep this secret!
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<button
|
||||
type="button"
|
||||
class="iconified-button"
|
||||
value="Copy to clipboard"
|
||||
@click="copyToken"
|
||||
>
|
||||
<button type="button" class="iconified-button" value="Copy to clipboard" @click="copyToken">
|
||||
<template v-if="copied">
|
||||
<CheckIcon />
|
||||
Copied token to clipboard
|
||||
</template>
|
||||
<template v-else><CopyIcon />Copy token to clipboard</template>
|
||||
<template v-else> <CopyIcon />Copy token to clipboard </template>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="iconified-button"
|
||||
@click="$refs.modal_revoke_token.show()"
|
||||
>
|
||||
<button type="button" class="iconified-button" @click="$refs.modal_revoke_token.show()">
|
||||
<SlashIcon />
|
||||
Revoke token
|
||||
</button>
|
||||
@@ -144,9 +119,8 @@
|
||||
<section id="delete-account" class="universal-card">
|
||||
<h2>Delete account</h2>
|
||||
<p>
|
||||
Once you delete your account, there is no going back. Deleting your
|
||||
account will remove all attached data, excluding projects, from our
|
||||
servers.
|
||||
Once you delete your account, there is no going back. Deleting your account will remove all
|
||||
attached data, excluding projects, from our servers.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@@ -164,16 +138,16 @@
|
||||
import ModalConfirm from '~/components/ui/ModalConfirm'
|
||||
import Modal from '~/components/ui/Modal'
|
||||
|
||||
import CrossIcon from '~/assets/images/utils/x.svg?inline'
|
||||
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
|
||||
import CheckIcon from '~/assets/images/utils/check.svg?inline'
|
||||
import UserIcon from '~/assets/images/utils/user.svg?inline'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg?inline'
|
||||
import CopyIcon from '~/assets/images/utils/clipboard-copy.svg?inline'
|
||||
import TrashIcon from '~/assets/images/utils/trash.svg?inline'
|
||||
import SlashIcon from '~/assets/images/utils/slash.svg?inline'
|
||||
import CrossIcon from '~/assets/images/utils/x.svg'
|
||||
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
|
||||
import CheckIcon from '~/assets/images/utils/check.svg'
|
||||
import UserIcon from '~/assets/images/utils/user.svg'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg'
|
||||
import CopyIcon from '~/assets/images/utils/clipboard-copy.svg'
|
||||
import TrashIcon from '~/assets/images/utils/trash.svg'
|
||||
import SlashIcon from '~/assets/images/utils/slash.svg'
|
||||
|
||||
export default {
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
Modal,
|
||||
ModalConfirm,
|
||||
@@ -186,10 +160,19 @@ export default {
|
||||
TrashIcon,
|
||||
SlashIcon,
|
||||
},
|
||||
async setup() {
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const auth = await useAuth()
|
||||
|
||||
return { auth }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copied: false,
|
||||
email: this.$auth.user.email,
|
||||
email: this.auth.user.email,
|
||||
showKnownErrors: false,
|
||||
}
|
||||
},
|
||||
@@ -199,43 +182,41 @@ export default {
|
||||
methods: {
|
||||
async copyToken() {
|
||||
this.copied = true
|
||||
await navigator.clipboard.writeText(this.$auth.token)
|
||||
await navigator.clipboard.writeText(this.auth.token)
|
||||
},
|
||||
async deleteAccount() {
|
||||
this.$nuxt.$loading.start()
|
||||
startLoading()
|
||||
try {
|
||||
await this.$axios.delete(
|
||||
`user/${this.$auth.user.id}`,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
await useBaseFetch(`user/${this.auth.user.id}`, {
|
||||
method: 'DELETE',
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
text: err.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
this.$cookies.set('auth-token-reset', true)
|
||||
alert(
|
||||
'Please note that logging back in with GitHub will create a new account.'
|
||||
)
|
||||
useCookie('auth-token').value = null
|
||||
alert('Please note that logging back in with GitHub will create a new account.')
|
||||
window.location.href = '/'
|
||||
|
||||
this.$nuxt.$loading.finish()
|
||||
stopLoading()
|
||||
},
|
||||
logout() {
|
||||
this.$refs.modal_revoke_token.hide()
|
||||
this.$cookies.set('auth-token-reset', true)
|
||||
useCookie('auth-token').value = null
|
||||
|
||||
window.location.href = `${this.$axios.defaults.baseURL}auth/init?url=${process.env.domain}`
|
||||
window.location.href = getAuthUrl()
|
||||
},
|
||||
hasMonetizationEnabled() {
|
||||
return (
|
||||
this.$auth.user.payout_data.payout_wallet &&
|
||||
this.$auth.user.payout_data.payout_wallet_type &&
|
||||
this.$auth.user.payout_data.payout_address
|
||||
this.auth.user.payout_data.payout_wallet &&
|
||||
this.auth.user.payout_data.payout_wallet_type &&
|
||||
this.auth.user.payout_data.payout_address
|
||||
)
|
||||
},
|
||||
async saveChanges() {
|
||||
@@ -243,32 +224,30 @@ export default {
|
||||
this.showKnownErrors = true
|
||||
return
|
||||
}
|
||||
this.$nuxt.$loading.start()
|
||||
startLoading()
|
||||
try {
|
||||
const data = {
|
||||
email: this.email ? this.email : null,
|
||||
}
|
||||
|
||||
await this.$axios.patch(
|
||||
`user/${this.$auth.user.id}`,
|
||||
data,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
await this.$store.dispatch('auth/fetchUser', {
|
||||
token: this.$auth.token,
|
||||
await useBaseFetch(`user/${this.auth.user.id}`, {
|
||||
method: 'PATCH',
|
||||
body: data,
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
await useAuth(this.auth.token)
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
text: err.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
this.$nuxt.$loading.finish()
|
||||
stopLoading()
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.modal-revoke-token {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="$user.follows.length > 0" class="project-list display-mode--list">
|
||||
<div v-if="user.follows.length > 0" class="project-list display-mode--list">
|
||||
<ProjectCard
|
||||
v-for="project in $user.follows"
|
||||
v-for="project in user.follows"
|
||||
:id="project.id"
|
||||
:key="project.id"
|
||||
:type="project.project_type"
|
||||
@@ -16,10 +16,7 @@
|
||||
:server-side="project.server_side"
|
||||
:color="project.color"
|
||||
>
|
||||
<button
|
||||
class="iconified-button"
|
||||
@click="$store.dispatch('user/unfollowProject', project)"
|
||||
>
|
||||
<button class="iconified-button" @click="userUnfollowProject(project)">
|
||||
<HeartIcon />
|
||||
Unfollow
|
||||
</button>
|
||||
@@ -30,30 +27,25 @@
|
||||
<br />
|
||||
<span class="text"
|
||||
>You don't have any followed projects. <br />
|
||||
Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for
|
||||
new ones?</span
|
||||
Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for new ones?</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import ProjectCard from '~/components/ui/ProjectCard'
|
||||
|
||||
import HeartIcon from '~/assets/images/utils/heart.svg?inline'
|
||||
import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
|
||||
import HeartIcon from '~/assets/images/utils/heart.svg'
|
||||
import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProjectCard,
|
||||
HeartIcon,
|
||||
FollowIllustration,
|
||||
},
|
||||
async fetch() {
|
||||
await this.$store.dispatch('user/fetchFollows')
|
||||
},
|
||||
head: {
|
||||
title: 'Followed projects - Modrinth',
|
||||
},
|
||||
const user = await useUser()
|
||||
if (process.client) {
|
||||
await initUserFollows()
|
||||
}
|
||||
|
||||
useHead({ title: 'Followed projects - Modrinth' })
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -5,57 +5,54 @@
|
||||
<div class="adjacent-input">
|
||||
<label for="theme-selector">
|
||||
<span class="label__title">Color theme</span>
|
||||
<span class="label__description"
|
||||
>Change the global site color theme.</span
|
||||
>
|
||||
<span class="label__description">Change the global site color theme.</span>
|
||||
</label>
|
||||
<Multiselect
|
||||
id="theme-selector"
|
||||
v-model="$colorMode.preference"
|
||||
:options="['system', 'light', 'dark', 'oled']"
|
||||
:custom-label="
|
||||
(value) =>
|
||||
value === 'oled'
|
||||
? 'OLED'
|
||||
: value.charAt(0).toUpperCase() + value.slice(1)
|
||||
"
|
||||
:searchable="false"
|
||||
:close-on-select="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="false"
|
||||
/>
|
||||
<div>
|
||||
<Multiselect
|
||||
id="theme-selector"
|
||||
v-model="$colorMode.preference"
|
||||
:options="['system', 'light', 'dark', 'oled']"
|
||||
:custom-label="
|
||||
(value) =>
|
||||
value === 'oled' ? 'OLED' : value.charAt(0).toUpperCase() + value.slice(1)
|
||||
"
|
||||
:searchable="false"
|
||||
:close-on-select="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="false"
|
||||
@update:model-value="(value) => updateTheme(value, true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="adjacent-input small">
|
||||
<label for="search-layout-toggle">
|
||||
<span class="label__title">Search sidebar on the right</span>
|
||||
<span class="label__description"
|
||||
>Enabling this will put the search page's filters sidebar on the
|
||||
right side.</span
|
||||
>Enabling this will put the search page's filters sidebar on the right side.</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
id="search-layout-toggle"
|
||||
v-model="searchLayout"
|
||||
v-model="$cosmetics.searchLayout"
|
||||
class="switch stylized-toggle"
|
||||
type="checkbox"
|
||||
@change="saveCosmeticSettings"
|
||||
@change="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input small">
|
||||
<label for="project-layout-toggle">
|
||||
<span class="label__title">Project sidebar on the right</span>
|
||||
<span class="label__description"
|
||||
>Enabling this will put the project pages' info sidebars on the
|
||||
right side.</span
|
||||
>Enabling this will put the project pages' info sidebars on the right side.</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
id="project-layout-toggle"
|
||||
v-model="projectLayout"
|
||||
v-model="$cosmetics.projectLayout"
|
||||
class="switch stylized-toggle"
|
||||
type="checkbox"
|
||||
@change="saveCosmeticSettings"
|
||||
@change="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -74,14 +71,14 @@
|
||||
</label>
|
||||
<Multiselect
|
||||
:id="projectType + '-search-display-mode'"
|
||||
:value="searchDisplayMode[projectType.id]"
|
||||
v-model="$cosmetics.searchDisplayMode[projectType.id]"
|
||||
:options="$tag.projectViewModes"
|
||||
:custom-label="$capitalizeString"
|
||||
:searchable="false"
|
||||
:close-on-select="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="false"
|
||||
@input="(value) => setSearchDisplayMode(projectType.id, value)"
|
||||
@update:model-value="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -91,49 +88,46 @@
|
||||
<label for="advanced-rendering">
|
||||
<span class="label__title">Advanced rendering</span>
|
||||
<span class="label__description"
|
||||
>Enables advanced rendering such as blur effects that may cause
|
||||
performance issues without hardware-accelerated rendering.</span
|
||||
>Enables advanced rendering such as blur effects that may cause performance issues
|
||||
without hardware-accelerated rendering.</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
id="advanced-rendering"
|
||||
v-model="advancedRendering"
|
||||
v-model="$cosmetics.advancedRendering"
|
||||
class="switch stylized-toggle"
|
||||
type="checkbox"
|
||||
@change="saveCosmeticSettings"
|
||||
@change="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input small">
|
||||
<label for="modpacks-alpha-notice">
|
||||
<span class="label__title">Modpacks alpha notice</span>
|
||||
<span class="label__description"
|
||||
>Shows a banner stating that modpacks are in alpha.</span
|
||||
>
|
||||
<span class="label__description">Shows a banner stating that modpacks are in alpha.</span>
|
||||
</label>
|
||||
<input
|
||||
id="modpacks-alpha-notice"
|
||||
v-model="modpacksAlphaNotice"
|
||||
v-model="$cosmetics.modpacksAlphaNotice"
|
||||
class="switch stylized-toggle"
|
||||
type="checkbox"
|
||||
@change="saveCosmeticSettings"
|
||||
@change="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input small">
|
||||
<label for="external-links-new-tab">
|
||||
<span class="label__title">Open external links in new tab</span>
|
||||
<span class="label__description">
|
||||
Make links which go outside of Modrinth open in a new tab. No matter
|
||||
this setting, links on the same domain and in Markdown descriptions
|
||||
will open in the same tab, and links on ads and edit pages will open
|
||||
in a new tab.
|
||||
Make links which go outside of Modrinth open in a new tab. No matter this setting, links
|
||||
on the same domain and in Markdown descriptions will open in the same tab, and links on
|
||||
ads and edit pages will open in a new tab.
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="external-links-new-tab"
|
||||
v-model="externalLinksNewTab"
|
||||
v-model="$cosmetics.externalLinksNewTab"
|
||||
class="switch stylized-toggle"
|
||||
type="checkbox"
|
||||
@change="saveCosmeticSettings"
|
||||
@change="saveCosmetics"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -143,37 +137,15 @@
|
||||
<script>
|
||||
import Multiselect from 'vue-multiselect'
|
||||
|
||||
export default {
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
Multiselect,
|
||||
},
|
||||
auth: false,
|
||||
data() {
|
||||
return {
|
||||
searchLayout: false,
|
||||
projectLayout: false,
|
||||
modpacksAlphaNotice: true,
|
||||
advancedRendering: true,
|
||||
externalLinksNewTab: true,
|
||||
searchDisplayMode: {
|
||||
mod: 'list',
|
||||
plugin: 'list',
|
||||
resourcepack: 'gallery',
|
||||
modpack: 'list',
|
||||
shader: 'gallery',
|
||||
datapack: 'list',
|
||||
user: 'list',
|
||||
},
|
||||
searchDisplayMode: this.$cosmetics.searchDisplayMode,
|
||||
}
|
||||
},
|
||||
fetch() {
|
||||
this.searchLayout = this.$store.state.cosmetics.searchLayout
|
||||
this.projectLayout = this.$store.state.cosmetics.projectLayout
|
||||
this.modpacksAlphaNotice = this.$store.state.cosmetics.modpacksAlphaNotice
|
||||
this.advancedRendering = this.$store.state.cosmetics.advancedRendering
|
||||
this.externalLinksNewTab = this.$store.state.cosmetics.externalLinksNewTab
|
||||
this.searchDisplayMode = this.$store.state.cosmetics.searchDisplayMode
|
||||
},
|
||||
head: {
|
||||
title: 'Display settings - Modrinth',
|
||||
},
|
||||
@@ -183,10 +155,7 @@ export default {
|
||||
return {
|
||||
id: type.id,
|
||||
name: this.$formatProjectType(type.id) + ' search',
|
||||
display:
|
||||
'the ' +
|
||||
this.$formatProjectType(type.id).toLowerCase() +
|
||||
's search page',
|
||||
display: 'the ' + this.$formatProjectType(type.id).toLowerCase() + 's search page',
|
||||
}
|
||||
})
|
||||
types.push({
|
||||
@@ -197,40 +166,6 @@ export default {
|
||||
return types
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async saveCosmeticSettings() {
|
||||
await this.$store.dispatch('cosmetics/save', {
|
||||
searchLayout: this.searchLayout,
|
||||
projectLayout: this.projectLayout,
|
||||
modpacksAlphaNotice: this.modpacksAlphaNotice,
|
||||
advancedRendering: this.advancedRendering,
|
||||
externalLinksNewTab: this.externalLinksNewTab,
|
||||
searchDisplayMode: this.searchDisplayMode,
|
||||
$cookies: this.$cookies,
|
||||
})
|
||||
},
|
||||
async setSearchDisplayMode(projectType, value) {
|
||||
await this.$store.dispatch('cosmetics/saveSearchDisplayMode', {
|
||||
projectType,
|
||||
mode: value,
|
||||
$cookies: this.$cookies,
|
||||
})
|
||||
this.searchDisplayMode = this.$store.state.cosmetics.searchDisplayMode
|
||||
},
|
||||
changeTheme() {
|
||||
const shift = event.shiftKey
|
||||
switch (this.$colorMode.preference) {
|
||||
case 'dark':
|
||||
this.$colorMode.preference = shift ? 'light' : 'oled'
|
||||
break
|
||||
case 'oled':
|
||||
this.$colorMode.preference = shift ? 'dark' : 'light'
|
||||
break
|
||||
default:
|
||||
this.$colorMode.preference = shift ? 'oled' : 'dark'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -9,11 +9,10 @@
|
||||
</section>
|
||||
<section class="universal-card">
|
||||
<h2 class="title">Enrollment</h2>
|
||||
<template v-if="!enrolled && !$auth.user.email">
|
||||
<template v-if="!enrolled && !auth.user.email">
|
||||
<p v-if="!enrolled">
|
||||
You are not currently enrolled in Modrinth's Creator Monetization
|
||||
Program. In order to enroll, you must first add a valid email address
|
||||
to your account.
|
||||
You are not currently enrolled in Modrinth's Creator Monetization Program. In order to
|
||||
enroll, you must first add a valid email address to your account.
|
||||
</p>
|
||||
<NuxtLink class="iconified-button" to="/settings/account">
|
||||
<SettingsIcon /> Visit account settings
|
||||
@@ -21,9 +20,8 @@
|
||||
</template>
|
||||
<template v-else-if="editing || !enrolled">
|
||||
<p v-if="!enrolled">
|
||||
You are not currently enrolled in Modrinth's Creator Monetization
|
||||
Program. Setup a method of receiving payments below to enable
|
||||
monetization.
|
||||
You are not currently enrolled in Modrinth's Creator Monetization Program. Setup a method
|
||||
of receiving payments below to enable monetization.
|
||||
</p>
|
||||
<div class="enroll universal-body">
|
||||
<Chips
|
||||
@@ -31,13 +29,13 @@
|
||||
:starting-value="selectedWallet"
|
||||
:items="wallets"
|
||||
:format-label="$formatWallet"
|
||||
@input="onChangeWallet()"
|
||||
@update:model-value="onChangeWallet()"
|
||||
/>
|
||||
|
||||
<p>
|
||||
Enter the information for the
|
||||
{{ $formatWallet(selectedWallet) }} account you would like to
|
||||
receive your revenue from the Creator Monetization Program:
|
||||
{{ $formatWallet(selectedWallet) }} account you would like to receive your revenue from
|
||||
the Creator Monetization Program:
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<Multiselect
|
||||
@@ -52,26 +50,20 @@
|
||||
|
||||
<label class="hidden" for="account-input"
|
||||
>{{ $formatWallet(selectedWallet) }}
|
||||
{{ formatAccountType(accountType).toLowerCase() }} input
|
||||
field</label
|
||||
{{ formatAccountType(accountType).toLowerCase() }} input field</label
|
||||
>
|
||||
<input
|
||||
id="account-input"
|
||||
v-model="account"
|
||||
:placeholder="`Enter your ${$formatWallet(
|
||||
selectedWallet
|
||||
)} ${formatAccountType(accountType).toLowerCase()}...`"
|
||||
:placeholder="`Enter your ${$formatWallet(selectedWallet)} ${formatAccountType(
|
||||
accountType
|
||||
).toLowerCase()}...`"
|
||||
:type="accountType === 'email' ? 'email' : ''"
|
||||
/>
|
||||
<span v-if="accountType === 'phone'">
|
||||
Format: +18888888888 or +1-888-888-8888
|
||||
</span>
|
||||
<span v-if="accountType === 'phone'"> Format: +18888888888 or +1-888-888-8888 </span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button
|
||||
class="iconified-button brand-button"
|
||||
@click="updatePayoutData(false)"
|
||||
>
|
||||
<button class="iconified-button brand-button" @click="updatePayoutData(false)">
|
||||
<SaveIcon /> Save information
|
||||
</button>
|
||||
<button
|
||||
@@ -100,13 +92,13 @@
|
||||
<script>
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import Chips from '~/components/ui/Chips'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg?inline'
|
||||
import TrashIcon from '~/assets/images/utils/trash.svg?inline'
|
||||
import EditIcon from '~/assets/images/utils/edit.svg?inline'
|
||||
import ChartIcon from '~/assets/images/utils/chart.svg?inline'
|
||||
import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg'
|
||||
import TrashIcon from '~/assets/images/utils/trash.svg'
|
||||
import EditIcon from '~/assets/images/utils/edit.svg'
|
||||
import ChartIcon from '~/assets/images/utils/chart.svg'
|
||||
import SettingsIcon from '~/assets/images/utils/settings.svg'
|
||||
|
||||
export default {
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
Multiselect,
|
||||
Chips,
|
||||
@@ -116,19 +108,24 @@ export default {
|
||||
ChartIcon,
|
||||
SettingsIcon,
|
||||
},
|
||||
async setup() {
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
const auth = await useAuth()
|
||||
return { auth }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false,
|
||||
enrolled:
|
||||
this.$auth.user.payout_data.payout_wallet &&
|
||||
this.$auth.user.payout_data.payout_wallet_type &&
|
||||
this.$auth.user.payout_data.payout_address,
|
||||
this.auth.user.payout_data.payout_wallet &&
|
||||
this.auth.user.payout_data.payout_wallet_type &&
|
||||
this.auth.user.payout_data.payout_address,
|
||||
wallets: ['paypal', 'venmo'],
|
||||
selectedWallet: this.$auth.user.payout_data.payout_wallet ?? 'paypal',
|
||||
accountType:
|
||||
this.$auth.user.payout_data.payout_wallet_type ??
|
||||
this.getAccountTypes()[0],
|
||||
account: this.$auth.user.payout_data.payout_address ?? '',
|
||||
selectedWallet: this.auth.user.payout_data.payout_wallet ?? 'paypal',
|
||||
accountType: this.auth.user.payout_data.payout_wallet_type ?? this.getAccountTypes()[0],
|
||||
account: this.auth.user.payout_data.payout_address ?? '',
|
||||
}
|
||||
},
|
||||
head: {
|
||||
@@ -167,7 +164,7 @@ export default {
|
||||
}
|
||||
},
|
||||
async updatePayoutData(unenroll) {
|
||||
this.$nuxt.$loading.start()
|
||||
startLoading()
|
||||
if (unenroll) {
|
||||
this.selectedWallet = 'paypal'
|
||||
this.accountType = this.getAccountTypes()[0]
|
||||
@@ -184,14 +181,12 @@ export default {
|
||||
},
|
||||
}
|
||||
|
||||
await this.$axios.patch(
|
||||
`user/${this.$auth.user.id}`,
|
||||
data,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
await this.$store.dispatch('auth/fetchUser', {
|
||||
token: this.$auth.token,
|
||||
await useBaseFetch(`user/${this.auth.user.id}`, {
|
||||
method: 'PATCH',
|
||||
body: data,
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
await useAuth(this.auth.token)
|
||||
|
||||
this.editing = false
|
||||
this.enrolled = !unenroll
|
||||
@@ -199,13 +194,13 @@ export default {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
text: err.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
this.$nuxt.$loading.finish()
|
||||
stopLoading()
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user