From e180f67c74f0f406254070644d20b0ba84b1420c Mon Sep 17 00:00:00 2001
From: Jack Psaras <jack.psaras@uconn.edu>
Date: Tue, 24 Oct 2023 18:35:25 -0400
Subject: [PATCH] made api,lamba func, and connect to create an account page

---
 lambdafuncs/lambdafunc_signup.py |  47 ++++++++++
 src/components/AppHeader.vue     |   5 +-
 src/router/index.js              |  10 +-
 src/views/FetchView.vue          | 151 -------------------------------
 src/views/LoginPage.vue          |  74 +++++++++++++++
 src/views/SignUp.vue             |  97 ++++++++++++++++++++
 6 files changed, 230 insertions(+), 154 deletions(-)
 create mode 100644 lambdafuncs/lambdafunc_signup.py
 delete mode 100644 src/views/FetchView.vue
 create mode 100644 src/views/LoginPage.vue
 create mode 100644 src/views/SignUp.vue

diff --git a/lambdafuncs/lambdafunc_signup.py b/lambdafuncs/lambdafunc_signup.py
new file mode 100644
index 0000000..214fbdb
--- /dev/null
+++ b/lambdafuncs/lambdafunc_signup.py
@@ -0,0 +1,47 @@
+import json
+import boto3
+
+# Initialize the DynamoDB client
+dynamodb = boto3.client('dynamodb')
+
+# DynamoDB table name
+table_name = 'sign_up_DB'  # Replace with your DynamoDB table name
+
+def lambda_handler(event, context):
+    # Extract the JSON data from the POST request
+    try:
+        user_data = event
+    except Exception as e:
+        return {
+            'statusCode': 400,
+            'body': json.dumps({'error': 'Invalid JSON format in the request body'})
+        }
+
+    # Check if the required fields are present in the request
+    if 'username' not in user_data or 'password' not in user_data:
+        return {
+            'statusCode': 401,
+            'body': json.dumps({'error': 'Required fields are missing in the request body'})
+        }
+
+    # Create an item for the DynamoDB table
+    item = {
+        'username': {'S': user_data['username']},
+        'password': {'S': user_data['password']}
+    }
+
+    # Put the item into the DynamoDB table
+    try:
+        dynamodb.put_item(
+            TableName=table_name,
+            Item=item
+        )
+        return {
+            'statusCode': 200,
+            'body': json.dumps({'message': 'User added successfully'})
+        }
+    except Exception as e:
+        return {
+            'statusCode': 500,
+            'body': json.dumps({'error': str(e)})
+        }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index be86932..92942b2 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -8,7 +8,7 @@
             <RouterLink to="/">Home</RouterLink>
           </li>
           <li>
-            <RouterLink to="/fetch">Fetch Example</RouterLink>
+            <RouterLink to="/fetch">Create an Account</RouterLink>
           </li>
           <li>
             <!--
@@ -20,6 +20,9 @@
           <li>
             <RouterLink to="/admin/createcourse">Create Course</RouterLink>
           </li>
+          <li>
+            <RouterLink to="/login">Login</RouterLink>
+          </li>
         </ul>
       </nav>
     </div>
diff --git a/src/router/index.js b/src/router/index.js
index 9b37944..1163d41 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,8 +4,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import FormView from "../views/FormView.vue";
-import FetchView from "../views/FetchView.vue";
 import AdminCreateCourseView from "../views/AdminCreateCourseView.vue";
+import LoginPage from "../views/LoginPage.vue";
+import SignUp from "../views/SignUp.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -34,13 +35,18 @@ const router = createRouter({
     {
       path: "/fetch",
       name: "fetch",
-      component: FetchView,
+      component: SignUp,
     },
     {
       path: "/admin/createcourse",
       name: "admincreatecourse",
       component: AdminCreateCourseView,
     },
+    {
+      path: "/login",
+      name: "Login",
+      component: LoginPage,
+    },
   ],
 });
 
