fix most issues

composables/auth.js

@@ -35,7 +35,7 @@ export const initAuth = async (oldToken = null) => {
     authCookie.value = oldToken
   }
 
-  if (route.query.code) {
+  if (route.query.code && !route.fullPath.includes('new_account=true')) {
     authCookie.value = route.query.code
   }
 

composables/fetch.js

@@ -16,6 +16,5 @@ export const useBaseFetch = async (url, options = {}, skipAuth = false) => {
     options.headers.Authorization = auth.value.token
   }
 
-  console.log(`${base}${url}`)
   return await $fetch(`${base}${url}`, options)
 }

pages/auth.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <NuxtPage class="auth-container card" :route="route" />
+    <NuxtPage class="auth-container universal-card" :route="route" />
   </div>
 </template>
 
@@ -10,15 +10,13 @@ const route = useRoute()
 
 <style lang="scss">
 .auth-container {
-  width: 24rem;
+  width: 25rem;
   padding: var(--gap-xl);
   background-color: var(--color-raised-bg);
   border-radius: var(--radius-lg);
   margin: 2rem auto;
 
   h1 {
-    font-size: 1.75rem;
-    font-weight: 500;
     margin: 0;
     color: var(--color-contrast);
   }
@@ -68,6 +66,7 @@ const route = useRoute()
   .continue-btn {
     margin-left: auto;
     margin-right: auto;
+    margin-block-start: 0;
   }
 
   .continue-btn svg {

pages/auth/reset-password.vue

@@ -6,15 +6,15 @@
         Enter your email below and we'll send a recovery link to allow you to recover your account.
         <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
       </p>
-      <label for="email" hidden>Email or password</label>
-      <input id="email" v-model="email" type="text" placeholder="Email or password" />
+      <label for="email" hidden>Email or username</label>
+      <input id="email" v-model="email" type="text" placeholder="Email or username" />
       <button class="btn btn-primary continue-btn" @click="recovery">Send recovery email</button>
     </template>
     <template v-else-if="step === 'passed_challenge'">
       <p>Enter your new password below to gain access to your account.</p>
       <label for="password" hidden>Password</label>
       <input id="password" v-model="newPassword" type="password" placeholder="Password" />
-      <label for="confirm-password" hidden>Password</label>
+      <label for="confirm-password" hi2dden>Password</label>
       <input
         id="confirm-password"
         v-model="confirmNewPassword"

pages/auth/sign-in.vue

@@ -8,8 +8,8 @@
       <input
         id="two-factor-code"
         v-model="twoFactorCode"
-        maxlength="6"
-        type="number"
+        maxlength="11"
+        type="text"
         placeholder="Enter code..."
       />
 
@@ -75,6 +75,18 @@ import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
 import GitLabIcon from 'assets/images/utils/gitlab.svg'
 
 const auth = await useAuth()
+
+const route = useRoute()
+if (route.fullPath.includes('new_account=true')) {
+  await navigateTo(
+    `/auth/welcome?authToken=${route.query.code}${
+      route.query.redirect ? `&redirect=${encodeURIComponent(route.query.redirect)}` : ''
+    }`
+  )
+} else if (route.query.code) {
+  await loginHandler()
+}
+
 if (auth.value.user) {
   await navigateTo('/dashboard')
 }
@@ -87,13 +99,8 @@ const email = ref('')
 const password = ref('')
 const token = ref('')
 
-const route = useRoute()
 const flow = ref(route.query.flow)
 
-if (route.query.code) {
-  await loginHandler()
-}
-
 async function loginPassword() {
   startLoading()
   try {
@@ -176,7 +183,7 @@ async function loginHandler(token) {
 .account-options {
   display: flex;
   width: 100%;
-  margin-block-start: 0;
+  margin-block-start: 0 !important;
 }
 .account-options a {
   margin-left: auto;

pages/auth/sign-up.vue

@@ -33,6 +33,12 @@
       type="password"
       placeholder="Confirm password"
     />
+    <Checkbox v-model="subscribe" class="subscribe-btn" label="Subscribe updates about Modrinth" />
+    <p>
+      By creating an account, you agree to Modrinth's
+      <nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
+      <nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
+    </p>
     <button class="btn btn-primary continue-btn" @click="createAccount">
       Create account <RightArrowIcon />
     </button>
@@ -50,14 +56,24 @@
 </template>
 
 <script setup>
-import { GitHubIcon, RightArrowIcon } from 'omorphia'
+import { GitHubIcon, RightArrowIcon, Checkbox } from 'omorphia'
 import DiscordIcon from 'assets/images/utils/discord.svg'
 import GoogleIcon from 'assets/images/utils/google.svg'
 import SteamIcon from 'assets/images/utils/steam.svg'
 import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
 import GitLabIcon from 'assets/images/utils/gitlab.svg'
 
 const auth = await useAuth()
+const route = useRoute()
+
+if (route.fullPath.includes('new_account=true')) {
+  await navigateTo(
+    `/auth/welcome?authToken=${route.query.code}${
+      route.query.redirect ? `&redirect=${encodeURIComponent(route.query.redirect)}` : ''
+    }`
+  )
+}
+
 if (auth.value.user) {
   await navigateTo('/dashboard')
 }
@@ -71,8 +87,7 @@ const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const token = ref('')
-
-const route = useRoute()
+const subscribe = ref(true)
 
 async function createAccount() {
   startLoading()
@@ -94,6 +109,7 @@ async function createAccount() {
         password: password.value,
         email: email.value,
         challenge: token.value,
+        sign_up_newsletter: subscribe.value,
       },
     })
 
@@ -117,3 +133,8 @@ async function createAccount() {
   stopLoading()
 }
 </script>
+<style lang="scss" scoped>
+.subscribe-btn {
+  margin-block-start: 0 !important;
+}
+</style>

pages/auth/welcome.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="auth-page-container">
+    <h1>Welcome to Modrinth!</h1>
+    <p>
+      Thank you for creating an account. You can now follow and create projects, receive updates
+      about your favorite projects, and more!
+    </p>
+    <Checkbox v-model="subscribe" class="subscribe-btn" label="Subscribe updates about Modrinth" />
+    <button class="btn btn-primary continue-btn" @click="continueSignUp">Continue</button>
+    <p>
+      By creating an account, you agree to Modrinth's
+      <nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
+      <nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
+    </p>
+  </div>
+</template>
+<script setup>
+import { Checkbox } from 'omorphia'
+
+const subscribe = ref(true)
+
+async function continueSignUp() {
+  const route = useRoute()
+
+  await useAuth(route.query.authToken)
+  await useUser()
+
+  if (subscribe.value) {
+    try {
+      await useBaseFetch('auth/email/subscribe', {
+        method: 'POST',
+      })
+    } catch {}
+  }
+
+  if (route.query.redirect) {
+    await navigateTo(route.query.redirect)
+  } else {
+    await navigateTo('/dashboard')
+  }
+}
+</script>

pages/settings/account.vue

@@ -127,8 +127,8 @@
           <input
             id="two-factor-code"
             v-model="twoFactorCode"
-            maxlength="6"
-            type="number"
+            maxlength="11"
+            type="text"
             placeholder="Enter code..."
           />
           <p v-if="twoFactorIncorrect" class="known-errors">The code entered is incorrect!</p>
@@ -228,7 +228,7 @@
         </template>
       </div>
     </Modal>
-    <Modal ref="manageProvidersModal" header="Manage authentication providers">
+    <Modal ref="manageProvidersModal" header="Authentication providers">
       <div class="universal-modal">
         <div class="table">
           <div class="table-row table-head">