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

pages/about.vue

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

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>