Merge

pages/dashboard/moderation.vue

@@ -1,86 +1,56 @@
 <template>
-  <div class="page-container">
-    <div class="page-contents">
-      <div class="sidebar-l">
-        <div class="card page-nav">
-          <nuxt-link :to="'/dashboard/projects'" class="tab last">
-            <ModIcon />
-            My mods
-          </nuxt-link>
-          <nuxt-link
-            v-if="
-              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
-            "
-            :to="'/dashboard/moderation'"
-            class="tab last"
-          >
-            <ModerationIcon />
-            Moderation
-          </nuxt-link>
-        </div>
-        <m-footer class="footer" />
-        <client-only>
-          <EthicalAd type="image" />
-        </client-only>
-      </div>
-      <div class="content">
-        <div class="section-header">
-          <h3 class="column-grow-1">Mods</h3>
-        </div>
-        <ModCard
-          v-for="mod in mods"
-          :id="mod.id"
-          :key="mod.id"
-          :author="mod.author"
-          :name="mod.title"
-          :description="mod.description"
-          :latest-version="mod.latest_version"
-          :created-at="mod.published"
-          :updated-at="mod.updated"
-          :downloads="mod.downloads.toString()"
-          :icon-url="mod.icon_url"
-          :author-url="mod.author_url"
-          :page-url="mod.page_url"
-          :categories="mod.categories"
-          :edit-mode="true"
-          :status="mod.status"
-          :is-modrinth="true"
-        >
-          <button
-            class="button column approve"
-            @click="changeModStatus(mod.id, 'approved')"
-          >
-            Approve
-          </button>
-          <button
-            class="button column reject"
-            @click="changeModStatus(mod.id, 'rejected')"
-          >
-            Reject
-          </button>
-        </ModCard>
-        <div class="section-header">
-          <h3 class="column-grow-1">Versions</h3>
-        </div>
-      </div>
+  <DashboardPage>
+    <div class="section-header">
+      <h3 class="column-grow-1">Mods</h3>
     </div>
-  </div>
+    <ModCard
+      v-for="mod in mods"
+      :id="mod.id"
+      :key="mod.id"
+      :author="mod.author"
+      :name="mod.title"
+      :description="mod.description"
+      :latest-version="mod.latest_version"
+      :created-at="mod.published"
+      :updated-at="mod.updated"
+      :downloads="mod.downloads.toString()"
+      :icon-url="mod.icon_url"
+      :author-url="mod.author_url"
+      :page-url="mod.page_url"
+      :categories="mod.categories"
+      :edit-mode="true"
+      :status="mod.status"
+      :is-modrinth="true"
+    >
+      <button
+        class="button column approve"
+        @click="changeModStatus(mod.id, 'approved')"
+      >
+        Approve
+      </button>
+      <button
+        class="button column reject"
+        @click="changeModStatus(mod.id, 'rejected')"
+      >
+        Reject
+      </button>
+    </ModCard>
+    <div class="section-header">
+      <h3 class="column-grow-1">Versions</h3>
+    </div>
+  </DashboardPage>
 </template>
 
 <script>
 import axios from 'axios'
-import EthicalAd from '@/components/EthicalAd'
-import ModCard from '@/components/ProjectCard'
 
