Migrate to Turborepo (#1251)

apps/frontend/src/pages/auth/authorize.vue

@@ -0,0 +1,363 @@
+<template>
+  <div>
+    <div v-if="error" class="oauth-items">
+      <div>
+        <h1>{{ formatMessage(commonMessages.errorLabel) }}</h1>
+      </div>
+      <p>
+        <span>{{ error.data.error }}: </span>
+        {{ error.data.description }}
+      </p>
+    </div>
+    <div v-else class="oauth-items">
+      <div class="connected-items">
+        <div class="profile-pics">
+          <Avatar size="md" :src="app.icon_url" />
+          <!-- <img class="profile-pic" :src="app.icon_url" alt="User profile picture" /> -->
+          <div class="connection-indicator">→</div>
+          <Avatar size="md" circle :src="auth.user.avatar_url" />
+          <!-- <img class="profile-pic" :src="auth.user.avatar_url" alt="User profile picture" /> -->
+        </div>
+      </div>
+      <div class="title">
+        <h1>{{ formatMessage(messages.title, { appName: app.name }) }}</h1>
+      </div>
+      <div class="auth-info">
+        <div class="scope-heading">
+          <IntlFormatted
+            :message-id="messages.appInfo"
+            :values="{
+              appName: app.name,
+              creator: createdBy.username,
+            }"
+          >
+            <template #strong="{ children }">
+              <strong>
+                <component :is="() => normalizeChildren(children)" />
+              </strong>
+            </template>
+            <template #creator-link="{ children }">
+              <nuxt-link class="text-link" :to="'/user/' + createdBy.id">
+                <component :is="() => normalizeChildren(children)" />
+              </nuxt-link>
+            </template>
+          </IntlFormatted>
+        </div>
+        <div class="scope-items">
+          <div v-for="scopeItem in scopeDefinitions" :key="scopeItem">
+            <div class="scope-item">
+              <div class="scope-icon">
+                <CheckIcon />
+              </div>
+              {{ scopeItem }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="button-row">
+        <Button class="wide-button" large :action="onReject" :disabled="pending">
+          <XIcon />
+          {{ formatMessage(messages.decline) }}
+        </Button>
+        <Button class="wide-button" color="primary" large :action="onAuthorize" :disabled="pending">
+          <CheckIcon />
+          {{ formatMessage(messages.authorize) }}
+        </Button>
+      </div>
+      <div class="redirection-notice">
+        <p class="redirect-instructions">
+          <IntlFormatted :message-id="messages.redirectUrl" :values="{ url: redirectUri }">
+            <template #redirect-url="{ children }">
+              <span class="redirect-url">
+                <component :is="() => normalizeChildren(children)" />
+              </span>
+            </template>
+          </IntlFormatted>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Button, Avatar } from '@modrinth/ui'
+import { XIcon, CheckIcon } from '@modrinth/assets'
+import { useBaseFetch } from '@/composables/fetch.js'
+import { useAuth } from '@/composables/auth.js'
+
+import { useScopes } from '@/composables/auth/scopes.ts'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  appInfo: {
+    id: 'auth.authorize.app-info',
+    defaultMessage:
+      '<strong>{appName}</strong> by <creator-link>{creator}</creator-link> will be able to:',
+  },
+  authorize: {
+    id: 'auth.authorize.action.authorize',
+    defaultMessage: 'Authorize',
+  },
+  decline: {
+    id: 'auth.authorize.action.decline',
+    defaultMessage: 'Decline',
+  },
+  noRedirectUrlError: {
+    id: 'auth.authorize.error.no-redirect-url',
+    defaultMessage: 'No redirect location found in response',
+  },
+  redirectUrl: {
+    id: 'auth.authorize.redirect-url',
+    defaultMessage: 'You will be redirected to <redirect-url>{url}</redirect-url>',
+  },
+  title: {
+    id: 'auth.authorize.authorize-app-name',
+    defaultMessage: 'Authorize {appName}',
+  },
+})
+
+const data = useNuxtApp()
+
+const router = useNativeRoute()
+const auth = await useAuth()
+const { scopesToDefinitions } = useScopes()
+
+const clientId = router.query?.client_id || false
+const redirectUri = router.query?.redirect_uri || false
+const scope = router.query?.scope || false
+const state = router.query?.state || false
+
+const getFlowIdAuthorization = async () => {
+  const query = {
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    scope,
+  }
+  if (state) {
+    query.state = state
+  }
+
+  const authorization = await useBaseFetch('oauth/authorize', {
+    method: 'GET',
+    internal: true,
+    query,
+  }) // This will contain the flow_id and oauth_client_id for accepting the oauth on behalf of the user
+
+  if (typeof authorization === 'string') {
+    await navigateTo(authorization, {
+      external: true,
+    })
+  }
+
+  return authorization
+}
+
+const {
+  data: authorizationData,
+  pending,
+  error,
+} = await useAsyncData('authorization', getFlowIdAuthorization)
+
+const { data: app } = await useAsyncData('oauth/app/' + clientId, () =>
+  useBaseFetch('oauth/app/' + clientId, {
+    method: 'GET',
+    internal: true,
+  })
+)
+
+const scopeDefinitions = scopesToDefinitions(BigInt(authorizationData.value?.requested_scopes || 0))
+
+const { data: createdBy } = await useAsyncData('user/' + app.value.created_by, () =>
+  useBaseFetch('user/' + app.value.created_by, {
+    method: 'GET',
+    apiVersion: 3,
+  })
+)
+
+const onAuthorize = async () => {
+  try {
+    const res = await useBaseFetch('oauth/accept', {
+      method: 'POST',
+      internal: true,
+      body: {
+        flow: authorizationData.value.flow_id,
+      },
+    })
+
+    if (typeof res === 'string') {
+      navigateTo(res, {
+        external: true,
+      })
+      return
+    }
+
+    throw new Error(formatMessage(messages.noRedirectUrlError))
+  } catch (error) {
+    data.$notify({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+}
+
+const onReject = async () => {
+  try {
+    const res = await useBaseFetch('oauth/reject', {
+      method: 'POST',
+      body: {
+        flow: authorizationData.value.flow_id,
+      },
+    })
+
+    if (typeof res === 'string') {
+      navigateTo(res, {
+        external: true,
+      })
+      return
+    }
+
+    throw new Error(formatMessage(messages.noRedirectUrlError))
+  } catch (error) {
+    data.$notify({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+}
+
+definePageMeta({
+  middleware: 'auth',
+})
+</script>
+
+<style scoped lang="scss">
+.oauth-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xl);
+}
+
+.scope-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.scope-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.scope-icon {
+  display: flex;
+
+  color: var(--color-raised-bg);
+  background-color: var(--color-green);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  padding: var(--gap-xs);
+}
+.title {
+  margin-inline: auto;
+
+  h1 {
+    margin-bottom: 0 !important;
+  }
+}
+.redirection-notice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  text-align: center;
+
+  .redirect-instructions {
+    font-size: var(--font-size-sm);
+  }
+
+  .redirect-url {
+    font-weight: bold;
+  }
+}
+
+.wide-button {
+  width: 100% !important;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
+  justify-content: center;
+}
+.auth-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.scope-heading {
+  margin-bottom: var(--gap-sm);
+}
+
+.profile-pics {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+
+  .connection-indicator {
+    // Make sure the text sits in the middle and is centered.
+    // Make the text large, and make sure it's not selectable.
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    user-select: none;
+
+    color: var(--color-primary);
+  }
+}
+
+.profile-pic {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 50%;
+  margin: 0 1rem;
+}
+
+.dotted-border-line {
+  width: 75%;
+  border: 0.1rem dashed var(--color-divider);
+}
+
+.connected-items {
+  // Display dotted-border-line under profile-pics and centered behind them
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  margin-top: 1rem;
+
+  // Display profile-pics on top of dotted-border-line
+  .profile-pics {
+    position: relative;
+    z-index: 2;
+  }
+
+  // Display dotted-border-line behind profile-pics
+  .dotted-border-line {
+    position: absolute;
+    z-index: 1;
+  }
+}
+</style>

apps/frontend/src/pages/auth/reset-password.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <h1>{{ formatMessage(messages.longTitle) }}</h1>
+    <section class="auth-form">
+      <template v-if="step === 'choose_method'">
+        <p>
+          {{ formatMessage(methodChoiceMessages.description) }}
+        </p>
+
+        <div class="iconified-input">
+          <label for="email" hidden>
+            {{ formatMessage(methodChoiceMessages.emailUsernameLabel) }}
+          </label>
+          <MailIcon />
+          <input
+            id="email"
+            v-model="email"
+            type="text"
+            autocomplete="username"
+            class="auth-form__input"
+            :placeholder="formatMessage(methodChoiceMessages.emailUsernamePlaceholder)"
+          />
+        </div>
+
+        <NuxtTurnstile
+          ref="turnstile"
+          v-model="token"
+          class="turnstile"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        />
+
+        <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
+          <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+        </button>
+      </template>
+      <template v-else-if="step === 'passed_challenge'">
+        <p>{{ formatMessage(postChallengeMessages.description) }}</p>
+
+        <div class="iconified-input">
+          <label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+          <KeyIcon />
+          <input
+            id="password"
+            v-model="newPassword"
+            type="password"
+            autocomplete="new-password"
+            class="auth-form__input"
+            :placeholder="formatMessage(commonMessages.passwordLabel)"
+          />
+        </div>
+
+        <div class="iconified-input">
+          <label for="confirm-password" hidden>
+            {{ formatMessage(commonMessages.passwordLabel) }}
+          </label>
+          <KeyIcon />
+          <input
+            id="confirm-password"
+            v-model="confirmNewPassword"
+            type="password"
+            autocomplete="new-password"
+            class="auth-form__input"
+            :placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
+          />
+        </div>
+
+        <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
+          {{ formatMessage(postChallengeMessages.action) }}
+        </button>
+      </template>
+    </section>
+  </div>
+</template>
+<script setup>
+import { SendIcon, MailIcon, KeyIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const methodChoiceMessages = defineMessages({
+  description: {
+    id: 'auth.reset-password.method-choice.description',
+    defaultMessage:
+      "Enter your email below and we'll send a recovery link to allow you to recover your account.",
+  },
+  emailUsernameLabel: {
+    id: 'auth.reset-password.method-choice.email-username.label',
+    defaultMessage: 'Email or username',
+  },
+  emailUsernamePlaceholder: {
+    id: 'auth.reset-password.method-choice.email-username.placeholder',
+    defaultMessage: 'Email',
+  },
+  action: {
+    id: 'auth.reset-password.method-choice.action',
+    defaultMessage: 'Send recovery email',
+  },
+})
+
+const postChallengeMessages = defineMessages({
+  description: {
+    id: 'auth.reset-password.post-challenge.description',
+    defaultMessage: 'Enter your new password below to gain access to your account.',
+  },
+  confirmPasswordLabel: {
+    id: 'auth.reset-password.post-challenge.confirm-password.label',
+    defaultMessage: 'Confirm password',
+  },
+  action: {
+    id: 'auth.reset-password.post-challenge.action',
+    defaultMessage: 'Reset password',
+  },
+})
+
+// NOTE(Brawaru): Vite uses esbuild for minification so can't combine these
+// because it'll keep the original prop names compared to consts, which names
+// will be mangled.
+const emailSentNotificationMessages = defineMessages({
+  title: {
+    id: 'auth.reset-password.notification.email-sent.title',
+    defaultMessage: 'Email sent',
+  },
+  text: {
+    id: 'auth.reset-password.notification.email-sent.text',
+    defaultMessage:
+      'An email with instructions has been sent to you if the email was previously saved on your account.',
+  },
+})
+
+const passwordResetNotificationMessages = defineMessages({
+  title: {
+    id: 'auth.reset-password.notification.password-reset.title',
+    defaultMessage: 'Password successfully reset',
+  },
+  text: {
+    id: 'auth.reset-password.notification.password-reset.text',
+    defaultMessage: 'You can now log-in into your account with your new password.',
+  },
+})
+
+const messages = defineMessages({
+  title: {
+    id: 'auth.reset-password.title',
+    defaultMessage: 'Reset Password',
+  },
+  longTitle: {
+    id: 'auth.reset-password.title.long',
+    defaultMessage: 'Reset your password',
+  },
+})
+
+useHead({
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
+})
+
+const auth = await useAuth()
+if (auth.value.user) {
+  await navigateTo('/dashboard')
+}
+
+const route = useNativeRoute()
+
+const step = ref('choose_method')
+
+if (route.query.flow) {
+  step.value = 'passed_challenge'
+}
+
+const turnstile = ref()
+
+const email = ref('')
+const token = ref('')
+
+async function recovery() {
+  startLoading()
+  try {
+    await useBaseFetch('auth/password/reset', {
+      method: 'POST',
+      body: {
+        username: email.value,
+        challenge: token.value,
+      },
+    })
+
+    addNotification({
+      group: 'main',
+      title: formatMessage(emailSentNotificationMessages.title),
+      text: formatMessage(emailSentNotificationMessages.text),
+      type: 'success',
+    })
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+
+const newPassword = ref('')
+const confirmNewPassword = ref('')
+
+async function changePassword() {
+  startLoading()
+  try {
+    await useBaseFetch('auth/password', {
+      method: 'PATCH',
+      body: {
+        new_password: newPassword.value,
+        flow: route.query.flow,
+      },
+    })
+
+    addNotification({
+      group: 'main',
+      title: formatMessage(passwordResetNotificationMessages.title),
+      text: formatMessage(passwordResetNotificationMessages.text),
+      type: 'success',
+    })
+    await navigateTo('/auth/sign-in')
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+</script>

apps/frontend/src/pages/auth/sign-in.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <template v-if="flow">
+      <label for="two-factor-code">
+        <span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
+        <span class="label__description">
+          {{ formatMessage(messages.twoFactorCodeLabelDescription) }}
+        </span>
+      </label>
+      <input
+        id="two-factor-code"
+        v-model="twoFactorCode"
+        maxlength="11"
+        type="text"
+        :placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
+        autocomplete="one-time-code"
+        autofocus
+        @keyup.enter="begin2FASignIn"
+      />
+
+      <button class="btn btn-primary continue-btn" @click="begin2FASignIn">
+        {{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+      </button>
+    </template>
+    <template v-else>
+      <h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
+
+      <section class="third-party">
+        <a class="btn" :href="getAuthUrl('discord', redirectTarget)">
+          <SSODiscordIcon />
+          <span>Discord</span>
+        </a>
+        <a class="btn" :href="getAuthUrl('github', redirectTarget)">
+          <SSOGitHubIcon />
+          <span>GitHub</span>
+        </a>
+        <a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
+          <SSOMicrosoftIcon />
+          <span>Microsoft</span>
+        </a>
+        <a class="btn" :href="getAuthUrl('google', redirectTarget)">
+          <SSOGoogleIcon />
+          <span>Google</span>
+        </a>
+        <a class="btn" :href="getAuthUrl('steam', redirectTarget)">
+          <SSOSteamIcon />
+          <span>Steam</span>
+        </a>
+        <a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
+          <SSOGitLabIcon />
+          <span>GitLab</span>
+        </a>
+      </section>
+
+      <h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
+
+      <section class="auth-form">
+        <div class="iconified-input">
+          <label for="email" hidden>{{ formatMessage(messages.emailUsernameLabel) }}</label>
+          <MailIcon />
+          <input
+            id="email"
+            v-model="email"
+            type="text"
+            autocomplete="username"
+            class="auth-form__input"
+            :placeholder="formatMessage(messages.emailUsernameLabel)"
+          />
+        </div>
+
+        <div class="iconified-input">
+          <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
+          <KeyIcon />
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            autocomplete="current-password"
+            class="auth-form__input"
+            :placeholder="formatMessage(messages.passwordLabel)"
+          />
+        </div>
+
+        <NuxtTurnstile
+          ref="turnstile"
+          v-model="token"
+          class="turnstile"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        />
+
+        <button
+          class="btn btn-primary continue-btn centered-btn"
+          :disabled="!token"
+          @click="beginPasswordSignIn()"
+        >
+          {{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+        </button>
+
+        <div class="auth-form__additional-options">
+          <IntlFormatted :message-id="messages.additionalOptionsLabel">
+            <template #forgot-password-link="{ children }">
+              <NuxtLink class="text-link" to="/auth/reset-password">
+                <component :is="() => children" />
+              </NuxtLink>
+            </template>
+            <template #create-account-link="{ children }">
+              <NuxtLink class="text-link" :to="signUpLink">
+                <component :is="() => children" />
+              </NuxtLink>
+            </template>
+          </IntlFormatted>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import {
+  RightArrowIcon,
+  SSOGitHubIcon,
+  SSOMicrosoftIcon,
+  SSOSteamIcon,
+  SSOGoogleIcon,
+  SSODiscordIcon,
+  SSOGitLabIcon,
+  KeyIcon,
+  MailIcon,
+} from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  additionalOptionsLabel: {
+    id: 'auth.sign-in.additional-options',
+    defaultMessage:
+      '<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
+  },
+  emailUsernameLabel: {
+    id: 'auth.sign-in.email-username.label',
+    defaultMessage: 'Email or username',
+  },
+  passwordLabel: {
+    id: 'auth.sign-in.password.label',
+    defaultMessage: 'Password',
+  },
+  signInWithLabel: {
+    id: 'auth.sign-in.sign-in-with',
+    defaultMessage: 'Sign in with',
+  },
+  signInTitle: {
+    id: 'auth.sign-in.title',
+    defaultMessage: 'Sign In',
+  },
+  twoFactorCodeInputPlaceholder: {
+    id: 'auth.sign-in.2fa.placeholder',
+    defaultMessage: 'Enter code...',
+  },
+  twoFactorCodeLabel: {
+    id: 'auth.sign-in.2fa.label',
+    defaultMessage: 'Enter two-factor code',
+  },
+  twoFactorCodeLabelDescription: {
+    id: 'auth.sign-in.2fa.description',
+    defaultMessage: 'Please enter a two-factor code to proceed.',
+  },
+  usePasswordLabel: {
+    id: 'auth.sign-in.use-password',
+    defaultMessage: 'Or use a password',
+  },
+})
+
+useHead({
+  title() {
+    return `${formatMessage(messages.signInTitle)} - Modrinth`
+  },
+})
+
+const auth = await useAuth()
+const route = useNativeRoute()
+
+const redirectTarget = route.query.redirect || ''
+
+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 finishSignIn()
+}
+
+if (auth.value.user) {
+  await finishSignIn()
+}
+
+const turnstile = ref()
+
+const email = ref('')
+const password = ref('')
+const token = ref('')
+
+const flow = ref(route.query.flow)
+
+const signUpLink = computed(
+  () => `/auth/sign-up${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
+)
+
+async function beginPasswordSignIn() {
+  startLoading()
+  try {
+    const res = await useBaseFetch('auth/login', {
+      method: 'POST',
+      body: {
+        username: email.value,
+        password: password.value,
+        challenge: token.value,
+      },
+    })
+
+    if (res.flow) {
+      flow.value = res.flow
+    } else {
+      await finishSignIn(res.session)
+    }
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+
+const twoFactorCode = ref(null)
+async function begin2FASignIn() {
+  startLoading()
+  try {
+    const res = await useBaseFetch('auth/login/2fa', {
+      method: 'POST',
+      body: {
+        flow: flow.value,
+        code: twoFactorCode.value ? twoFactorCode.value.toString() : twoFactorCode.value,
+      },
+    })
+
+    await finishSignIn(res.session)
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+
+async function finishSignIn(token) {
+  if (token) {
+    await useAuth(token)
+    await useUser()
+  }
+
+  if (route.query.redirect) {
+    const redirect = decodeURIComponent(route.query.redirect)
+    await navigateTo(redirect, {
+      replace: true,
+    })
+  } else {
+    await navigateTo('/dashboard')
+  }
+}
+</script>

apps/frontend/src/pages/auth/sign-up.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <h1>{{ formatMessage(messages.signUpWithTitle) }}</h1>
+
+    <section class="third-party">
+      <a class="btn discord-btn" :href="getAuthUrl('discord', redirectTarget)">
+        <SSODiscordIcon />
+        <span>Discord</span>
+      </a>
+      <a class="btn" :href="getAuthUrl('github', redirectTarget)">
+        <SSOGitHubIcon />
+        <span>GitHub</span>
+      </a>
+      <a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
+        <SSOMicrosoftIcon />
+        <span>Microsoft</span>
+      </a>
+      <a class="btn" :href="getAuthUrl('google', redirectTarget)">
+        <SSOGoogleIcon />
+        <span>Google</span>
+      </a>
+      <a class="btn" :href="getAuthUrl('steam', redirectTarget)">
+        <SSOSteamIcon />
+        <span>Steam</span>
+      </a>
+      <a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
+        <SSOGitLabIcon />
+        <span>GitLab</span>
+      </a>
+    </section>
+
+    <h1>{{ formatMessage(messages.createAccountTitle) }}</h1>
+
+    <section class="auth-form">
+      <div class="iconified-input">
+        <label for="email" hidden>{{ formatMessage(messages.emailLabel) }}</label>
+        <MailIcon />
+        <input
+          id="email"
+          v-model="email"
+          type="email"
+          autocomplete="username"
+          class="auth-form__input"
+          :placeholder="formatMessage(messages.emailLabel)"
+        />
+      </div>
+
+      <div class="iconified-input">
+        <label for="username" hidden>{{ formatMessage(messages.usernameLabel) }}</label>
+        <UserIcon />
+        <input
+          id="username"
+          v-model="username"
+          type="text"
+          autocomplete="username"
+          class="auth-form__input"
+          :placeholder="formatMessage(messages.usernameLabel)"
+        />
+      </div>
+
+      <div class="iconified-input">
+        <label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
+        <KeyIcon />
+        <input
+          id="password"
+          v-model="password"
+          class="auth-form__input"
+          type="password"
+          autocomplete="new-password"
+          :placeholder="formatMessage(messages.passwordLabel)"
+        />
+      </div>
+
+      <div class="iconified-input">
+        <label for="confirm-password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
+        <KeyIcon />
+        <input
+          id="confirm-password"
+          v-model="confirmPassword"
+          type="password"
+          autocomplete="new-password"
+          class="auth-form__input"
+          :placeholder="formatMessage(messages.confirmPasswordLabel)"
+        />
+      </div>
+
+      <Checkbox
+        v-model="subscribe"
+        class="subscribe-btn"
+        :label="formatMessage(messages.subscribeLabel)"
+        :description="formatMessage(messages.subscribeLabel)"
+      />
+
+      <p>
+        <IntlFormatted :message-id="messages.legalDisclaimer">
+          <template #terms-link="{ children }">
+            <NuxtLink to="/legal/terms" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+          <template #privacy-policy-link="{ children }">
+            <NuxtLink to="/legal/privacy" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+        </IntlFormatted>
+      </p>
+
+      <NuxtTurnstile
+        ref="turnstile"
+        v-model="token"
+        class="turnstile"
+        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+      />
+
+      <button
+        class="btn btn-primary continue-btn centered-btn"
+        :disabled="!token"
+        @click="createAccount"
+      >
+        {{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
+      </button>
+
+      <div class="auth-form__additional-options">
+        {{ formatMessage(messages.alreadyHaveAccountLabel) }}
+        <NuxtLink class="text-link" :to="signInLink">
+          {{ formatMessage(commonMessages.signInButton) }}
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import {
+  RightArrowIcon,
+  UserIcon,
+  SSOGitHubIcon,
+  SSOMicrosoftIcon,
+  SSOGoogleIcon,
+  SSOSteamIcon,
+  SSODiscordIcon,
+  KeyIcon,
+  MailIcon,
+  SSOGitLabIcon,
+} from '@modrinth/assets'
+import { Checkbox } from '@modrinth/ui'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'auth.sign-up.title',
+    defaultMessage: 'Sign Up',
+  },
+  signUpWithTitle: {
+    id: 'auth.sign-up.title.sign-up-with',
+    defaultMessage: 'Sign up with',
+  },
+  createAccountTitle: {
+    id: 'auth.sign-up.title.create-account',
+    defaultMessage: 'Or create an account yourself',
+  },
+  emailLabel: {
+    id: 'auth.sign-up.email.label',
+    defaultMessage: 'Email',
+  },
+  usernameLabel: {
+    id: 'auth.sign-up.label.username',
+    defaultMessage: 'Username',
+  },
+  passwordLabel: {
+    id: 'auth.sign-up.password.label',
+    defaultMessage: 'Password',
+  },
+  confirmPasswordLabel: {
+    id: 'auth.sign-up.confirm-password.label',
+    defaultMessage: 'Confirm password',
+  },
+  subscribeLabel: {
+    id: 'auth.sign-up.subscribe.label',
+    defaultMessage: 'Subscribe to updates about Modrinth',
+  },
+  legalDisclaimer: {
+    id: 'auth.sign-up.legal-dislaimer',
+    defaultMessage:
+      "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
+  },
+  createAccountButton: {
+    id: 'auth.sign-up.action.create-account',
+    defaultMessage: 'Create account',
+  },
+  alreadyHaveAccountLabel: {
+    id: 'auth.sign-up.sign-in-option.title',
+    defaultMessage: 'Already have an account?',
+  },
+})
+
+useHead({
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
+})
+
+const auth = await useAuth()
+const route = useNativeRoute()
+
+const redirectTarget = route.query.redirect
+
+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 turnstile = ref()
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const token = ref('')
+const subscribe = ref(true)
+
+const signInLink = computed(
+  () => `/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
+)
+
+async function createAccount() {
+  startLoading()
+  try {
+    if (confirmPassword.value !== password.value) {
+      addNotification({
+        group: 'main',
+        title: formatMessage(commonMessages.errorNotificationTitle),
+        text: formatMessage({
+          id: 'auth.sign-up.notification.password-mismatch.text',
+          defaultMessage: '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) {
+    addNotification({
+      group: 'main',
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+    turnstile.value?.reset()
+  }
+  stopLoading()
+}
+</script>

apps/frontend/src/pages/auth/verify-email.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <template v-if="auth.user && auth.user.email_verified && !success">
+      <h1>{{ formatMessage(alreadyVerifiedMessages.title) }}</h1>
+
+      <section class="auth-form">
+        <p>{{ formatMessage(alreadyVerifiedMessages.description) }}</p>
+
+        <NuxtLink class="btn" to="/settings/account">
+          <SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+        </NuxtLink>
+      </section>
+    </template>
+
+    <template v-else-if="success">
+      <h1>{{ formatMessage(postVerificationMessages.title) }}</h1>
+
+      <section class="auth-form">
+        <p>{{ formatMessage(postVerificationMessages.description) }}</p>
+
+        <NuxtLink v-if="auth.user" class="btn" link="/settings/account">
+          <SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+        </NuxtLink>
+        <NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
+          {{ formatMessage(messages.signIn) }} <RightArrowIcon />
+        </NuxtLink>
+      </section>
+    </template>
+
+    <template v-else>
+      <h1>{{ formatMessage(failedVerificationMessages.title) }}</h1>
+
+      <section class="auth-form">
+        <p>
+          <template v-if="auth.user">
+            {{ formatMessage(failedVerificationMessages.loggedInDescription) }}
+          </template>
+          <template v-else>
+            {{ formatMessage(failedVerificationMessages.description) }}
+          </template>
+        </p>
+
+        <button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
+          {{ formatMessage(failedVerificationMessages.action) }} <RightArrowIcon />
+        </button>
+
+        <NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
+          {{ formatMessage(messages.signIn) }} <RightArrowIcon />
+        </NuxtLink>
+      </section>
+    </template>
+  </div>
+</template>
+<script setup>
+import { SettingsIcon, RightArrowIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'auth.verify-email.title',
+    defaultMessage: 'Verify Email',
+  },
+  accountSettings: {
+    id: 'auth.verify-email.action.account-settings',
+    defaultMessage: 'Account settings',
+  },
+  signIn: {
+    id: 'auth.verify-email.action.sign-in',
+    defaultMessage: 'Sign in',
+  },
+})
+
+const alreadyVerifiedMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.already-verified.title',
+    defaultMessage: 'Email already verified',
+  },
+  description: {
+    id: 'auth.verify-email.already-verified.description',
+    defaultMessage: 'Your email is already verified!',
+  },
+})
+
+const postVerificationMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.post-verification.title',
+    defaultMessage: 'Email verification',
+  },
+  description: {
+    id: 'auth.verify-email.post-verification.description',
+    defaultMessage: 'Your email address has been successfully verified!',
+  },
+})
+
+const failedVerificationMessages = defineMessages({
+  title: {
+    id: 'auth.verify-email.failed-verification.title',
+    defaultMessage: 'Email verification failed',
+  },
+  description: {
+    id: 'auth.verify-email.failed-verification.description',
+    defaultMessage:
+      'We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in.',
+  },
+  loggedInDescription: {
+    id: 'auth.verify-email.failed-verification.description.logged-in',
+    defaultMessage:
+      'We were unable to verify your email. Try re-sending the verification email through the button below.',
+  },
+  action: {
+    id: 'auth.verify-email.failed-verification.action',
+    defaultMessage: 'Resend verification email',
+  },
+})
+
+useHead({
+  title: () => `${formatMessage(messages.title)} - Modrinth`,
+})
+
+const auth = await useAuth()
+
+const success = ref(false)
+const route = useNativeRoute()
+
+if (route.query.flow) {
+  try {
+    const emailVerified = useState('emailVerified', () => null)
+
+    if (emailVerified.value === null) {
+      await useBaseFetch('auth/email/verify', {
+        method: 'POST',
+        body: {
+          flow: route.query.flow,
+        },
+      })
+      emailVerified.value = true
+      success.value = true
+    }
+
+    if (emailVerified.value) {
+      success.value = true
+
+      if (auth.value.token) {
+        await useAuth(auth.value.token)
+      }
+    }
+  } catch (err) {
+    success.value = false
+  }
+}
+</script>

apps/frontend/src/pages/auth/welcome.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <h1>{{ formatMessage(messages.welcomeLongTitle) }}</h1>
+
+    <section class="auth-form">
+      <p>
+        {{ formatMessage(messages.welcomeDescription) }}
+      </p>
+
+      <Checkbox
+        v-model="subscribe"
+        class="subscribe-btn"
+        :label="formatMessage(messages.subscribeCheckbox)"
+        :description="formatMessage(messages.subscribeCheckbox)"
+      />
+
+      <button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
+        {{ formatMessage(commonMessages.continueButton) }} <RightArrowIcon />
+      </button>
+
+      <p>
+        <IntlFormatted :message-id="messages.tosLabel">
+          <template #terms-link="{ children }">
+            <NuxtLink to="/legal/terms" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+          <template #privacy-policy-link="{ children }">
+            <NuxtLink to="/legal/privacy" class="text-link">
+              <component :is="() => children" />
+            </NuxtLink>
+          </template>
+        </IntlFormatted>
+      </p>
+    </section>
+  </div>
+</template>
+<script setup>
+import { Checkbox } from '@modrinth/ui'
+import { RightArrowIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  subscribeCheckbox: {
+    id: 'auth.welcome.checkbox.subscribe',
+    defaultMessage: 'Subscribe to updates about Modrinth',
+  },
+  tosLabel: {
+    id: 'auth.welcome.label.tos',
+    defaultMessage:
+      "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
+  },
+  welcomeDescription: {
+    id: 'auth.welcome.description',
+    defaultMessage:
+      'Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!',
+  },
+  welcomeLongTitle: {
+    id: 'auth.welcome.long-title',
+    defaultMessage: 'Welcome to Modrinth!',
+  },
+  welcomeTitle: {
+    id: 'auth.welcome.title',
+    defaultMessage: 'Welcome',
+  },
+})
+
+useHead({
+  title: () => `${formatMessage(messages.welcomeTitle)} - Modrinth`,
+})
+
+const subscribe = ref(true)
+
+async function continueSignUp() {
+  const route = useNativeRoute()
+
+  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>