Merge pull request 'Created login for the default usernames and passwords' (#1) from login into master

Reviewed-on: #1

.gitignore

@@ -2,6 +2,8 @@
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
+.idea/
+
 # User-specific stuff
 .idea/**/workspace.xml
 .idea/**/tasks.xml

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/config.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Create database connection
+ * @return PDO|string - Database connection or error message
+ */
+function dbConn()
+{
+    $host = "mysql.cs.nott.ac.uk";
+    $dbName = "psxrp11_dbcw";
+    $username = "psxrp11_dbcw";
+    $password = "B4nking£ma1lC!tys";
+    try
+    {
+        return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
+    }
+    catch (PDOException $e)
+    {
+        return "Connection failed: " . $e->getMessage();
+    }
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css

@@ -0,0 +1,41 @@
+@import "normalize.css";
+@import "template.css";
+
+body, html {
+    height: 100%;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    background-image: linear-gradient(to top left, var(--primary), var(--hover));
+}
+
+div.login {
+    background-color: #FFFFFF;
+    padding: 2em 5em;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+    box-shadow: 0 6px 0 var(--mutedBlack);
+}
+
+form.loginForm {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 1em;
+}
+
+div.formControl {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.5em;
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css

@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap');
+
+:root {
+    --primary: hsla(220, 60%, 50%, 1);
+    --hover: hsl(240, 50%, 22%);
+    --secondary: hsla(194, 52%, 67%, 1);
+    --accent: hsla(15, 99%, 57%, 1);
+    --light: hsla(90, 8%, 85%, 1);
+    --mutedBlack: hsla(0, 0%, 0%, 0.25)
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-size: 1em;
+    font-weight: 400;
+    font-family: "Fira Sans", sans-serif;
+}
+
+h1, h2 {
+    font-weight: 400;
+    font-family: "Yeseva One", cursive;
+}
+
+.btn {
+    outline: none;
+    border: none;
+    padding: 14px 28px;
+    cursor: pointer;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 1em;
+}
+
+.btnPrimary {
+    background-color: var(--primary);
+    color: #FFFFFF;
+}
+
+
+div.formControl {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.5em;
+    width: 100%;
+}
+
+form .formControl input:not([type="submit"]), form .formControl textarea {
+	width: 100%;
+	border: 4px solid var(--primary);
+	background: 0 0;
+	outline: 0;
+	-webkit-border-radius: 1em;
+	-moz-border-radius: 1em;
+	border-radius: .5em;
+	padding: 0 .5em;
+    height: 3em;
+}
+

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Login</title>
+    <link rel="stylesheet" href="css/login.css">
+</head>
+<body>
+<main>
+    <div class="login">
+        <h1>Login To Traffic Reporter</h1>
+        <form class="loginForm" id="login">
+            <div class="formControl">
+                <label for="username">Username</label>
+                <input type="text" name="username" id="username">
+            </div>
+            <div class="formControl">
+                <label for="password">Password</label>
+                <input type="password" name="password" id="password">
+            </div>
+            <input type="submit" value="Login" class="btn btnPrimary">
+        </form>
+    </div>
+</main>
+<script src="js/login.js"></script>
+</body>
+</html>

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js

@@ -0,0 +1,25 @@
+// Login stuff
+
+document.querySelector("#login").addEventListener("submit", e =>
+{
+    e.preventDefault();
+    let formData = new FormData();
+    formData.append("username", document.querySelector("#username").value);
+    formData.append("password", document.querySelector("#password").value);
+    fetch("login.php",
+{
+            method: "POST",
+            body: formData
+    }).then(res => res.json().then(json =>
+    {
+        if (json.message === "ok")
+        {
+            window.location.href = "search.html";
+        }
+        else
+        {
+            alert("Invalid username or password");
+        }
+    }));
+
+});

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php

@@ -0,0 +1,22 @@
+<?php
+session_start();
+require_once 'config.php';
+
+$username = $_POST["username"];
+$password = $_POST["password"];
+
+$conn = dbConn();
+
+$stmt = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND Users_password = :password");
+$stmt->bindParam(":username", $username);
+$stmt->bindParam(":password", $password);
+
+if ($stmt->execute())
+{
+    $_SESSION["username"] = $username;
+    echo json_encode(array("message" => "ok"));
+}
+else
+{
+    echo json_encode(array("message" => "Username or password is incorrect"));
+}