ResetPasswordView.vue

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import BrandBanner from '@/components/BrandBanner.vue'
import ResetPasswordForm from '@/components/forms/ResetPasswordForm.vue'
import UpdatePasswordForm from '@/components/forms/UpdatePasswordForm.vue'

const requested = ref(false)
const token = ref(null)

const route = useRoute()

onMounted(() => {
  requested.value = !!route.query?.token
  token.value = route.query?.token
})
</script>

<template>
  <div class="reset-view">
    <BrandBanner />
    <UpdatePasswordForm v-if="requested" :token="token" />
    <ResetPasswordForm v-else />
  </div>
</template>

<style scoped>
.reset-view {
  overflow-y: auto;
  margin: 0 auto;
  padding: 1em;
  width: min(100%, 35em);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  border-radius: var(--radius);
}
</style>