diff --git a/src/views/FetchView.vue b/src/views/FetchView.vue
deleted file mode 100644
index 407c86f..0000000
--- a/src/views/FetchView.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <main class="fetch">
-    <h2>Fetch Example</h2>
-    <p>
-      Below we have a table of historical data on
-      <a
-        href="https://fiscaldata.treasury.gov/datasets/record-setting-auction-data/record-setting-auction"
-        >record setting auctions of different financial security types</a
-      >. This dataset was chosen for its digestible size, and the fact that the
-      API was completely free to use without any restrictions (making it good
-      for this sort of demonstration).
-    </p>
-    <label>
-      Security Type:
-      <select name="type" id="type" v-model="selectedSecurityType">
-        <option
-          v-for="securityType in securityTypes"
-          :key="securityType"
-          :value="securityType"
-        >
-          {{ securityType }}
-        </option>
-      </select>
-    </label>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Highest Offer Amount</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in displayData" :key="row.month">
-          <td>{{ row.date }}</td>
-          <td>${{ row.value }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </main>
-</template>
-
-<script setup>
-import { ref, computed, watch } from "vue";
-import { monthNames } from "../util/constants";
-
-// the three financial security types in our api's dataset
-const securityTypes = ["CMBs", "Bills", "Bonds", "FRNs", "Notes", "TIPS"];
-
-// store the selected value in the dropdown
-const selectedSecurityType = ref(securityTypes[0]);
-
-// store the endpoint for our api request
-const url = computed(
-  () =>
-    `https://api.fiscaldata.treasury.gov/services/api/fiscal_service/v2/accounting/od/record_setting_auction?sort=-record_date&filter=security_type%3Aeq%3A${selectedSecurityType.value}&fields=record_date,high_offer_amt`
-);
-
-// store all of the data from our api request. by default, there is no data, so this is an empty ref
-const data = ref();
-
-// whenever the url changes, re-run the watcher callback which performs the fetch
-watch(
-  url,
-  async (url, _, onCleanup) => {
-    //#region abortcontroller
-    // this is somewhat intermediate so feel free to skip, but an abort controller enables
-    // javascript to tell the browser when an asynchronous operation (such as fetching)
-    // should be cancelled for some reason. in our case here, if the user switches
-    // the commodity value in the dropdown once, and then again before the api
-    // request finishes, we can safely skip it because we need to make a new
-    // request for the new selected value. we detect when the value of url
-    // changes more than once by passing a callback to onCleanup(), which
-    // will run the next time url changes
-    const controller = new AbortController();
-    onCleanup(() => {
-      controller.abort();
-    });
-    //#endregion
-
-    // actually perform the fetch
-    fetch(url, { signal: controller.signal })
-      // convert the response from the server into JSON data
-      .then((res) => res.json())
-      // save the data to our data ref
-      .then((apiData) => {
-        data.value = apiData;
-      });
-  },
-  // run this watcher the first time the code runs. otherwise, the function would
-  // not be called until the user changed their selection and therefore the url
-  { immediate: true }
-);
-
-// take 25 of the data points from the API, if there is a value in our data ref
-// otherwise, return an empty array
-const records = computed(() => {
-  if (data.value) {
-    return data.value.data.slice(0, 25);
-  } else {
-    return [];
-  }
-});
-
-// convert each item in records (noting that for this code, we don't need to worry about unfetched data!)
-// into an object that has a formatted date and the value we want to display
-const displayData = computed(() =>
-  records.value.map((value) => {
-    const date = new Date(`${value.record_date}T00:00:00`);
-    return {
-      date: date.toLocaleDateString(),
-      value: Number(value.high_offer_amt).toFixed(2),
-    };
-  })
-);
-</script>
-
-<style>
-/* add padding around the page */
-.fetch {
-  padding: 1rem;
-}
-
-/* make the heading font larger and add spacing below */
-.fetch h2 {
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-/* add spacing below the text */
-.fetch p {
-  margin-bottom: 1rem;
-}
-
-/* add borders to the table and its top row */
-.fetch table,
-.fetch thead {
-  border: 1px solid #d9d9d9;
-}
-
-/* setup the spacing and the text alignment of the table headers and table cells */
-.fetch :is(th, td) {
-  text-align: left;
-  padding: 0.25rem 0.75rem;
-  min-width: 10rem;
-}
-
-/* make even numbered rows an off-white color to make the table more legible */
-.fetch tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-</style>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
new file mode 100644
index 0000000..a12b5a1
--- /dev/null
+++ b/src/views/LoginPage.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="login">
+      <h2>Login</h2>
+      <form @submit.prevent="login">
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" v-model="email" required>
+        </div>
+        <div class="form-group">
+          <label for="password">Password:</label>
+          <input type="password" id="password" v-model="password" required>
+        </div>
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        email: '',
+        password: '',
+      };
+    },
+    methods: {
+      login() {
+        // You can add your login logic here
+        // For example, send a POST request to a server with email and password
+        // If login is successful, you can navigate to another page
+        // If login fails, you can display an error message
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .login {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    display: block;
+    font-weight: bold;
+  }
+  
+  input[type="text"],
+  input[type="password"],
+  input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+  
+  button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
new file mode 100644
index 0000000..cafb34e
--- /dev/null
+++ b/src/views/SignUp.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="signup">
+    <h2>Create an Account</h2>
+    <form @submit.prevent="registerUser">
+      <div class="form-group">
+        <label for="username">Username <span class="required">*</span></label>
+        <input type="text" id="username" v-model="username" required />
+      </div>
+
+      <div class="form-group">
+        <label for="email">Email<span class="required">*</span></label>
+        <input type="email" id="email" v-model="email" required />
+      </div>
+
+      <div class="form-group">
+        <label for="password">Password<span class="required">*</span></label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+
+      <button type="submit">Sign Up</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      username: '',
+      email: '',
+      password: '',
+    };
+  },
+  methods: {
+    registerUser() {
+      const userData = {
+        username: this.username,
+        email: this.email,
+        password: this.password,
+      };
+
+      axios
+        .post('https://uu9xl4bi58.execute-api.us-east-1.amazonaws.com/signupstage/login', userData) // Replace with your actual API endpoint
+        .then(response => {
+          console.log(response.data);
+          // Optionally, you can redirect the user to a login page or display a success message.
+        })
+        .catch(error => {
+          console.error(error);
+          // Handle any error, e.g., display an error message to the user.
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.signup {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc; /* Add a border around the form */
+  border-radius: 5px; /* Rounded corners */
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 10px; /* Increase spacing between inputs */
+}
+
+button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 10px; /* Increase spacing between inputs and the button */
+}
+</style>