experimental vue changes

zjf19002 · Oct 23, 2023 · 6af84d6 · 6af84d6
1 parent 56d78a4
commit 6af84d6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git 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
@@ -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)