Update master with new auth (#1236)

* Begin UI for threads and moderation overhaul * Hide close button on non-report threads * Fix review age coloring * Add project count * Remove action buttons from queue page and add queued date to project page * Hook up to actual data * Remove unused icon * Get up to 1000 projects in queue * prettier * more prettier * Changed all the things * lint * rebuild * Add omorphia * Workaround formatjs bug in ThreadSummary.vue * Fix notifications page on prod * Fix a few notifications and threads bugs * lockfile * Fix duplicate button styles * more fixes and polishing * More fixes * Remove legacy pages * More bugfixes * Add some error catching for reports and notifications * More error handling * fix lint * Add inbox links * Remove loading component and rename member header * Rely on threads always existing * Handle if project update notifs are not grouped * oops * Fix chips on notifications page * Import ModalModeration * finish threads * New authentication (#1234) * Initial new auth work * more auth pages * Finish most * more * fix on landing page * Finish everything but PATs + Sessions * fix threads merge bugs * fix cf pages ssr * fix most issues * Finish authentication * Fix merge --------- Co-authored-by: triphora <emma@modrinth.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2023-07-20 11:19:42 -07:00
parent a5613ebb10
commit 34d63f3557
72 changed files with 2373 additions and 711 deletions
@@ -0,0 +1,144 @@
+<template>
+  <div class="auth-page-container">
+    <h1>Create your account</h1>
+    <div class="third-party">
+      <a class="btn discord-btn" :href="getAuthUrl('discord')">
+        <DiscordIcon /> <span>Discord</span>
+      </a>
+      <a class="btn github-btn" :href="getAuthUrl('github')"><GitHubIcon /> <span>GitHub</span></a>
+      <a class="btn microsoft-btn" :href="getAuthUrl('microsoft')">
+        <MicrosoftIcon /> <span>Microsoft</span>
+      </a>
+      <a class="btn google-btn" :href="getAuthUrl('google')">
+        <GoogleIcon /> <span>Google</span>
+      </a>
+      <a class="btn apple-btn" :href="getAuthUrl('steam')"><SteamIcon /> <span>Steam</span></a>
+      <a class="btn gitlab-btn" :href="getAuthUrl('gitlab')"> <GitLabIcon /> <span>GitLab</span></a>
+    </div>
+    <div class="text-divider">
+      <div></div>
+      <span>or</span>
+      <div></div>
+    </div>
+    <label for="email" hidden>Email</label>
+    <input id="email" v-model="email" type="text" placeholder="Email" />
+    <label for="username" hidden>Username</label>
+    <input id="username" v-model="username" type="text" placeholder="Username" />
+    <label for="password" hidden>Password</label>
+    <input id="password" v-model="password" type="password" placeholder="Password" />
+    <label for="confirm-password" hidden>Password</label>
+    <input
+      id="confirm-password"
+      v-model="confirmPassword"
+      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>
+    <p>
+      Already have an account yet?
+      <nuxt-link
+        class="text-link"
+        :to="`/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`"
+      >
+        Sign in.
+      </nuxt-link>
+      <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
+    </p>
+  </div>
+</template>
+
+<script setup>
+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'
+
+useHead({
+  title: 'Sign Up - Modrinth',
+})
+
+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')
+}
+
+const data = useNuxtApp()
+
+const turnstile = ref()
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const token = ref('')
+const subscribe = ref(true)
+
+async function createAccount() {
+  startLoading()
+  try {
+    if (confirmPassword.value !== password.value) {
+      data.$notify({
+        group: 'main',
+        title: 'An error occurred',
+        text: 'Passwords do not match!',
+        type: 'error',
+      })
+      turnstile.value?.reset()
+    }
+
+    const res = await useBaseFetch('auth/create', {
+      method: 'POST',
+      body: {
+        username: username.value,
+        password: password.value,
+        email: email.value,
+        challenge: token.value,
+        sign_up_newsletter: subscribe.value,
+      },
+    })
+
+    await useAuth(res.session)
+    await useUser()
+
+    if (route.query.redirect) {
+      await navigateTo(route.query.redirect)
+    } else {
+      await navigateTo('/dashboard')
+    }
+  } catch (err) {
+    data.$notify({
+      group: 'main',
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+</script>
+<style lang="scss" scoped>
+.subscribe-btn {
+  margin-block-start: 0 !important;
+}
+</style>