Change editor and format with prettier

src/views/RegistroView.vue

@@ -1,43 +1,86 @@
 <template>
   <!--  https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
-  <div class="min-h-screen flex items-center justify-center w-full dark:bg-emerald-700">
-    <div class="bg-white dark:bg-emerald-200 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]">
+  <div
+    class="min-h-screen flex items-center justify-center w-full dark:bg-emerald-700"
+  >
+    <div
+      class="bg-white dark:bg-emerald-200 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]"
+    >
       <h1 class="text-2xl font-bold text-center mb-4 dark:text-gray">
         Crea una cuenta!
       </h1>
       <form action="#">
         <div class="mb-4">
-          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Correo
-            electrónico</label>
-          <input type="email" id="email" v-model="email"
+          <label
+            for="email"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Correo electrónico</label
+          >
+          <input
+            type="email"
+            id="email"
+            v-model="email"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="your@email.com" required />
+            placeholder="your@email.com"
+            required
+          />
         </div>
         <div class="mb-4">
-          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Nombre</label>
-          <input type="text" id="nombre" v-model="nombre"
+          <label
+            for="email"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Nombre</label
+          >
+          <input
+            type="text"
+            id="nombre"
+            v-model="nombre"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="Nombre completo" required />
+            placeholder="Nombre completo"
+            required
+          />
         </div>
         <div class="mb-4">
-          <label for="password"
-            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Contraseña</label>
-          <input type="password" id="password" v-model="password"
+          <label
+            for="password"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Contraseña</label
+          >
+          <input
+            type="password"
+            id="password"
+            v-model="password"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 mb-4"
-            placeholder="Enter your password" required />
-          <label for="passwordRepeat" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Repita su
-            contraseña</label>
-          <input type="password" id="passwordRepeat" v-model="passwordRepeat"
+            placeholder="Enter your password"
+            required
+          />
+          <label
+            for="passwordRepeat"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Repita su contraseña</label
+          >
+          <input
+            type="password"
+            id="passwordRepeat"
+            v-model="passwordRepeat"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="Enter your password again" required />
+            placeholder="Enter your password again"
+            required
+          />
         </div>
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center"></div>
-          <router-link to="/"
-            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Logueate</router-link>
+          <router-link
+            to="/"
+            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >Logueate</router-link
+          >
         </div>
-        <button @click="registro" type="button"
-          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <button
+          @click="registro"
+          type="button"
+          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
           Registrar
         </button>
       </form>
@@ -45,20 +88,43 @@
   </div>
   <!-- modal no se ha podido registrar -->
   <TransitionRoot appear :show="isOpenModalWrongRegister" as="template">
-    <Dialog as="div" @close="isOpenModalWrongRegister = false" class="relative z-10">
-      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
-        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+    <Dialog
+      as="div"
+      @close="isOpenModalWrongRegister = false"
+      class="relative z-10"
+    >
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
         <div class="fixed inset-0 bg-black/25" />
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center">
-          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
-            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
             <DialogPanel
-              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
-              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-red-600">
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-red-600"
+              >
                 Error
               </DialogTitle>
               <div class="mt-2">
@@ -72,9 +138,11 @@
               </div>
 
               <div class="mt-4">
-                <button type="button"
+                <button
+                  type="button"
                   class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                  @click="isOpenModalWrongRegister = false">
+                  @click="isOpenModalWrongRegister = false"
+                >
                   Aceptar
                 </button>
               </div>
@@ -87,19 +155,38 @@
   <!-- Modal de registro correcto -->
   <TransitionRoot appear :show="isOpenModalOkRegister" as="template">
     <Dialog as="div" @close="cerrarModalOkRegister" class="relative z-10">
-      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
-        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
         <div class="fixed inset-0 bg-black/25" />
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center">
-          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
-            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
             <DialogPanel
-              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
-              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-green-600">
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-green-600"
+              >
                 Aviso
               </DialogTitle>
               <div class="mt-2">
@@ -109,9 +196,11 @@
               </div>
 
               <div class="mt-4">
-                <button type="button"
+                <button
+                  type="button"
                   class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                  @click="cerrarModalOkRegister">
+                  @click="cerrarModalOkRegister"
+                >
                   Aceptar
                 </button>
               </div>
@@ -145,7 +234,7 @@ let password = ref("");
 let passwordRepeat = ref("");
 let nombre = ref("");
 let isOpenModalWrongRegister = ref(false);
-let isOpenModalOkRegister = ref(false)
+let isOpenModalOkRegister = ref(false);
 
 onMounted(() => {
   pb = new PocketBase(storeUser.urlPocketbase);
@@ -165,7 +254,7 @@ const registro = async () => {
     .create(newUser)
     .then(function (record) {
       console.log("New user created with ID: ", record.id);
-      isOpenModalOkRegister.value = true
+      isOpenModalOkRegister.value = true;
     })
     .catch(function (error) {
       isOpenModalWrongRegister.value = true;
@@ -175,10 +264,10 @@ const registro = async () => {
       nombre = ref("");
     });
 };
-const cerrarModalOkRegister = (() => {
-  console.log('cerrado modal')
-  router.push('/')
-})
+const cerrarModalOkRegister = () => {
+  console.log("cerrado modal");
+  router.push("/");
+};
 </script>
 <style>
 .ancho {