Add files via upload

NickOvt · Jun 29, 2019 · 826f8b2 · 826f8b2
1 parent de76903
commit 826f8b2
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 0 deletions.
diff --git a/AJAX_PHP/check-login.php b/AJAX_PHP/check-login.php
@@ -0,0 +1,30 @@
+<?php
+    $username = isset($_POST['username']) ? $_POST['username'] : '';
+    $password = isset($_POST['password']) ? $_POST['password'] : '';
+    $ok = true;
+    $messages = array();
+
+    if ( !isset($username) || empty($username) ) {
+        $ok = false;
+        $messages[] = 'Username cannot be empty!';
+    }
+    if ( !isset($password) || empty($password) ) {
+        $ok = false;
+        $messages[] = 'Password cannot be empty!';
+    }
+    if ($ok) {
+        if ($username === 'admin' && $password === 'admin123') {
+            $ok = true;
+            $messages[] = 'Successful login!';
+        } else {
+            $ok = false;
+            $messages[] = 'Incorrect username/password combination!';
+        }
+    }
+    echo json_encode(
+        array(
+            'ok' => $ok,
+            'messages' => $messages
+        )
+    );
+?>
diff --git a/AJAX_PHP/dashboard.html b/AJAX_PHP/dashboard.html
@@ -0,0 +1 @@
+<h1>Welcome!</h1>
diff --git a/AJAX_PHP/index.html b/AJAX_PHP/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>AJAX Forms</title>
+
+    <link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="display-4 text-center">AJAX Forms - Web</h1>
+        <form class="book-form">
+            <ul id="form-messages">
+                <!-- <div class="alert alert-danger" style="margin-left: -2.5rem; display: none;"><li>Generic error #1</li></div> -->
+            </ul>
+
+
+
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input  class="form-control" type="text" id="username" spellcheck="false">
+            </div>
+
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input  class="form-control" type="password" id="password">
+            </div>
+
+            <button type="submit" id="btn-submit" class="btn btn-primary btn-block mt-4">Login</button>
+        </form>
+    </div>
+
+    <script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/AJAX_PHP/main.js b/AJAX_PHP/main.js
@@ -0,0 +1,112 @@
+const form = {
+    username: document.getElementById('username'),
+    password: document.getElementById('password'),
+    submit: document.getElementById('btn-submit'),
+    messages: document.getElementById('form-messages'),
+};
+
+form.submit.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const request = new XMLHttpRequest();
+
+    request.onload = () => {
+        let responseObject = null;
+
+        try {
+            responseObject = JSON.parse(request.responseText);
+        } catch (e) {
+            console.error("Could not parse JSON!");
+        }
+
+        if(responseObject) {
+            handleResponse(responseObject);
+        }
+    };
+
+    const requestData = `username=${form.username.value}&password=${form.password.value}`;
+    console.log(requestData);
+
+    request.open('post', 'check-login.php');
+    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    request.send(requestData);
+});
+
+
+function handleResponse(responseObject) {
+    function createAlertMsg(alertType) {
+        while(form.messages.firstChild) {
+            form.messages.removeChild(form.messages.firstChild);
+        }
+
+        responseObject.messages.forEach((message) => {
+            const div = document.createElement('div');
+            const li = document.createElement('li');
+            li.textContent = message;
+            div.appendChild(li);
+            div.classList.add("alert");
+            div.classList.add(`alert-${alertType}`);
+            div.style.marginLeft = "-2.5rem";
+            form.messages.appendChild(div);
+        });
+
+        form.messages.style.display = "block";
+    }
+
+
+    if(responseObject.ok) {
+        /*
+        while(form.messages.firstChild) {
+            form.messages.removeChild(form.messages.firstChild);
+        }
+        */
+
+        //location.href = 'dashboard.html';
+
+        //// TODO: add setTimeout() later, to show success message and then change location
+
+        createAlertMsg("success");
+
+        /*
+        responseObject.messages.forEach((message) => {
+            const div = document.createElement('div');
+            const li = document.createElement('li');
+            li.textContent = message;
+            div.appendChild(li);
+            div.classList.add("alert");
+            div.classList.add("alert-success");
+            div.style.marginLeft = "-2.5rem";
+            form.messages.appendChild(div);
+        });
+
+        form.messages.style.display = "block";
+        */
+
+        setTimeout(() => {
+            //document.querySelector('.alert-success').remove();
+            location.href = 'dashboard.html';
+        }, 1450);
+
+    } else {
+        createAlertMsg("danger");
+
+        /*
+        while(form.messages.firstChild) {
+            form.messages.removeChild(form.messages.firstChild);
+        }
+
+        responseObject.messages.forEach((message) => {
+            const div = document.createElement('div');
+            const li = document.createElement('li');
+            li.textContent = message;
+            div.appendChild(li);
+            div.classList.add("alert");
+            div.classList.add("alert-danger");
+            div.style.marginLeft = "-2.5rem";
+            form.messages.appendChild(div);
+        });
+
+        form.messages.style.display = "block";
+        */
+    }
+}