AstralRinth/apps/frontend/src/pages/admin/user_email.vue

<template>
  <div class="normal-page no-sidebar">
    <h1>User account request</h1>
    <div class="normal-page__content">
      <div class="card flex flex-col gap-3">
        <div class="flex flex-col gap-2">
          <label for="name">
            <span class="text-lg font-semibold text-contrast">
              User email
              <span class="text-brand-red">*</span>
            </span>
          </label>
          <input
            id="name"
            v-model="userEmail"
            type="email"
            maxlength="64"
            :placeholder="`Enter user email...`"
            autocomplete="off"
          />
        </div>
        <div class="flex gap-2">
          <ButtonStyled color="brand">
            <button @click="getUserFromEmail">
              <MailIcon aria-hidden="true" />
              Get user account
            </button>
          </ButtonStyled>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { MailIcon } from "@modrinth/assets";
import { ButtonStyled, injectNotificationManager } from "@modrinth/ui";

const { addNotification } = injectNotificationManager();

const userEmail = ref("");

async function getUserFromEmail() {
  startLoading();

  try {
    const result = await useBaseFetch(`user_email?email=${encodeURIComponent(userEmail.value)}`, {
      method: "GET",
      apiVersion: 3,
    });

    await navigateTo(`/user/${result.username}`);
  } catch (err) {
    console.error(err);
    addNotification({
      title: "An error occurred",
      text: err.data.description,
      type: "error",
    });
  }
  stopLoading();
}
</script>