Changing from vuetify to tailwind

src/components/AddNewItem.vue

+<template>
+  <v-form ref="form" v-model="valid" lazy-validation>
+    <v-col align="center" justify="space-around">
+      <p class="text-h5 ma-5">Utleie</p>
+    </v-col>
+
+    <v-container fluid>
+      <p>Leie</p>
+      <v-radio-group
+        v-model="radios"
+        :rules="[(v) => !!v || 'Velg en utleietype']"
+        required
+      >
+        <v-radio label="Dags" value="rentForDays" v-model="radios"></v-radio>
+        <v-radio label="Time" value="rentForHours" v-model="radios"></v-radio>
+        <v-radio label="Begge" value="rentBothTypes" v-model="radios"></v-radio>
+      </v-radio-group>
+
+      <v-text-field
+        v-model="item.title"
+        :rules="titleRules"
+        label="Overskrift"
+        required
+      ></v-text-field>
+
+      <v-select
+        v-model="select"
+        :items="items"
+        label="Category"
+        :rules="[(v) => !!v || 'Kategori må velges']"
+        required
+      ></v-select>
+
+      <v-textarea
+        v-model="item.description"
+        :rules="descriptionRules"
+        label="Beskrivelse"
+      ></v-textarea>
+
+      <v-text-field
+        v-model="item.price"
+        :rules="priceRules"
+        label="Pris"
+        type="number"
+        required
+      ></v-text-field>
+
+      <v-col class="mb-5">
+        <p>Bilder</p>
+      </v-col>
+
+      <input
+        type="file"
+        ref="file"
+        style="display: none"
+        @change="previewFiles"
+        multiple
+      />
+
+      <v-btn @click="$refs.file.click()">Nytt bilde</v-btn>
+
+      <v-img
+        v-for="image in item.images"
+        :key="image"
+        :src="image"
+        width="40%"
+        height="100px"
+        class="ma-2"
+      >
+      </v-img>
+    </v-container>
+
+    <v-col align="center" justify="space-around">
+      <v-btn class="mr-4" @click="saveClicked"> Lagre </v-btn>
+    </v-col>
+  </v-form>
+</template>
+
+<script>
+export default {
+  name: "AddNewItem.vue",
+
+  data() {
+    return {
+      valid: true,
+      item: {
+        title: "",
+        description: "",
+        price: "",
+        category: "",
+        type: "",
+        images: [],
+      },
+      select: null,
+      items: ["Hage", "Kjøkken", "Musikk", "Annet"],
+      radios: null,
+
+      titleRules: [
+        (v) => !!v || "Overskrift mangler",
+        (v) =>
+          (v && v.length <= 32) || "Overskrift må være mindre enn 32 bokstaver",
+      ],
+      descriptionRules: [
+        (v) => !!v || "Beskrivelse mangler",
+        (v) =>
+          (v && v.length <= 50) ||
+          "Beskrivelse kan ikke vøre større enn 200 tegn",
+      ],
+      priceRules: [
+        (v) =>
+          !!v ||
+          "Pris mangler, skriv inn 0 hvis produktet skal leies ut gratis",
+        (v) =>
+          (v && v <= 50000) || "Du kan ikke leie ut noe for mer enn 10,000 kr",
+      ],
+      selectRules: [(v) => !!v || "Ingen kategori valgt"],
+    };
+  },
+  methods: {
+    async saveClicked() {
+      console.log("Attempting to save item");
+
+      await this.$refs.form.validate().then(
+        function (response) {
+          this.valid = response.valid;
+          console.log("valid " + this.valid);
+        }.bind(this)
+      );
+
+      if (this.valid === false) {
+        console.log("Alle felt er ikke valid");
+        this.valid = true;
+        return;
+      }
+      console.log("videre");
+
+      console.log("Type leie: " + this.item.radios);
+      console.log("Tittel: " + this.item.title);
+      console.log("Kategori: " + this.select);
+      console.log("Beskrivelse: " + this.item.description);
+      console.log("Pris: " + this.item.price);
+      console.log("bilder: " + this.item.images);
+    },
+    addNewImage: function () {},
+    previewFiles: function (event) {
+      console.log(event.target.files);
+      //this.item.images.push(event.target.files[0]);
+      this.item.images.push(URL.createObjectURL(event.target.files[0]));
+    },
+  },
+};
+</script>

src/components/ItemCard.vue

