New password tailwinded

src/components/NewPasswordForm.vue

 <template>
-  <div>
-    <v-col align="center" justify="space-around" class="mt-16">
-      <v-img
-        max-width="45%"
-        :src="require('../assets/logo3.svg')"
-        align="center"
+  <div
+      class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  >
+    <div id="logoField" class="flex justify-center m-6">
+      <img src="../assets/logo3.svg" alt="BoCo logo" />
+    </div>
+
+    <div
+        id="firstPasswordField"
+        :class="{ error: v$.user.password.$errors.length }"
+    >
+      <label
+          for="password"
+          class="block text-sm text-gray-800 dark:text-gray-200"
+      >Nytt passord</label
+      >
+      <input
+          type="password"
+          v-model="v$.user.password.$model"
+          class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
       />
-    </v-col>
+      <!-- error message -->
+      <div v-for="(error, index) of v$.user.password.$errors" :key="index">
+        <div
+            class="text-red-600 text-sm"
+            v-show="showError"
+            id="passwordErrorId"
+        >
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
 
-    <v-form ref="form" v-model="valid" lazy-validation class="mt-8">
-      <v-text-field
-        v-model="user.password"
-        :rules="[rules.required, rules.min]"
-        :type="'password'"
-        name="input-10-1"
-        label="Passord"
-        counter
-      ></v-text-field>
+    <div
+        id="secondPasswordField"
+        class="mt-4"
+        :class="{ error: v$.user.rePassword.$errors.length }"
+    >
+      <div class="flex items-center justify-between">
+        <label
+            for="rePassword"
+            class="block text-sm text-gray-800 dark:text-gray-200"
+        >Gjenta nytt passord</label
+        >
+      </div>
 
-      <v-text-field
-        v-model="user.rePassword"
-        :rules="[rules.required, rules.min, rules.passwordConfirmation]"
-        :type="'password'"
-        name="input-10-1"
-        label="Confirm Password"
-        counter
-      ></v-text-field>
+      <input
+          type="password"
+          v-model="v$.user.rePassword.$model"
+          class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+      />
+      <!-- error message -->
+      <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
+        <div
+            class="text-red-600 text-sm"
+            v-show="showError"
+            id="rePasswordErrorId"
+        >
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
 
-      <v-col justify="space-around" align="center">
-        <v-btn
-          :disabled="!valid"
-          color="success"
-          class="mb-4 mt-4"
-          width="50%"
-          height="40px"
+    <div id="buttonsField" class="mt-6">
+      <button
           @click="setNewPassword"
-        >
-          Endre passord
-        </v-btn>
-      </v-col>
-    </v-form>
+          class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
+      >
+        Endre passord
+      </button>
+    </div>
   </div>
 </template>
 
 <script>
+import useVuelidate from "@vuelidate/core";
+import { required, minLength, sameAs } from "@vuelidate/validators";
+import { doNewPassword } from "@/utils/apiutil";
+import { mapState } from "vuex";
+
 export default {
   name: "NewPasswordForm.vue",
 
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations() {
+    return {
+      user: {
+        password: {
+          required,
+          minLength: minLength(8),
+        },
+        rePassword: {
+          required,
+          minLength: minLength(8),
+          sameAs: sameAs(this.user.password),
+        },
+      },
+    };
+  },
   data() {
     return {
       user: {
@@ -54,18 +107,39 @@ export default {
         rePassword: "",
       },
 
-      valid: true,
-      rules: {
-        required: (value) => !!value || "Feltet er påkrevd",
-        min: (v) => v.length >= 8 || "Minimum 8 tegn",
-        passwordConfirmation: (v) =>
-          v === this.user.password || "Passordene må være like",
-      },
+      showError: false,
     };
   },
-
+  computed: mapState({
+    token: (state) => state.user.token,
+  }),
   methods: {
-    async setNewPassword() {},
+    async setNewPassword() {
+      this.showError = true;
+
+      this.v$.user.$touch();
+
+      if (this.v$.user.$invalid) {
+        console.log("Invalid, exiting...");
+        return;
+      }
+
+      const newPasswordInfo = {
+        token: this.token,
+        newPassword: this.password,
+      };
+
+      const newPasswordResponse = doNewPassword(newPasswordInfo);
+
+      if (newPasswordResponse.newPasswordSet === true) {
+        console.log("New password set");
+        await this.$router.push("/endre");
+      } else if (newPasswordResponse.newPasswordSet === false) {
+        console.log("Couldn't set new password");
+      } else {
+        console.log("Something went wrong");
+      }
+    },
     validate() {
       this.$refs.form.validate();
     },

src/utils/apiutil.js

@@ -71,3 +71,13 @@ export function getOwnerRating(userid) {
       console.error(error);
     });
 }
+
+export function doNewPassword() { //m
+    //add newPasswordInfo to input
+    const auth = { newPasswordSet: false };
+    //return axios
+    //.post(API_URL + "newPassword", newPasswordInfo)
+    //.then((response) => {auth.newPasswordSet = true;return auth;})
+    //.catch((error) => {console.log(error);return auth;});
+    return auth; //remove after axios is added
+}