Fix style on registration page. Add validation to registration page.

views/landingPage/landing.css

@@ -109,9 +109,18 @@
 /* Register Strand */
 #registerStrand{
     display: none;
-    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
 }
 
+    #registerStrand > *{
+        margin: 10px;
+    }
+
+    #agreement{
+        display: flex;
+    }
+
 @media screen and (max-width: 600px){
     .logo-text img{
         max-height: 20vh;

views/landingPage/landing.ejs

@@ -70,24 +70,30 @@
         </div>
 
         <div id="registerStrand">
-            <form action="/merchant/create/none" method="post">
+            <form action="/merchant/create/none" method="post" onsubmit="registerObj.submit()">
                 <label>Restaurant Name:
-                    <input name="name" type="text">
+                    <input id="restName" name="name" type="text" required>
                 </label>
 
                 <label>Email:
-                    <input name="email" type="email">
+                    <input name="email" type="email" required>
                 </label>
 
                 <label>Password:
-                    <input name="password" type="password">
+                    <input name="password" type="password" required>
                 </label>
 
                 <label>Confirm Password:
-                    <input name="confirmPassword" type="password">
+                    <input name="confirmPassword" type="password" required>
                 </label>
 
-                <input class="button" type="submit" value="Register">
+                <div id="agreement">
+                    <input id="checkAgree" type="checkbox" onchange="registerObj.agreement()">
+
+                    <p>I agree to the <a href="/information">Privacy Policy</a> and the <a href="/information">Terms and Conditions</a></p>
+                </div>
+
+                <input id="regButton" class="buttonDisabled" type="submit" value="Register">
             </form>
 
             <a class="button" href="/cloverlogin">Register with Clover</a>

views/landingPage/register.js

@@ -2,5 +2,34 @@ let registerObj = {
     display: function(){
         controller.clearScreen();
         controller.registerStrand.style.display = "flex";
+
+        document.querySelector("#checkAgree").checked = false;
+        document.querySelector("#regButton").classList = "buttonDisabled";
     },
+
+    agreement: function(){
+        let checkbox = document.querySelector("#checkAgree");
+        let button = document.querySelector("#regButton");
+
+        if(checkbox.checked){
+            button.classList = "button";
+        }else{
+            button.classList = "buttonDisabled";
+        }
+    },
+
+    submit: function(){
+        event.preventDefault();
+
+        let form = document.querySelector("#registerStrand form");
+        let checkbox = document.querySelector("#checkAgree");
+
+        if(checkbox.checked){
+            if(validator.isSanitary(document.querySelector("#restName").value)){
+                form.submit();
+            }
+        }else{
+            banner.createError("Please agree to the Privacy Policy and Terms and Conditions to continue");
+        }
+    }
 }