@@ -17,7 +17,6 @@
 
 <script>
 export default {
-  name: "ItemCard.vue",
   data() {
     return {
       item: {

src/components/LoginForm.vue

 <template>
-  <div>
-    <v-col
+  <!--<div>
+    <v-col align="center" justify="space-around">
+      <v-img
+        max-width="45%"
+        :src="require('../assets/logo3.svg')"
         align="center"
-        justify="space-around"
-    >
-        <v-img
-            max-width="45%"
-            :src="require('../assets/logo3.svg')"
-            align="center"
-        ></v-img>
-      </v-col>
+      ></v-img>
+    </v-col>
 
-    <v-form
-        ref="form"
-        v-model="valid"
-        lazy-validation
-    >
+    <v-form ref="form" v-model="valid" lazy-validation>
       <v-col>
         <v-text-field
-            v-model="user.email"
-            :rules="emailRules"
-            label="E-mail"
-            required
+          v-model="user.email"
+          :rules="emailRules"
+          label="E-mail"
+          required
         ></v-text-field>
       </v-col>
 
-
-      <v-col
-        align="right"
-      >
+      <v-col align="right">
         <v-text-field
-            v-model="user.password"
-            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-            :rules="[rules.required, rules.min]"
-            :type="showPassword ? 'text' : 'password'"
-            name="input-10-1"
-            label="Password"
-            counter
-            @click:append="showPassword = !showPassword"
+          v-model="user.password"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :rules="[rules.required, rules.min]"
+          :type="showPassword ? 'text' : 'password'"
+          name="input-10-1"
+          label="Password"
+          counter
+          @click:append="showPassword = !showPassword"
         ></v-text-field>
 
-        <div class="text-decoration-underline mt-n4 mr-10">
-          Glemt passord
-        </div>
+        <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
       </v-col>
 
-
-
-      <v-col
-          align="center"
-          justify="space-around"
-      >
+      <v-col align="center" justify="space-around">
         <v-btn
-            :disabled="!valid"
-            color="success"
-            class="mb-4 mt-4"
-            width="50%"
-            height="40px"
-            @click="loginClicked"
+          :disabled="!valid"
+          color="success"
+          class="mb-4 mt-4"
+          width="50%"
+          height="40px"
+          @click="loginClicked"
         >
           Logg inn
         </v-btn>
 
         <div>
-          <a
-              href="/"
-              class="text-decoration-none"
-          >Ny bruker</a>
+          <a href="/" class="text-decoration-none">Ny bruker</a>
         </div>
       </v-col>
+    </v-form>
+  </div>-->
+
+  <div class="m-6" :class="{ error: v$.user.email.$errors.length }">
+    <div class="mb-6">
+      <label
+        for="email"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >E-post</label
+      >
+      <input
+        type="email"
+        id="email"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        placeholder="eksempel@eksempel.com"
+        v-model="v$.user.email.$model"
+        required
+      />
+
+      <!-- error message -->
+      <div
+        v-for="(error, index) of v$.user.email.$errors"
+        :key="index"
+      >
+        <div class="text-red-600 text-sm" v-show="showError" id="emailErrorId">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+    <div class="mb-6" :class="{ error: v$.user.password.$errors.length }">
+      <label
+        for="password"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >Passord</label
+      >
+      <input
+        type="password"
+        id="password"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        v-model="v$.user.password.$model"
+        required
+      />
+
+      <!-- error message -->
+      <div
+        class="text-red"
+        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 class="align-items: flex-end; mb-6">
+        <div class="ml-3 text-sm">
+          <a href="/" class="text-blue-600">Glemt passord</a>
+        </div>
+      </div>
+    </div>
 
-
-    </v-form>
+    <button
+      @click="loginClicked"
+      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      :disabled="notValid"
+    >
+      Logg inn
+    </button>
   </div>
-
 </template>
 
 <script>
@@ -121,14 +164,15 @@ export default {
       },
 
       showPassword: false,
-      valid : true,
+      valid: true,
+      showError: false,
       emailRules: [
-        v => !!v || 'E-mail is required',
-        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+        (v) => !!v || "E-mail is required",
+        (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
       ],
       rules: {
-        required: value => !!value || 'Required.',
-        min: v => v.length >= 8 || 'Min 8 characters',
+        required: (value) => !!value || "Required.",
+        min: (v) => v.length >= 8 || "Min 8 characters",
       },
     };
   },
@@ -145,7 +189,7 @@ export default {
 
       if (loginResponse === "Failed login") {
         this.message = "kunne ikke logge inn";
-        this.$store.commit('logout');
+        this.$store.commit("logout");
         return;
       }
 
@@ -153,9 +197,8 @@ export default {
       console.log(loginResponse);
     },
 
-
-    validate () {
-      this.$refs.form.validate()
+    validate() {
+      this.$refs.form.validate();
     },
   },
 };

src/router/index.js

@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
 
-
 const routes = [
   {
     path: "/endre", //Endre før push
@@ -22,7 +21,17 @@ const routes = [
     path: "/login",
     name: "login",
     component: LoginView,
-  }
+  },
+  {
+    path: "/addNewItem",
+    name: "addNewItem",
+    component: () => import("../views/AddNewItemView.vue"),
+  },
+  {
+    path: "/itemCard",
+    name: "itemCard",
+    component: () => import("../views/ItemCardView.vue"),
+  },
 ];
 
 const router = createRouter({

src/views/AddNewItemView.vue

+<template>
+  <AddNewItem></AddNewItem>
+</template>
+
+<script>
+import AddNewItem from "@/components/AddNewItem";
+
+export default {
+  name: "AddNewItemView.vue",
+  components: {
+    AddNewItem,
+  },
+};
+</script>
+
+<style scoped></style>