Merge pull request #4 from CSE2102-Fall23/page_login

made api,lamba func, and connect to create an account page

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)})
+        }

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>

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,
+    },
   ],
 });
 

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>
+