native-fox-2019 · Rofandi · Mar 2, 2020 · Mar 2, 2020 · Mar 3, 2020 · Mar 3, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/Server/app.js",
+            "cwd": "${workspaceFolder}/Server"
+        }
+    ]
+}
diff --git a/Client/index.html b/Client/index.html
@@ -0,0 +1,143 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <meta name="google-signin-client_id" content="190289066637-letpqm58jjldbul13d3d06n2apt9le4c.apps.googleusercontent.com">
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">Fancy Todo</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a id="login-link" class="nav-link" href="#">Login</a>
+        </li>
+        <li class="nav-item">
+          <a id="register-link" class="nav-link" href="#">Register</a>
+        </li>
+        <li class="nav-item" style="display: none;">
+          <a id="todos-link" class="nav-link" href="#">TODOs</a>
+        </li>
+        <li class="nav-item" style="display: none;">
+          <a id="logout-link" class="nav-link" href="#">Logout</a>
+        </li>
+        <li class="nav-item" style="display: none;">
+          <a href="#" onclick="signOut()" class="nav-link" id="sign-out-google">Logout</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <div class="container">
+
+    <div id="register-page" class="pt-3" style="display:none;">
+      <h1>Register</h1>
+      <div>
+        <label>Email:</label><br>
+        <input id="register-email" type="text" name="email" value=""><br>
+        <label>Password:</label><br>
+        <input id="register-password" type="password" name="password" value="">
+        <input type="button" id="register-generate" value="Generate passwords"/><br>
+        <div id="register-passwords"></div><br><br>
+        <button id="register-submit" type="button" value="Submit">Sumbit nih</button>
+        <div class="g-signin2" style="width: 100px;" data-onsuccess="onSignIn"></div>
+      </div>
+    </div>
+
+    <div id="login-page" class="pt-3" style="display:none;">
+      <h1>Login</h1>
+      <div>
+        <label>Email:</label><br>
+        <input id="login-email" type="text" name="email" value="rofandi3@gmail.com"><br>
+        <label>Password:</label><br>
+        <input id="login-password" type="password" name="description" value="123456"><br><br>
+        <input id="login-submit" type="button" value="Submit">
+        <div class="g-signin2" style="width: 100px;" data-onsuccess="onSignIn"></div>
+      </div>
+    </div>
+
+    <div id="todos-page" class="pt-3" style="display:none;">
+      <h1>TODOs</h1>
+      <div id="todos-list"></div>
+      <input id="todos-add" type="button" value="add">
+    </div>
+
+    <div id="todosAdd-page" class="pt-3" style="display:none;">
+      <h1>ADD TODO</h1>
+      <div>
+        <label>Title:</label><br>
+        <input id="todo-title" type="text" name="email" value=""><br>
+        <label>Description:</label><br>
+        <input id="todo-description" type="text" name="description" value=""><br>
+        <label>Status:</label><br>
+        <input id="todo-status" type="text" name="status" value=""><br>
+        <label>Due Date:</label><br>
+        <input id="todo-due_date" type="text" name="due_date" value=""><br><br>
+        <input id="todosAdd-submit" type="button" value="submit">
+        <input id="todosAdd-cancel" type="button" value="cancel">
+      </div>
+    </div>
+
+    <div id="todosEdit-page" class="pt-3" style="display:none;">
+      <h1>EDIT TODO</h1>
+      <div>
+        <input id="todoEdit-id" type="hidden" name="id" value=""/>
+        <label>Title:</label><br>
+        <input id="todoEdit-title" type="text" name="title" value=""><br>
+        <label>Description:</label><br>
+        <input id="todoEdit-description" type="text" name="description" value=""><br>
+        <label>Status:</label><br>
+        <input id="todoEdit-status" type="text" name="status" value=""><br>
+        <label>Due Date:</label><br>
+        <input id="todoEdit-due_date" type="text" name="due_date" value=""><br><br>
+        <input id="todosEdit-submit" type="button" value="submit">
+        <input id="todosEdit-cancel" type="button" value="cancel">
+      </div>
+    </div>
+
+    <div id="todosDelete-page" class="pt-3" style="display:none;">
+      <h1>DELETE TODO</h1>
+      <div>
+        <input id="todoDelete-id" type="hidden" name="id" value=""/>
+        <label>Title:</label><br>
+        <input id="todoDelete-title" type="text" name="title" value="" readonly><br>
+        <label>Description:</label><br>
+        <input id="todoDelete-description" type="text" name="description" value="" readonly><br>
+        <label>Status:</label><br>
+        <input id="todoDelete-status" type="text" name="status" value="" readonly><br>
+        <label>Due Date:</label><br>
+        <input id="todoDelete-due_date" type="text" name="due_date" value="" readonly><br><br>
+        <input id="todosDelete-submit" type="button" value="delete">
+        <input id="todosDelete-cancel" type="button" value="cancel">
+      </div>
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+    crossorigin="anonymous"></script>
+  <script src="js/dataView.js"></script>
+  <script src="js/request.js"></script>
+  <script src="js/page.js"></script>
+  <script src="js/login.js"></script>
+  <script src="js/register.js"></script>
+  <script src="js/todos.js"></script>
+  <script src="js/add.js"></script>
+  <script src="js/edit.js"></script>
+  <script src="js/delete.js"></script>
+</body>
+
+</html>
diff --git a/Client/js/add.js b/Client/js/add.js
@@ -0,0 +1,25 @@
+$("#todosAdd-submit").click(function() {
+    const title = $("#todo-title").val();
+    const description = $("#todo-description").val();
+    const status = $("#todo-status").val();
+    const due_date = $("#todo-due_date").val();
+    console.log(title, description, status, due_date);
+    $.ajax('http://localhost:3000/todos',{
+        type: "POST",
+        headers: {
+            "Authorization": localStorage.jwt
+        },
+        data: {
+           title,
+           description,
+           status,
+           due_date 
+        }
+    })
+    .done(()=>showPage("todos"))
+    .fail(message=>console.log(message));
+});
+
+$("#todosAdd-cancel").click(function () {
+    showPage("todos");
+});
diff --git a/Client/js/dataView.js b/Client/js/dataView.js
@@ -0,0 +1 @@
+let currentPage = "login";
diff --git a/Client/js/delete.js b/Client/js/delete.js
@@ -0,0 +1,32 @@
+function loadTodoForDelete(id) {
+    $.ajax(`http://localhost:3000/todos/${id}`, {
+        type: "GET",
+        headers: {
+            "Authorization": localStorage.jwt
+        }
+    })
+        .done(todo => {
+            $("#todoDelete-id").val(id);
+            $("#todoDelete-title").val(todo.title);
+            $("#todoDelete-description").val(todo.description);
+            $("#todoDelete-status").val(todo.status);
+            $("#todoDelete-due_date").val(todo.due_date);
+        })
+        .fail(message => console.log(message));
+}
+
+$("#todosDelete-submit").click(function () {
+    const id = $("#todoDelete-id").val();
+    $.ajax(`http://localhost:3000/todos/${id}`, {
+        type: "DELETE",
+        headers: {
+            "Authorization": localStorage.jwt
+        }
+    })
+        .done(() => showPage("todos"))
+        .fail(message => console.log(message));
+});
+
+$("#todosDelete-cancel").click(function () {
+    showPage("todos");
+});
diff --git a/Client/js/edit.js b/Client/js/edit.js
@@ -0,0 +1,42 @@
+function loadTodoForEdit(id) {
+    $.ajax(`http://localhost:3000/todos/${id}`, {
+        type: "GET",
+        headers: {
+            "Authorization": localStorage.jwt
+        }
+    })
+        .done(todo => {
+            $("#todoEdit-id").val(id);
+            $("#todoEdit-title").val(todo.title);
+            $("#todoEdit-description").val(todo.description);
+            $("#todoEdit-status").val(todo.status);
+            $("#todoEdit-due_date").val(todo.due_date);
+        })
+        .fail(message => console.log(message));
+}
+
+$("#todosEdit-submit").click(function () {
+    const id = $("#todoEdit-id").val();
+    const title = $("#todoEdit-title").val();
+    const description = $("#todoEdit-description").val();
+    const status = $("#todoEdit-status").val();
+    const due_date = $("#todoEdit-due_date").val();
+    $.ajax(`http://localhost:3000/todos/${id}`, {
+        type: "PUT",
+        headers: {
+            "Authorization": localStorage.jwt
+        },
+        data: {
+            title,
+            description,
+            status,
+            due_date
+        }
+    })
+        .done(() => showPage("todos"))
+        .fail(message => console.log(message));
+});
+
+$("#todosEdit-cancel").click(function () {
+    showPage("todos");
+});
diff --git a/Client/js/login.js b/Client/js/login.js
@@ -0,0 +1,17 @@
+$("#login-submit").click(function() {
+    const email = $("#login-email").val();
+    const password = $("#login-password").val();
+    $.ajax("http://localhost:3000/users/login", {
+        type: "POST",
+        data: {
+            email,
+            password
+        }
+    })
+    .done(result => {
+        localStorage.jwt = result.token;
+        switchToLoggedIn();
+        showPage("todos");
+    })
+    .fail(message => console.log(message));
+});
diff --git a/Client/js/page.js b/Client/js/page.js
@@ -0,0 +1,95 @@
+function hideAllPages() {
+    $("#register-page").hide();
+    $("#login-page").hide();
+    $("#todos-page").hide();
+    $("#todosAdd-page").hide();
+    $("#todosEdit-page").hide();
+    $("#todosDelete-page").hide();
+}
+
+function showPage(page, id) {
+    currentPage = page;
+    hideAllPages();
+    $(".nav-item").removeClass("active");
+    switch (page) {
+        case "login":
+            $("#login-page").show();
+            $("#login-link").parent().addClass("active");
+            break;
+        case "register":
+            $("#register-page").show();
+            $("#register-link").parent().addClass("active");
+            break;
+        case "todos":
+            $("#todos-page").show();
+            $("#todos-link").parent().addClass("active");
+            loadTodos();
+            break;
+        case "todoAdd":
+            $("#todos-page").show();
+            $("#todos-link").parent().addClass("active");
+            loadTodos();
+            $("#todosAdd-page").show();
+            break;
+        case "todoEdit":
+            loadTodoForEdit(id);
+            $("#todosEdit-page").show();
+            break;
+        case "todoDelete":
+            loadTodoForDelete(id);
+            $("#todosDelete-page").show();
+            break;
+    }
+}
+
+function switchToLoggedIn() {
+    $("#login-link").parent().hide();
+    $("#register-link").parent().hide();
+    $("#todos-link").parent().show();
+    $("#logout-link").parent().show();
+    $("#sign-out-google").parent().hide();
+}
+
+function switchToLoggedInWithGoogle() {
+    $("#login-link").parent().hide();
+    $("#register-link").parent().hide();
+    $("#todos-link").parent().show();
+    $("#logout-link").parent().hide();
+    $("#sign-out-google").parent().show();
+}
+
+function switchToLoggedOut() {
+    $("#login-link").parent().show();
+    $("#register-link").parent().show();
+    $("#todos-link").parent().hide();
+    $("#logout-link").parent().hide();
+    $("#sign-out-google").parent().hide();
+}
+
+$("#login-link").click(function () {
+    showPage("login");
+});
+
+$("#register-link").click(function () {
+    showPage("register");
+});
+
+$("#todos-link").click(function () {
+    showPage("todos");
+});
+
+$("#logout-link").click(function () {
+    delete localStorage.jwt;
+    switchToLoggedOut();
+    showPage("login");
+});
+
+$(document).ready(() => {
+    if (localStorage.jwt) {
+        switchToLoggedIn();
+        showPage("todos");
+    } else {
+        switchToLoggedOut();
+        showPage("login");
+    }
+});