add autentication

src/apis/auth.php

@@ -4,26 +4,29 @@ $GLOBALS['conn'];
 $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
 
 $content = null;
-$content->status = 404;
+$content->status = array();
+$data = json_decode(file_get_contents("php://input"));
 
-if(isset($_POST['act']) && $_POST['act'] == 'auth') {
-  if($_POST['usr'] == 'admin' && $_POST['pwd'] == 'JohnHolmes') {
+if(isset($_GET['act']) && $_GET['act'] == 'login') {
+  if($data->usr == 'admin' && $data->pwd == 'JohnHolmes') {
     $content->status = 200;
-    $content->authToken = md5(date("Y-m-d"));
+    $content->authToken = base64_encode(date("Y-m-d"));
   } else {
     $content->status = 403;
   }
-} else if(isset($_POST['act']) && $_POST['act'] == 'check') {
-  if($_POST['token'] == md5(date("Y-m-d"))) {
+} else if(isset($_GET['act']) && $_GET['act'] == 'check') {
+  if($data->token == base64_encode(date("Y-m-d"))) {
     $content->status = 200;
-    $content->authToken = md5(date("Y-m-d"));
+    $content->authToken = base64_encode(date("Y-m-d"));
   } else {
     $content->status = 403;
   }
 }
+header("Access-Control-Allow-Origin: *");
+header("Content-Type: application/json; charset=UTF-8");
+header("Access-Control-Allow-Methods: POST");
+header("Access-Control-Max-Age: 3600");
 
-header('Access-Control-Allow-Origin: *');
-header('Content-Type: application/json');
 echo json_encode($content);
 
 ?>

src/apis/index.php

@@ -4,11 +4,11 @@ $GLOBALS['conn'];
 $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
 
 $content = null;
-$content->items = array();
 
-$filter = array("portfolio", "installations", "entertainment", "performances", "workshops");
+if(isset($_GET['query'])) {
 
-switch($_GET['query']) {
+  $content->items = array();
+  switch($_GET['query']) {
     case "portfolio":
     case "installations":
     case "entertainment":
@@ -85,11 +85,33 @@ switch($_GET['query']) {
         $content->item = $item;
       }
       break;
-}
+  }
 
+} else if(isset($_GET['auth'])) {
+  switch($_GET['auth']) {
+    case 'auth':
+      if($_POST['usr'] == 'admin' && $_POST['pwd'] == 'JohnHolmes') {
+        $content->status = 200;
+        $content->authToken = md5(date("Y-m-d"));
+      } else {
+        $content->status = 403;
+      }
+      break;
+    case 'check':
+      if($_POST['token'] == md5(date("Y-m-d"))) {
+        $content->status = 200;
+        $content->authToken = md5(date("Y-m-d"));
+      } else {
+        $content->status = 403;
+      }
+      break;
+  }
+}
 
-header('Access-Control-Allow-Origin: *');
-header('Content-Type: application/json');
+header("Access-Control-Allow-Origin: *");
+header("Content-Type: application/json; charset=UTF-8");
+header("Access-Control-Allow-Methods: GET");
+header("Access-Control-Max-Age: 3600");
 echo json_encode($content);
 
 ?>

src/app/admin/admin.component.html

@@ -1,19 +1,19 @@
 <div class="component-admin">
   <div class="row no-gutters" *ngIf="!authCheck">
     <div class="col-12 col-md-6 mx-auto">
-      <div class="login-form-container">
+      <form class="login-form-container" (submit)="login()">
         <div class="m-2">
           <span class="font-12">Username</span>
-          <input type="text" class="input">
+          <input type="text" class="input-text" name="userName" [(ngModel)]="userName">
         </div>
         <div class="m-2">
           <span class="font-12">Password</span>
-          <input type="password" class="input">
-        </div>
-        <div class="m-2">
-          <button type="button" class="button">Sign-in</button>
+          <input type="password" class="input-text" name="password" [(ngModel)]="password">
         </div>
+        <div class="m-2 pt-4">
+          <button type="submit" class="button">Sign-in</button>
         </div>
+      </form>
     </div>
   </div>
 

src/app/admin/admin.component.scss

@@ -7,12 +7,8 @@
     padding: 40px;
     color: $white;
 
-    .input {
-      width: 100%;
-    }
-
     .button {
-      background: $black;
+      width: 300px;
     }
   }
 

src/app/admin/admin.component.ts

@@ -9,6 +9,8 @@ import { AuthService } from '../services/auth.service'
 export class AdminComponent implements OnInit {
 
   public authCheck: boolean = false
+  public userName: string = ''
+  public password: string = ''
 
   constructor(private authService: AuthService) { }
 
@@ -31,8 +33,8 @@ export class AdminComponent implements OnInit {
   login(): void {
 
     const body = {
-      usr: 'admin',
-      pwd: 'JohnHolmes'
+      usr: this.userName,
+      pwd: this.password
     }
     this.authService.login(body).toPromise().then((response) => {
       this.authCheck = response.status == 200

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { NgParticlesModule } from "ng-particles";
 import { NgxImageGalleryModule } from 'ngx-image-gallery';
+import { FormsModule } from '@angular/forms'
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -28,6 +29,7 @@ import { AdminComponent } from './admin/admin.component';
     AppRoutingModule,
     NgParticlesModule,
     NgxImageGalleryModule,
+    FormsModule,
     HttpClientModule
   ],
   providers: [],

src/assets/scss/forms.scss

@@ -0,0 +1,76 @@
+
+
+input,
+button,
+textarea {
+  border: none;
+  border-radius: 4px;
+  background: $white;
+  appearance: none;
+  font-family: $font-primary;
+  font-size: $font-20;
+  resize: none;
+  &::-ms-clear {
+      display: none;
+  }
+  &:focus {outline:none;}
+  &::-moz-focus-inner {border:0;}
+}
+
+input[type=text],
+input[type=password]{
+  color: $gray;
+  padding: 10px 20px;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+  &:focus::placeholder {
+    color: transparent;
+  }
+}
+
+.input-text {
+  padding: 10px 20px;
+}
+
+.input-textarea {
+  padding: 10px;
+  width: 100%;
+}
+
+.button {
+  position: relative;
+  appearance: none;
+  color: $white;
+  border: none;
+  background: $black;
+  display: inline-block;
+  padding: 8px 20px 10px 20px;
+  text-align: center;
+  font-family: $font-20;
+  text-transform: uppercase;
+  font-weight: 500;
+  transition: opacity .3s;
+  white-space: nowrap;
+  outline: none;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &.button-white {
+    background: $white;
+    color: $black !important;
+    &:before {
+      content: '';
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      border: 1px solid $light-gray;
+    }
+  }
+}

src/assets/scss/main.scss

@@ -1,6 +1,7 @@
 @import "./variables";
 @import "./fonts";
 @import "./icons";
+@import "./forms";
 @import "./global";