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

.gitignore

@@ -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

assets/images/sidebar/devtools.svg

@@ -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>

nuxt.config.js

@@ -123,6 +123,7 @@ export default {
     '@nuxtjs/auth',
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
+    'nuxt-clipboard2',
   ],
   robots: {
     Sitemap: 'https://modrinth.com/sitemap.xml',

package-lock.json

@@ -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",

package.json

@@ -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",

pages/about.vue

@@ -14,8 +14,8 @@
       </p>
 
       <p>
-        While we still are in early alpha, we hope we can soon be a major
+        While we still are in beta, we hope we can be a major modding platform
-        modding platform for all modders :)
+        for all modders.
       </p>
     </div>
     <m-footer class="footer" centered />

pages/dashboard/misc/revoke-token.vue

@@ -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>

pages/dashboard/projects.vue

@@ -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>

pages/dashboard/settings.vue

@@ -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>