Merge pull request #4 from muhammedp903/database_and_authentication

Database and authentication

client/css/form.css

@@ -11,7 +11,7 @@
 }
 
 body{
- position:reflective;
+ position:relative;
  width:100%;
  min-height:100vh;
  height:auto;
@@ -78,9 +78,8 @@ input:focus::placeholder{
  width:auto;
  padding:0 20px;
  cursor: pointer;
- margin: 50px autp 0;
+ margin: 50px auto 0;
  opacity: 0;
-
 
 }
 
@@ -126,5 +125,5 @@ input:focus::placeholder{
  color:rgba(255, 255, 255, 0.5);
  display: block;
  color: #000;
- 
+
 }

client/css/home.css

@@ -133,7 +133,7 @@ input , button{
 
 #tasks .task .content .text:not(:read-only) {
  color: lightskyblue;
-};
+}
 
 
 
@@ -207,11 +207,9 @@ header{
 
 input[type="date"]{
  background-color: rgba(0, 136, 169, 1);
- padding: 15px;
- margin-top:2rem;
- margin-left:6rem;
- position: left;
- transform: translate(-50%,-50%);
+ padding: 5px;
+ margin-left:5px;
+ position: center;
  top: 50%;
  left: 50%;
  font-family: "Roboto Mono",monospace;

client/index.html

@@ -18,7 +18,7 @@
  <li><a href="£">Your Tasks</a></li>
  </ul>
  </nav>
- <a class="logout" href="login.html"><button> Log Out</button></a>
+ <a class="logout"><button> Log Out</button></a>
  </header>
  </br>
  <div class="container">
@@ -33,8 +33,6 @@ <h1><i>Add your new assignments:</i></h1>
 
  </form>
 
-
-
  <section class="task-list">
  <h2><i><b>Assignments</b></i></h2>
  <div id="tasks">
@@ -61,13 +59,9 @@ <h2><i><b>Assignments</b></i></h2>
  
  </div> --> 
  </div>
-
- <input type="date">
  </section>
-
  </div>
 
-
  <script src="js/home.js"></script>
  </body>
 

client/index.html.old

@@ -10,6 +10,6 @@
  <h1>TEST</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium earum eius asperiores totam vitae eveniet perferendis, reprehenderit adipisci labore repudiandae voluptatem nisi facilis! Odit quae, corporis incidunt ex modi mollitia.</p>
  <div style="font-size: 100px;" id="out"></div>
- <script src="reqApi.js"></script>
+ <script src="reqApi.js.old"></script>
 </body>
 </html>

client/js/form.js

@@ -5,3 +5,92 @@ form.forEach((item,i) => {
  item.style.opacity = 1;
  }, i*100);
 })
+
+async function authPostReq(url, data) {
+ // Default options are marked with *
+ return await fetch(`https://localhost:3000/${url}`, {
+ method: "POST", // *GET, POST, PUT, DELETE, etc.
+ mode: "cors", // no-cors, *cors, same-origin
+ cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+ credentials: "same-origin", // include, *same-origin, omit
+ headers: {
+ "Content-Type": "application/json",
+
+ // 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ redirect: "follow", // manual, *follow, error
+ referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+ body: JSON.stringify(data), // body data type must match "Content-Type" header
+ }); // parses JSON response into native JavaScript objects
+}
+
+function loginBtnClick() {
+ let data = {
+ email: document.getElementById('email').value,
+ pass: document.getElementById('password').value
+ };
+ if(inputValidation(Object.values(data))){
+ authPostReq("login", data).then((res) => {
+ if(res.status === 201){
+ window.location.replace("./index.html");
+ }else if(res.status === 401){
+ alert("Incorrect email/password");
+ }else{
+ alert("An error occurred whilst trying to sign in");
+ }
+ console.log(res); // JSON data parsed by `data.json()` call
+ });
+ }else{
+ alert("Ensure all fields are filled");
+ }
+}
+
+function registerBtnClick() {
+ let data = {
+ name: document.getElementById('name').value,
+ email: document.getElementById('email').value,
+ pass: document.getElementById('password').value
+ };
+ if(inputValidation(Object.values(data))){
+ authPostReq("register", data).then((res) => {
+ if(res.status === 201){
+ window.location.replace("./index.html");
+ }else{
+ alert("An error occurred whilst trying to register");
+ }
+ console.log(res); // JSON data parsed by `data.json()` call
+ });
+ }else{
+ alert("Ensure all fields are filled");
+ }
+}
+
+function inputValidation(values) {
+ // Simple validation to ensure no fields are empty
+ // TODO: Better validation
+ let valid = true;
+ values.forEach((val)=>{
+ if(val.length === 0){
+ valid = false;
+ }
+ });
+ return valid;
+}
+
+window.onload = async () => {
+ const loginBtn = document.getElementById('login-btn');
+ if(loginBtn != null){
+ loginBtn.addEventListener(
+ 'click',
+ loginBtnClick
+ );
+ }
+
+ const regBtn = document.getElementById('register-btn');
+ if(regBtn != null){
+ regBtn.addEventListener(
+ 'click',
+ registerBtnClick
+ );
+ }
+}