Update rh-test (as of 2025-10-11) (#6044)

## Summary Tested these changes and confirmed that: 1. Feedback button shows. 2. You can run workflows and switch out models. 3. You can use the mask editor. (thank you @ric-yu for helping me verify). ## Changes A lot, please see commits. Gets us up to date with `main` as of 10-11-2025. --------- Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: snomiao <snomiao@gmail.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Marwan Ahmed <155799754+marawan206@users.noreply.github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: AustinMroz <4284322+AustinMroz@users.noreply.github.com> Co-authored-by: Austin Mroz <austin@comfy.org> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Robin Huang <robin.j.huang@gmail.com>
2026-04-25 16:59:45 +00:00 · 2025-10-14 15:59:26 -07:00
parent ab312ce3d7
commit 0239a83da2
519 changed files with 22711 additions and 11532 deletions
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
-    <div class="text-2xl font-medium mb-2">
+  <div class="flex h-110 max-w-96 flex-col gap-4 p-2">
+    <div class="mb-2 text-2xl font-medium">
      {{ t('apiNodesSignInDialog.title') }}
    </div>

-    <div class="text-base mb-4">
+    <div class="mb-4 text-base">
      {{ t('apiNodesSignInDialog.message') }}
    </div>

    <ApiNodesList :node-names="apiNodeNames" />

-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
      <div class="flex gap-2">
        <Button
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
+  <section class="prompt-dialog-content m-2 mt-4 flex flex-col gap-6">
    <span>{{ message }}</span>
-    <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
+    <ul v-if="itemList?.length" class="m-0 flex flex-col gap-2 pl-4">
      <li v-for="item of itemList" :key="item">
        {{ item }}
      </li>
@@ -15,14 +15,14 @@
    >
      {{ hint }}
    </Message>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
      <div
        v-if="type === 'overwriteBlueprint'"
-        class="flex gap-4 justify-start"
+        class="flex justify-start gap-4"
      >
        <Checkbox
          v-model="doNotAskAgain"
-          class="flex gap-4 justify-start"
+          class="flex justify-start gap-4"
          input-id="doNotAskAgain"
          binary
        />
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -13,7 +13,7 @@
      <span class="font-bold">{{ error.extensionFile }}</span>
    </template>

-    <div class="flex gap-2 justify-center">
+    <div class="flex justify-center gap-2">
      <Button
        v-show="!reportOpen"
        text
@@ -29,12 +29,12 @@
    </div>
    <template v-if="reportOpen">
      <Divider />
-      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
-        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
+      <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
+        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
      </ScrollPanel>
      <Divider />
    </template>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
      <FindIssueButton
        :error-message="error.exceptionMessage"
        :repo-owner="repoOwner"
@@ -65,10 +65,8 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import {
-  type ErrorReportData,
-  generateErrorReport
-} from '@/utils/errorReportUtil'
+import { generateErrorReport } from '@/utils/errorReportUtil'
+import type { ErrorReportData } from '@/utils/errorReportUtil'

 const { error } = defineProps<{
  error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -16,7 +16,7 @@
    }"
  >
    <template #option="slotProps">
-      <div class="flex align-items-center">
+      <div class="align-items-center flex">
        <span class="node-type">{{ slotProps.option.label }}</span>
        <span v-if="slotProps.option.hint" class="node-hint">{{
          slotProps.option.hint
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -3,7 +3,7 @@
    v-if="hasMissingCoreNodes"
    severity="info"
    icon="pi pi-info-circle"
-    class="my-2 mx-2"
+    class="mx-2 my-2"
    :pt="{
      root: { class: 'flex-col' },
      text: { class: 'flex-1' }
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -5,7 +5,7 @@
    :title="t('missingModelsDialog.missingModels')"
    :message="t('missingModelsDialog.missingModelsMessage')"
  />
-  <div class="flex gap-1 mb-4">
+  <div class="mb-4 flex gap-1">
    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
    <label for="doNotAskAgain">{{
      t('missingModelsDialog.doNotAskAgain')
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 p-2 overflow-x-hidden">
+  <div class="w-96 overflow-x-hidden p-2">
    <ApiKeyForm
      v-if="showApiKeyForm"
      @back="showApiKeyForm = false"
@@ -7,11 +7,11 @@
    />
    <template v-else>
      <!-- Header -->
-      <div class="flex flex-col gap-4 mb-8">
-        <h1 class="text-2xl font-medium leading-normal my-0">
+      <div class="mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-2xl leading-normal font-medium">
          {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
        </h1>
-        <p class="text-base my-0">
+        <p class="my-0 text-base">
          <span class="text-muted">{{
            isSignIn
              ? t('auth.login.newUser')
@@ -92,17 +92,17 @@
        >
          <img
            src="/assets/images/comfy-logo-mono.svg"
-            class="w-5 h-5 mr-2"
+            class="mr-2 h-5 w-5"
            alt="Comfy"
          />
          {{ t('auth.login.useApiKey') }}
        </Button>
-        <small class="text-muted text-center">
+        <small class="text-center text-muted">
          {{ t('auth.apiKey.helpText') }}
          <a
            :href="`${COMFY_PLATFORM_BASE_URL}/login`"
            target="_blank"
-            class="text-blue-500 cursor-pointer"
+            class="cursor-pointer text-blue-500"
          >
            {{ t('auth.apiKey.generateKey') }}
          </a>
@@ -119,12 +119,12 @@
      </div>

      <!-- Terms & Contact -->
-      <p class="text-xs text-muted mt-8">
+      <p class="mt-8 text-xs text-muted">
        {{ t('auth.login.termsText') }}
        <a
          href="https://www.comfy.org/terms-of-service"
          target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
        >
          {{ t('auth.login.termsLink') }}
        </a>
@@ -132,12 +132,12 @@
        <a
          href="https://www.comfy.org/privacy"
          target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
        >
          {{ t('auth.login.privacyLink') }} </a
        >.
        {{ t('auth.login.questionsContactPrefix') }}
-        <a href="mailto:hello@comfy.org" class="text-blue-500 cursor-pointer">
+        <a href="mailto:hello@comfy.org" class="cursor-pointer text-blue-500">
          hello@comfy.org</a
        >.
      </p>
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col w-96 p-2 gap-10">
+  <div class="flex w-96 flex-col gap-10 p-2">
    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
        {{ $t('credits.topUp.insufficientTitle') }}
      </h1>
-      <p class="text-base my-0">
+      <p class="my-0 text-base">
        {{ $t('credits.topUp.insufficientMessage') }}
      </p>
    </div>

    <!-- Balance Section -->
-    <div class="flex justify-between items-center">
-      <div class="flex flex-col gap-2 w-full">
-        <div class="text-muted text-base">
+    <div class="flex items-center justify-between">
+      <div class="flex w-full flex-col gap-2">
+        <div class="text-base text-muted">
          {{ $t('credits.yourCreditBalance') }}
        </div>
-        <div class="flex items-center justify-between w-full">
+        <div class="flex w-full items-center justify-between">
          <UserCredit text-class="text-2xl" />
          <Button
            outlined
@@ -30,7 +30,7 @@

    <!-- Amount Input Section -->
    <div class="flex flex-col gap-2">
-      <span class="text-muted text-sm"
+      <span class="text-sm text-muted"
        >{{ $t('credits.topUp.quickPurchase') }}:</span
      >
      <div class="grid grid-cols-[2fr_1fr] gap-2">
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -1,6 +1,6 @@
 <template>
  <Form
-    class="flex flex-col gap-6 w-96"
+    class="flex w-96 flex-col gap-6"
    :resolver="zodResolver(updatePasswordSchema)"
    @submit="onSubmit"
  >
@@ -10,7 +10,7 @@
    <Button
      type="submit"
      :label="$t('userSettings.updatePassword')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
      :loading="loading"
    />
  </Form>
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -4,7 +4,7 @@
      severity="secondary"
      icon="pi pi-dollar"
      rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
    />
    <InputNumber
      v-if="editable"
@@ -21,7 +21,7 @@
    />
    <span v-else class="text-xl">{{ amount }}</span>
  </div>
-  <ProgressSpinner v-if="loading" class="w-8 h-8" />
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
  <Button
    v-else
    :severity="preselected ? 'primary' : 'secondary'"
@@ -33,9 +33,10 @@

 <script setup lang="ts">
 import Button from 'primevue/button'
-import InputNumber, {
-  type InputNumberBlurEvent,
-  type InputNumberInputEvent
+import InputNumber from 'primevue/inputnumber'
+import type {
+  InputNumberBlurEvent,
+  InputNumberInputEvent
 } from 'primevue/inputnumber'
 import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -1,6 +1,6 @@
 <template>
  <PanelTemplate value="About" class="about-container">
-    <h2 class="text-2xl font-bold mb-2">
+    <h2 class="mb-2 text-2xl font-bold">
      {{ $t('g.about') }}
    </h2>
    <div class="space-y-2">
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -1,7 +1,7 @@
 <template>
  <TabPanel value="Credits" class="credits-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">
        {{ $t('credits.credits') }}
      </h2>

@@ -11,7 +11,7 @@
        <h3 class="text-sm font-medium text-muted">
          {{ $t('credits.yourCreditBalance') }}
        </h3>
-        <div class="flex justify-between items-center">
+        <div class="flex items-center justify-between">
          <UserCredit text-class="text-3xl font-bold" />
          <Skeleton v-if="loading" width="2rem" height="2rem" />
          <Button
@@ -41,7 +41,7 @@
        </div>
      </div>

-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
        <h3>{{ $t('credits.activity') }}</h3>
        <Button
          :label="$t('credits.invoiceHistory')"
@@ -66,7 +66,7 @@
              <template #body="{ data }">
                <div
                  :class="[
-                    'text-base font-medium text-center',
+                    'text-center text-base font-medium',
                    data.isPositive ? 'text-sky-500' : 'text-red-400'
                  ]"
                >
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -51,10 +51,7 @@
        class="max-w-64 2xl:max-w-full"
      >
        <template #body="slotProps">
-          <div
-            class="overflow-hidden text-ellipsis whitespace-nowrap"
-            :title="slotProps.data.id"
-          >
+          <div class="truncate" :title="slotProps.data.id">
            {{ slotProps.data.label }}
          </div>
        </template>
--- a/src/components/dialog/content/setting/PanelTemplate.vue
+++ b/src/components/dialog/content/setting/PanelTemplate.vue
@@ -1,8 +1,8 @@
 <template>
  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
-    <div class="flex flex-col h-full w-full gap-2">
+    <div class="flex h-full w-full flex-col gap-2">
      <slot name="header" />
-      <ScrollPanel class="grow h-0 pr-2">
+      <ScrollPanel class="h-0 grow pr-2">
        <slot />
      </ScrollPanel>
      <slot name="footer" />
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -30,7 +30,7 @@
          <div class="event-details">
            <!-- Credits Added -->
            <template v-if="data.event_type === EventType.CREDIT_ADDED">
-              <div class="text-green-500 font-semibold">
+              <div class="font-semibold text-green-500">
                {{ $t('credits.added') }} ${{
                  customerEventService.formatAmount(data.params?.amount)
                }}
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -1,7 +1,7 @@
 <template>
  <TabPanel value="User" class="user-settings-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
      <Divider class="mb-3" />

      <!-- Normal User Panel -->
@@ -35,7 +35,7 @@
          <h3 class="font-medium">
            {{ $t('userSettings.provider') }}
          </h3>
-          <div class="text-muted flex items-center gap-1">
+          <div class="flex items-center gap-1 text-muted">
            <i :class="providerIcon" />
            {{ providerName }}
            <Button
@@ -54,7 +54,7 @@

        <ProgressSpinner
          v-if="loading"
-          class="w-8 h-8 mt-4"
+          class="mt-4 h-8 w-8"
          style="--pc-spinner-color: #000"
        />
        <div v-else class="mt-4 flex flex-col gap-2">
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="flex flex-col gap-6">
-    <div class="flex flex-col gap-4 mb-8">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+    <div class="mb-8 flex flex-col gap-4">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
        {{ t('auth.apiKey.title') }}
      </h1>
      <div class="flex flex-col gap-2">
-        <p class="text-base my-0 text-muted">
+        <p class="my-0 text-base text-muted">
          {{ t('auth.apiKey.description') }}
        </p>
        <a
          href="https://docs.comfy.org/interface/user#logging-in-with-an-api-key"
          target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
        >
          {{ t('g.learnMore') }}
        </a>
@@ -30,7 +30,7 @@

      <div class="flex flex-col gap-2">
        <label
-          class="opacity-80 text-base font-medium mb-2"
+          class="mb-2 text-base font-medium opacity-80"
          for="comfy-org-api-key"
        >
          {{ t('auth.apiKey.label') }}
@@ -50,7 +50,7 @@
            <a
              :href="`${COMFY_PLATFORM_BASE_URL}/login`"
              target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
            >
              {{ t('auth.apiKey.generateKey') }}
            </a>
@@ -58,7 +58,7 @@
            <a
              href="https://docs.comfy.org/tutorials/api-nodes/overview#log-in-with-api-key-on-non-whitelisted-websites"
              target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
            >
              {{ t('auth.apiKey.whitelistInfo') }}
            </a>
@@ -66,7 +66,7 @@
        </div>
      </div>

-      <div class="flex justify-between items-center mt-4">
+      <div class="mt-4 flex items-center justify-between">
        <Button type="button" link @click="$emit('back')">
          {{ t('g.back') }}
        </Button>
--- a/src/components/dialog/content/signin/PasswordFields.vue
+++ b/src/components/dialog/content/signin/PasswordFields.vue
@@ -1,9 +1,9 @@
 <template>
  <!-- Password Field -->
  <FormField v-slot="$field" name="password" class="flex flex-col gap-2">
-    <div class="flex justify-between items-center mb-2">
+    <div class="mb-2 flex items-center justify-between">
      <label
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
        for="comfy-org-sign-up-password"
      >
        {{ t('auth.signup.passwordLabel') }}
@@ -68,7 +68,7 @@
  <!-- Confirm Password Field -->
  <FormField v-slot="$field" name="confirmPassword" class="flex flex-col gap-2">
    <label
-      class="opacity-80 text-base font-medium mb-2"
+      class="mb-2 text-base font-medium opacity-80"
      for="comfy-org-sign-up-confirm-password"
    >
      {{ t('auth.login.confirmPasswordLabel') }}
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -7,7 +7,7 @@
  >
    <!-- Email Field -->
    <div class="flex flex-col gap-2">
-      <label class="opacity-80 text-base font-medium mb-2" :for="emailInputId">
+      <label class="mb-2 text-base font-medium opacity-80" :for="emailInputId">
        {{ t('auth.login.emailLabel') }}
      </label>
      <InputText
@@ -26,15 +26,15 @@

    <!-- Password Field -->
    <div class="flex flex-col gap-2">
-      <div class="flex justify-between items-center mb-2">
+      <div class="mb-2 flex items-center justify-between">
        <label
-          class="opacity-80 text-base font-medium"
+          class="text-base font-medium opacity-80"
          for="comfy-org-sign-in-password"
        >
          {{ t('auth.login.passwordLabel') }}
        </label>
        <span
-          class="text-muted text-base font-medium cursor-pointer select-none"
+          class="cursor-pointer text-base font-medium text-muted select-none"
          :class="{
            'text-link-disabled': !$form.email?.value || $form.email?.invalid
          }"
@@ -65,12 +65,12 @@
    </Message>

    <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="w-8 h-8" />
+    <ProgressSpinner v-if="loading" class="h-8 w-8" />
    <Button
      v-else
      type="submit"
      :label="t('auth.login.loginButton')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
    />
  </Form>
 </template>
@@ -89,7 +89,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { type SignInData, signInSchema } from '@/schemas/signInSchema'
+import { signInSchema } from '@/schemas/signInSchema'
+import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'

 const authStore = useFirebaseAuthStore()
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -7,7 +7,7 @@
    <!-- Email Field -->
    <FormField v-slot="$field" name="email" class="flex flex-col gap-2">
      <label
-        class="opacity-80 text-base font-medium mb-2"
+        class="mb-2 text-base font-medium opacity-80"
        for="comfy-org-sign-up-email"
      >
        {{ t('auth.signup.emailLabel') }}
@@ -40,11 +40,11 @@
      />
      <label
        for="comfy-org-sign-up-personal-data-consent"
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
      >
        {{ t('auth.signup.personalDataConsentLabel') }}
      </label>
-      <small v-if="$field.error" class="text-red-500 mt-4">{{
+      <small v-if="$field.error" class="-mt-4 text-red-500">{{
        $field.error.message
      }}</small>
    </FormField>
@@ -58,7 +58,7 @@
    <Button
      type="submit"
      :label="t('auth.signup.signUpButton')"
-      class="h-10 font-medium mt-4 text-white"
+      class="mt-4 h-10 font-medium"
    />
  </Form>
 </template>
@@ -73,7 +73,8 @@ import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { useI18n } from 'vue-i18n'

-import { type SignUpData, signUpSchema } from '@/schemas/signInSchema'
+import { signUpSchema } from '@/schemas/signInSchema'
+import type { SignUpData } from '@/schemas/signInSchema'

 import PasswordFields from './PasswordFields.vue'