-import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
+import ModCard from '@/components/ProjectCard'
+import DashboardPage from '@/components/DashboardPage'
 
 export default {
   components: {
-    EthicalAd,
+    DashboardPage,
     ModCard,
-    ModIcon,
-    ModerationIcon,
   },
   async asyncData(data) {
     const config = {
@@ -133,17 +103,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
 .button {
   margin: 0.25rem 0;
 }

pages/dashboard/projects.vue

@@ -1,79 +1,46 @@
 <template>
-  <div class="page-container">
-    <div class="page-contents">
-      <div class="sidebar-l">
-        <div class="card page-nav">
-          <nuxt-link :to="'/dashboard/projects'" class="tab last">
-            <ModIcon />
-            My mods
-          </nuxt-link>
-          <nuxt-link
-            v-if="
-              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
-            "
-            :to="'/dashboard/moderation'"
-            class="tab last"
-          >
-            <ModerationIcon />
-            Moderation
-          </nuxt-link>
-        </div>
-        <m-footer class="footer" />
-        <client-only>
-          <EthicalAd type="image" />
-        </client-only>
-      </div>
-      <div class="content">
-        <div class="section-header columns">
-          <h3 class="column-grow-1">My mods</h3>
-          <nuxt-link class="brand-button column" to="/mod/create">
-            Create a mod
-          </nuxt-link>
-        </div>
-        <ModCard
-          v-for="mod in mods"
-          :id="mod.slug ? mod.slug : mod.id"
-          :key="mod.id"
-          :author="mod.author"
-          :name="mod.title"
-          :description="mod.description"
-          :latest-version="mod.latest_version"
-          :created-at="mod.published"
-          :updated-at="mod.updated"
-          :downloads="mod.downloads.toString()"
-          :icon-url="mod.icon_url"
-          :author-url="mod.author_url"
-          :page-url="mod.page_url"
-          :categories="mod.categories"
-          :edit-mode="true"
-          :status="mod.status"
-          :is-modrinth="true"
-        >
-          <nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
-            Edit
-          </nuxt-link>
-        </ModCard>
-      </div>
+  <DashboardPage>
+    <div class="section-header columns">
+      <h3 class="column-grow-1">My mods</h3>
+      <nuxt-link class="brand-button column" to="/mod/create">
+        Create a mod
+      </nuxt-link>
     </div>
-  </div>
+    <ModCard
+      v-for="mod in mods"
+      :id="mod.slug ? mod.slug : mod.id"
+      :key="mod.id"
+      :author="mod.author"
+      :name="mod.title"
+      :description="mod.description"
+      :latest-version="mod.latest_version"
+      :created-at="mod.published"
+      :updated-at="mod.updated"
+      :downloads="mod.downloads.toString()"
+      :icon-url="mod.icon_url"
+      :author-url="mod.author_url"
+      :page-url="mod.page_url"
+      :categories="mod.categories"
+      :edit-mode="true"
+      :status="mod.status"
+      :is-modrinth="true"
+    >
+      <nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
+        Edit
+      </nuxt-link>
+    </ModCard>
+  </DashboardPage>
 </template>
 
 <script>
 import axios from 'axios'
-import EthicalAd from '@/components/EthicalAd'
 import ModCard from '@/components/ProjectCard'
-import MFooter from '@/components/MFooter'
-
-import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
+import DashboardPage from '@/components/DashboardPage'
 
 export default {
   components: {
-    EthicalAd,
+    DashboardPage,
     ModCard,
-    ModIcon,
-    ModerationIcon,
-    MFooter,
   },
   async asyncData(data) {
     const config = {
@@ -102,17 +69,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
 .mod-name {
   font-weight: bold;
 }

pages/dashboard/settings.vue

@@ -0,0 +1,127 @@
+<template>
+  <DashboardPage>
+    <div class="section-header columns">
+      <h3 class="column-grow-1">Settings</h3>
+      <button class="brand-button column" @click="editProfile">Save</button>
+    </div>
+    <section class="essentials">
+      <h3>Username</h3>
+      <label>
+        <span>
+          The username used on the modrinth site to identify yourself. This must
+          be unique.
+        </span>
+        <input
+          v-model="username"
+          type="text"
+          placeholder="Enter your username"
+        />
+      </label>
+      <h3>Name</h3>
+      <label>
+        <span>
+          Your display name on your Modrinth profile. This does not have to be
+          unique, can be set to anything, and is optional.
+        </span>
+        <input v-model="name" type="text" placeholder="Enter your name" />
+      </label>
+      <h3>Email</h3>
+      <label>
+        <span>
+          The email for your account. This is private information which is not
+          displayed in any API routes or your profile. It is also optional.
+        </span>
+        <input v-model="email" type="email" placeholder="Enter your email" />
+      </label>
+      <h3>Bio</h3>
+      <label>
+        <span>
+          Give a quick description to your mod. It will appear in the search
+        </span>
+        <input v-model="bio" type="text" placeholder="Enter your bio" />
+      </label>
+    </section>
+  </DashboardPage>
+</template>
+
+<script>
+import DashboardPage from '@/components/DashboardPage'
+import axios from 'axios'
+
+export default {
+  components: {
+    DashboardPage,
+  },
+  fetch() {
+    this.username = this.$auth.user.username
+    this.name = this.$auth.user.name
+    this.email = this.$auth.user.email
+    this.bio = this.$auth.user.bio
+  },
+  data() {
+    return {
+      username: '',
+      name: '',
+      email: '',
+      bio: '',
+    }
+  },
+  methods: {
+    async editProfile() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        const data = {
+          username: this.username,
+          name: this.name,
+          email: this.email,
+          bio: this.bio,
+        }
+
+        await axios.patch(
+          `https://api.modrinth.com/api/v1/user/${this.$auth.user.id}`,
+          data,
+          config
+        )
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+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;
+  }
+}
+</style>