From 6af84d67f879225a0682fc3a1fc291163d90694b Mon Sep 17 00:00:00 2001
From: nic21003 <couillard@uconn.edu>
Date: Mon, 23 Oct 2023 19:13:36 -0400
Subject: [PATCH] experimental vue changes

---
 .../src/components/LoginPage.vue              | 40 +++++++++++++++++--
 class_registration_app/src/main.ts            |  6 +--
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue
index 1ea4c91..e985e08 100644
--- a/class_registration_app/src/components/LoginPage.vue
+++ b/class_registration_app/src/components/LoginPage.vue
@@ -8,15 +8,49 @@
         <p class="valid">Valid. Please wait a moment.</p>
         <p class="error">Error. Please enter correct Username &amp; password.</p>
         <form class="loginbox" autocomplete="off">
-          <input placeholder="Username" type="text" id="username"/>
-          <input placeholder="Password" type="password" id="password"/>
+          <input placeholder="Username" type="text" id="username" v-model="username" />
+          <input placeholder="Password" type="password" id="password" v-model="password"/>
       <RouterLink to="./dashboard">
-        <button  id="submit">Login</button>
+        <button @click="tryLogin" id="submit">Login</button> <!--@click="tryLogin" will be API call-->
       </RouterLink>
       </form>
       <RouterLink to="/">Back</RouterLink>
       </section>
 </template>
+
+<script>
+export default {
+    name: 'LoginPage',
+    props: {
+      msg: String
+    },
+    data() {
+      return {
+        username: '',
+        password: ''
+      };
+    },
+    methods: {
+      tryLogin() {
+        const apiUrl = `https://yqoa0pwe5b.execute-api.us-east-1.amazonaws.com/login/get-list?username=${this.username}&password=${this.password}`;
+        const res = fetch(apiUrl, {
+          method: 'POST',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type'
+          }
+        })
+        .then(response => {
+          response.json().then(res => console.log(res));
+        })
+        .catch(err => {
+          console.error(err);
+        });
+      }
+    }
+};
+</script>
     
     <style scoped>
     section {
diff --git a/class_registration_app/src/main.ts b/class_registration_app/src/main.ts
index 4b1559f..8cfdba8 100644
--- a/class_registration_app/src/main.ts
+++ b/class_registration_app/src/main.ts
@@ -6,9 +6,9 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
-import { Amplify, Auth } from "aws-amplify";
-import awsconfig from './aws-exports.js'; 
-Amplify.configure(awsconfig);
+//import { Amplify, Auth } from "aws-amplify";
+//import awsconfig from './aws-exports.js'; 
+//Amplify.configure(awsconfig);
 
 const app = createApp(App)