Added new options to the settings dashboard tab. (#60)
* Created developer tools dashboard * Remove PopUp and use inline version * Moved developer tools to the settings tab At request of Geo * Fixed some bugs. * Fix Typos and flex on buttons * Lowercased token * Fix button styles * Move screenshot in-house. * Move screenshot in-house. * Completed Developer Settings and Added features to Settings Tab. Also fixed the about page, updated the "alpha" mention to beta. * Update revoke-token.vue
This commit is contained in:
calum6541
GitHub
parent
8f780ad89e
commit
dff34a8ae2
4
.gitignore
vendored
4
.gitignore
vendored
@ -7,6 +7,7 @@ npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
@ -88,3 +89,6 @@ sw.*
|
||||
|
||||
# Vim swap files
|
||||
*.swp
|
||||
|
||||
# pnpm files
|
||||
pnpm-lock.yaml
|
||||
BIN
assets/images/dark-mode-preview.png
Normal file
BIN
assets/images/dark-mode-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
assets/images/light-mode-preview.png
Normal file
BIN
assets/images/light-mode-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
assets/images/revoke-token.png
Normal file
BIN
assets/images/revoke-token.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
1
assets/images/sidebar/devtools.svg
Normal file
1
assets/images/sidebar/devtools.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
|
||||
|
After Width: | Height: | Size: 386 B |
@ -123,6 +123,7 @@ export default {
|
||||
'@nuxtjs/auth',
|
||||
'@nuxtjs/robots',
|
||||
'@nuxtjs/sitemap',
|
||||
'nuxt-clipboard2',
|
||||
],
|
||||
robots: {
|
||||
Sitemap: 'https://modrinth.com/sitemap.xml',
|
||||
|
||||
49
package-lock.json
generated
49
package-lock.json
generated
@ -4047,6 +4047,16 @@
|
||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
|
||||
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
|
||||
},
|
||||
"clipboard": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
|
||||
"integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
|
||||
"requires": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
"tiny-emitter": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"cliui": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
|
||||
@ -4902,6 +4912,11 @@
|
||||
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
|
||||
"dev": true
|
||||
},
|
||||
"delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"delegates": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||
@ -6764,6 +6779,14 @@
|
||||
"minimatch": "~3.0.2"
|
||||
}
|
||||
},
|
||||
"good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
|
||||
"requires": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
|
||||
@ -8908,6 +8931,14 @@
|
||||
"@nuxt/webpack": "2.14.7"
|
||||
}
|
||||
},
|
||||
"nuxt-clipboard2": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nuxt-clipboard2/-/nuxt-clipboard2-0.2.1.tgz",
|
||||
"integrity": "sha512-NZl9UpcLjePt3CRhYSmJiv7af5IiI1DRrmesGawapjImmWZ2cO+UqflimIlBqIXjJSnz3ZsaPxX4639UgkxYTA==",
|
||||
"requires": {
|
||||
"vue-clipboard2": "0.2.1"
|
||||
}
|
||||
},
|
||||
"oauth-sign": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
|
||||
@ -11273,6 +11304,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
|
||||
},
|
||||
"semver": {
|
||||
"version": "7.3.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
|
||||
@ -12295,6 +12331,11 @@
|
||||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
@ -12772,6 +12813,14 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz",
|
||||
"integrity": "sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA=="
|
||||
},
|
||||
"vue-clipboard2": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz",
|
||||
"integrity": "sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==",
|
||||
"requires": {
|
||||
"clipboard": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"highlight.js": "^10.3.2",
|
||||
"marked": "^1.2.0",
|
||||
"nuxt": "^2.14.7",
|
||||
"nuxt-clipboard2": "^0.2.1",
|
||||
"v-tooltip": "^2.0.3",
|
||||
"vue-click-outside": "^1.1.0",
|
||||
"vue-highlightjs": "^1.3.3",
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
While we still are in early alpha, we hope we can soon be a major
|
||||
modding platform for all modders :)
|
||||
While we still are in beta, we hope we can be a major modding platform
|
||||
for all modders.
|
||||
</p>
|
||||
</div>
|
||||
<m-footer class="footer" centered />
|
||||
|
||||
114
pages/dashboard/misc/revoke-token.vue
Normal file
114
pages/dashboard/misc/revoke-token.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<DashboardPage>
|
||||
<div class="section-header columns">
|
||||
<h3 class="column-grow-1">Revoke your Modrinth token</h3>
|
||||
</div>
|
||||
<section class="essentials pad-maker">
|
||||
<p>
|
||||
Revoking your Modrinth token can have unintended consequences. Please be
|
||||
wary, 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>
|
||||
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>
|
||||
<ol>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
|
||||
>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.
|
||||
</li>
|
||||
</ol>
|
||||
<p>Once you have completed the 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.</strong
|
||||
>
|
||||
</p>
|
||||
<button @click="logout">Continue</button>
|
||||
</section></DashboardPage
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DashboardPage from '@/components/DashboardPage'
|
||||
export default {
|
||||
components: {
|
||||
DashboardPage,
|
||||
},
|
||||
methods: {
|
||||
async logout() {
|
||||
await this.$auth. setToken('local', false)
|
||||
await this.$router.go(
|
||||
'https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com/'
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pad-rem {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pad-maker {
|
||||
margin-top: var(--spacing-card-md);
|
||||
}
|
||||
|
||||
.save-btn-div {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
section {
|
||||
@extend %card;
|
||||
padding: var(--spacing-card-md) var(--spacing-card-lg);
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex: 2;
|
||||
padding-right: var(--spacing-card-lg);
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 3;
|
||||
height: fit-content;
|
||||
}
|
||||
button {
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
height: fit-content;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,7 +25,10 @@
|
||||
:status="mod.status"
|
||||
:is-modrinth="true"
|
||||
>
|
||||
<nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
|
||||
<nuxt-link
|
||||
class="button buttonse column"
|
||||
:to="'/mod/' + mod.id + '/edit'"
|
||||
>
|
||||
Edit
|
||||
</nuxt-link>
|
||||
</ModCard>
|
||||
@ -72,4 +75,8 @@ export default {
|
||||
.mod-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
// .buttonse {
|
||||
// margin-left: 4.5rem;
|
||||
// padding: 0.5rem 2rem 0.5rem 2rem;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable vue/attribute-hyphenation */
|
||||
<template>
|
||||
<DashboardPage>
|
||||
<div class="section-header columns">
|
||||
@ -8,7 +9,7 @@
|
||||
<h3>Username</h3>
|
||||
<label>
|
||||
<span>
|
||||
The username used on the modrinth site to identify yourself. This must
|
||||
The username used on the Modrinth site to identify yourself. This must
|
||||
be unique.
|
||||
</span>
|
||||
<input
|
||||
@ -41,6 +42,50 @@
|
||||
<input v-model="bio" type="text" placeholder="Enter your bio" />
|
||||
</label>
|
||||
</section>
|
||||
<section class="essentials pad-maker">
|
||||
<h3>Theme</h3>
|
||||
<label>
|
||||
<span
|
||||
>Change the global site theme of Modrinth. You can choose from light
|
||||
mode and dark mode. You can switch it using this button or anywhere by
|
||||
accessing the theme switcher in the navigation bar dropdown.</span
|
||||
>
|
||||
<input
|
||||
type="button"
|
||||
class="button pad-rem"
|
||||
value="Change Theme"
|
||||
@click="changeTheme"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
<section class="essentials pad-maker">
|
||||
<h3>Authorization token</h3>
|
||||
<label>
|
||||
<span>
|
||||
Your authorization token can be used with the Modrinth API and for the
|
||||
Minotaur Gradle plugin. However, it must be kept secret!
|
||||
</span>
|
||||
<input
|
||||
type="button"
|
||||
class="button pad-rem"
|
||||
value="Copy to clipboard"
|
||||
@click="copyToken"
|
||||
/>
|
||||
</label>
|
||||
<h3>Revoke your token</h3>
|
||||
<label>
|
||||
<span
|
||||
>Beware, this will log you out of Modrinth, and you will have to login
|
||||
again to access Modrinth with a new token.</span
|
||||
>
|
||||
<input
|
||||
type="button"
|
||||
class="button"
|
||||
value="Revoke token"
|
||||
@click="gotoRevoke"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
</DashboardPage>
|
||||
</template>
|
||||
|
||||
@ -57,6 +102,7 @@ export default {
|
||||
this.name = this.$auth.user.name
|
||||
this.email = this.$auth.user.email
|
||||
this.bio = this.$auth.user.bio
|
||||
this.token = this.$auth.getToken('local')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -64,9 +110,34 @@ export default {
|
||||
name: '',
|
||||
email: '',
|
||||
bio: '',
|
||||
token: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTheme() {
|
||||
this.$colorMode.preference =
|
||||
this.$colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
|
||||
this.themeAds()
|
||||
},
|
||||
themeAds() {
|
||||
const elements = document.getElementsByClassName('ethical-ad')
|
||||
for (const elem of elements) {
|
||||
elem.className = 'ethical-ad loaded ' + this.$colorMode.preference
|
||||
}
|
||||
},
|
||||
gotoRevoke() {
|
||||
this.$router.replace('/dashboard/misc/revoke-token')
|
||||
},
|
||||
async copyToken() {
|
||||
await this.$copyText(this.token)
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'Copied to clipboard.',
|
||||
text: 'Copied your Modrinth token to the clipboard.',
|
||||
type: 'success',
|
||||
})
|
||||
},
|
||||
async editProfile() {
|
||||
const config = {
|
||||
headers: {
|
||||
@ -105,9 +176,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pad-rem {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pad-maker {
|
||||
margin-top: var(--spacing-card-md);
|
||||
}
|
||||
|
||||
.save-btn-div {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
section {
|
||||
@extend %card;
|
||||
|
||||
padding: var(--spacing-card-md) var(--spacing-card-lg);
|
||||
}
|
||||
|
||||
@ -123,5 +210,12 @@ label {
|
||||
flex: 3;
|
||||
height: fit-content;
|
||||
}
|
||||
input[type='button'] {
|
||||
height: fit-content;
|
||||
flex: 1;
|
||||
}
|
||||
input[type='button']:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user