changed all files to composition API

components/LoginForm.vue

@@ -27,7 +27,8 @@
         </label>
         <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="password-input" placeholder="*******">
-          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
+            value="Show">
         </div>
       </div>
     </div>
@@ -36,20 +37,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
 
 <script>
-
 export default {
   name: "LoginForm",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
-
-</script>
-  
+};
+</script> 
   
 
 <style scoped>