add deploy and prod scripts

update apis
add authentication
add images loader

auth/identity.pem

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEApNcN8cn0872DhGSdPobrIR9kBfd+qSL/Sqrgk3mywEuuzhN3
+MOYbaejwdIJacC0OjCMVgm3f2TziefYd2ssvAUjT+M9FCESUSSDHgPVxt22UDZxz
+ZraasA+jdVW0QQtBv8AjyDCXAmMZxcGT1x1htKsKfG2JDxxc1DXub1BaBSkrqcZ1
+1u50UK0DBbRcUhd85z9Oivju3IktDaVow09fpwUR/tK1xO8PPsaAUQMKdN1ArGA/
+O+FFXAirQ7OD8tT4gCmJYrU2h4mAlcjKwpvmXbtHGmZ2tn4nJsaYUxL0vMPHWoTl
+ymOkFbKujBDkTSdKgUdTBy7Bda9ZzAcEBJoGgQIDAQABAoIBAEGVmuO3obEUlu4n
+BfUpwwVzst044nkzBnXT1PR4OCmQMyWk0whulTunRXxlnMwC8UXKc7VoN+b79XPm
++2vg6XvOWSAmf2XRu1n5I8doYG1FuOFNfRDB2HvyTOvTRJuYeflr3hC5XGvDuC5Z
+XZP6CbTTVKG7BwwvEbQRHSPGyXpBiqd+OOfTpeoobrkGJJAKxvXHO0G7zgB5h/H+
+0fjSWvo4QxzOAF74f0qUmWBbvLjWL3yZhVE8mxNcVoV1HlIdXV5anMe9FURci5D4
+U8ehGky3sbHjcc7wro5IPWJYTrDAmvhI8wMMx7gbHe2HOzyWRX++ifjfP77kw2e3
+IYnwMAECgYEA05Ehmsipk4rmJeCgmDJomQVsJgMW1zjOJwIljSZ9o55+LHpma6r0
+O6sdQYgiNwQT0f//iJZkatpDAyC3U6EU9RY7Yoc0R3XK86vryKQlB/Nh1boLldt6
+9TGdL5eCzaraiYuLjGvXMGTS8LjB0ftFCGQswl2kcuOFx1YjE4WPoUECgYEAx3Wo
+yenPXHCdD4kIrQ9SxPha2aobh33MjdwSYSiDliaEoBg/voWJExFmMJuvhR46xqmy
+i8E0RuzzBrG4Zhbdo4kcpdF2GtAuxNw8uYvG+SQub8zAmBT7YpXzTmpGQ2TR3i8S
+XzD57s7C1mSkBIwWuVJYcx3Kgm1mQNIOELU31UECgYEAhNc14HhqcaffRp06eRX9
+s0dCVsPNzalvV/LzHSOz886KrubT9HrNC8Ivhnwx75Vx1IQHMP4tYyJUvVwHgE0+
+WX1yIDWAz/XYTxP94meekNVy8r30lE3RcK+MYNujV/wVaBPktXDpFwvXnyqDGJPL
+Dq/HouslXLYbw8QEFjfgrYECgYB+oSU6ozThpCEihsY6ULskj+PlwohdubEO8wO8
+KSN5RRT4Ksz1YQPIVkiBXaXOJoX8MCpJbayJxs73lgbS0Xt+4oKMh3GqzjaTBpuK
+1MHK1Hyiv+QZ6WA7k6V3SCM5kB1pKItKYeabBStPP2+d725R04SR+PzjVx8O0gzZ
+8KL0wQKBgC7LRztq8PMDGTHGXVxWXwZ08ZAf2MAsBvYyAU5xudS+pRqlNGDgyxiv
+YQEe9n2DVu7GVsoNnKIapmXV1qx0vTU/CpKV0cpXi6m3XVnbtjBsaYtkYNNZfHVl
+E++gP4qgvALKugnzaGn5oby0PPcFFhnNqRwFb5c3diihwMQhkudG
+-----END RSA PRIVATE KEY-----

deploy.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+yarn prod
+rsync -avz --delete --exclude '/apis/conn.conn' --exclude '.well-known' --exclude '/uploads' -e "ssh -i ./auth/identity.pem -p2222" ./dist/dslak-website/* cdr@2.238.194.8:/www/dslak.it/
+

package.json

@@ -6,6 +6,7 @@
     "start": "ng serve",
     "dev": "ng serve",
     "build": "ng build",
+    "prod": "ng build --prod --configuration production",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

src/apis/auth.php

@@ -4,28 +4,33 @@ $GLOBALS['conn'];
 $conn = @mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
 
 $content = null;
-$content->status = array();
+$content->status = 200;
+
 $data = json_decode(file_get_contents("php://input"));
 
 if(isset($_GET['act']) && $_GET['act'] == 'login') {
-  if($data->usr == 'admin' && $data->pwd == 'JohnHolmes') {
+  if(isset($data->usr) && $data->usr == 'admin' && isset($data->pwd) && $data->pwd == 'JohnHolmes') {
     http_response_code(200);
     $content->status = 200;
     $content->authToken = base64_encode('admin:JohnHolmes'.date("Y-m-d"));
   } else {
     http_response_code(401);
     $content->status = 401;
+    $content->action = 'login';
   }
 } else if(isset($_GET['act']) && $_GET['act'] == 'check') {
-  if($data->token == base64_encode('admin:JohnHolmes'.date("Y-m-d"))) {
+  if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date("Y-m-d"))) {
     http_response_code(200);
     $content->status = 200;
     $content->authToken = base64_encode('admin:JohnHolmes'.date("Y-m-d"));
   } else {
-    http_response_code(401);
+    http_response_code(200);
     $content->status = 401;
+    $content->action = 'check';
+    $content->token = $data->token;
   }
 }
+
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json; charset=UTF-8");
 header("Access-Control-Allow-Methods: POST");

src/apis/exhibition.php

@@ -8,21 +8,47 @@ $data = json_decode(file_get_contents("php://input"));
 
 if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date("Y-m-d"))) {
 
-  if(isset($_GET['act']) && $_GET['act'] == 'save') {
-
+  if(isset($_GET['act'])) {
+    if($_GET['act'] == 'save') {
       if(isset($data->id)) {
         $q = mysqli_query($conn,"UPDATE `exhibitions` SET title = '".addslashes($data->title)."', content = '".addslashes($data->content)."',
                                     tags = '".$data->tags."', date_from = '".$data->date_from."', date_to = '".$data->date_to."',
-                                  image = '".$data->image."', exhibitions = '".$data->exhibitions."', gallery = '".$data->gallery."',
+                                    image = '".$data->image."', works = '".$data->works."', gallery = '".$data->gallery."',
                                     videos = '".$data->videos."' WHERE id = ".$data->id."");
       } else {
         $q = mysqli_query($conn,"INSERT INTO `exhibitions`
                                   (`id`, `title`, `content`, `tags`, `date_from`, `date_to`, `image`, `works`, `gallery`, `videos`)
                                   VALUES (NULL, '".addslashes($data->title)."', '".addslashes($data->content)."', '".$data->tags."',
-                                '".$data->date_from."', '".$data->date_to."', '".$data->image."', '".$data->exhibitions."',
+                                  '".$data->date_from."', '".$data->date_to."', '".$data->image."', '".$data->works."',
                                   '".$data->gallery."', '".$data->videos."')");
       }
 
+      if($q) {
+        http_response_code(201);
+        $content->status = 201;
+      } else {
+        http_response_code(403);
+        $content->status = "UPDATE `exhibitions` SET title = '".addslashes($data->title)."', content = '".addslashes($data->content)."',
+                                    tags = '".$data->tags."', date_from = '".$data->date_from."', date_to = '".$data->date_to."',
+                                    image = '".$data->image."', works = '".$data->works."', gallery = '".$data->gallery."',
+                                    videos = '".$data->videos."' WHERE id = ".$data->id."";
+      }
+    }
+
+    if($_GET['act'] == 'delete') {
+      if(isset($data->id)) {
+        $q = mysqli_query($conn,"DELETE FROM `exhibitions` WHERE id = ".$data->id."");
+        if($q) {
+          http_response_code(201);
+          $content->status = 201;
+        } else {
+          http_response_code(403);
+          $content->status = 403;
+        }
+      }
+    }
+
+    if($q) {
       $qe = mysqli_query($conn,"SELECT * FROM `exhibitions` ORDER BY id DESC");
       if(mysqli_num_rows($qe) > 0) {
         $content->items = array();
@@ -37,13 +63,6 @@ if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date(
           array_push($content->items, $item);
         }
       }
-
-    if($q) {
-      http_response_code(201);
-      $content->status = 201;
-    } else {
-      http_response_code(403);
-      $content->status = 403;
     }
   }
 

src/apis/index.php

@@ -58,6 +58,8 @@ if(isset($_GET['query'])) {
         $item->content = $re['content'];
         $item->tags = $re['tags'];
         $item->image = $re['image'];
+        $item->videos = $re['videos'];
+        $item->gallery = $re['gallery'];
         if($_GET['type'] == 'exhibitions') {
           $item->date_from = $re['date_from'];
           $item->date_to = $re['date_to'];
@@ -71,8 +73,6 @@ if(isset($_GET['query'])) {
           }
         } else if($_GET['type'] == 'works') {
           $item->type = $re['type'];
-          $item->videos = $re['videos'];
-          $item->gallery = $re['gallery'];
           $item->exhibitions = array();
           $qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")");
           while($re = mysqli_fetch_array($qx)) {

src/apis/work.php

@@ -8,8 +8,8 @@ $data = json_decode(file_get_contents("php://input"));
 
 if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date("Y-m-d"))) {
 
-  if(isset($_GET['act']) && $_GET['act'] == 'save') {
-
+  if(isset($_GET['act'])) {
+    if($_GET['act'] == 'save') {
       if(isset($data->id)) {
         $q = mysqli_query($conn,"UPDATE `works` SET title = '".addslashes($data->title)."', content = '".addslashes($data->content)."',
                                     type = '".$data->type."', tags = '".$data->tags."', image = '".$data->image."',
@@ -22,6 +22,29 @@ if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date(
                                           '".$data->videos."')");
       }
 
+      if($q) {
+        http_response_code(201);
+        $content->status = 201;
+      } else {
+        http_response_code(403);
+        $content->status = 403;
+      }
+    }
+
+    if($_GET['act'] == 'delete') {
+      if(isset($data->id)) {
+        $q = mysqli_query($conn,"DELETE FROM `works` WHERE id = ".$data->id."");
+        if($q) {
+          http_response_code(201);
+          $content->status = 201;
+        } else {
+          http_response_code(403);
+          $content->status = 403;
+        }
+      }
+    }
+
+    if($q) {
       $qe = mysqli_query($conn,"SELECT * FROM `works` ORDER BY id DESC");
       if(mysqli_num_rows($qe) > 0) {
         $content->items = array();
@@ -35,13 +58,6 @@ if(isset($data->token) && $data->token == base64_encode('admin:JohnHolmes'.date(
           array_push($content->items, $item);
         }
       }
-
-    if($q) {
-      http_response_code(201);
-      $content->status = 201;
-    } else {
-      http_response_code(403);
-      $content->status = 403;
     }
   }
 

src/app/detail/detail.component.html

@@ -12,7 +12,8 @@
                           'col-md-3': galleryImages.length >= 3}">
           <div class="gallery-container">
             <span class="gallery-title">{{image.title}}</span>
-            <img class="image" [src]="basePath+image.url" (click)="openGallery(i)">
+            <img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.webp" alt="loading">
+            <img class="image" [hidden]="loadedImages[i]" (load)="onLoad(i)" [src]="image.url" (click)="openGallery(i)">
           </div>
         </div>
       </div>

src/app/detail/detail.component.scss

@@ -27,9 +27,6 @@
 
     .date-container {
       display: inline-flex;
-      position: absolute;
-      top: 40px;
-      right: 40px;
 
       .date {
         display: inline-flex;
@@ -144,6 +141,12 @@
  .component-detail {
     .content {
       transform: rotate(2deg) skew(0deg, -6deg);
+
+      .date-container {
+        position: absolute;
+        top: 40px;
+        right: 40px;
+      }
     }
   }
 }

src/app/detail/detail.component.ts

@@ -30,6 +30,7 @@ export class DetailComponent implements OnInit {
   }
 
   public galleryImages: GALLERY_IMAGE[] = []
+  public loadedImages: boolean[] = []
 
   constructor(
     private apisService: ApisService,
@@ -74,11 +75,12 @@ export class DetailComponent implements OnInit {
       detail.gallery.forEach((e) => {
         if(!e.main) {
           this.galleryImages.push({
-            url: `${e.url}`,
+            url: `${this.basePath}${e.url}`,
             altText: e.title,
             title: e.title,
             thumbnailUrl: `${this.basePath}${e.url}`
           })
+          this.loadedImages.push(true)
         }
       })
       this.details = detail
@@ -104,7 +106,9 @@ export class DetailComponent implements OnInit {
   }
 
 
-
+  onLoad(index): void {
+    this.loadedImages[index] = false
+  }
 
 
 

src/app/portfolio/portfolio.component.html

@@ -3,7 +3,8 @@
     <div class="row">
       <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + item.width" *ngFor="let item of portfolioItems">
         <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
-          <img class="image" [src]="basePath+item.image">
+          <img class="image" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">
+          <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
           <div class="text">
             <span class="title">{{item.title}}</span>
             <span class="type" *ngIf="section != 'exhibitions'">{{item.type}}</span>

src/app/portfolio/portfolio.component.ts

@@ -31,6 +31,8 @@ export class PortfolioComponent implements OnInit {
       let tot = 0
 
       this.portfolioItems.forEach((e) => {
+        e.loading = true
+
         switch (cnt) {
           case 0:
             width = Math.floor(Math.random()*3)+3
@@ -74,4 +76,8 @@ export class PortfolioComponent implements OnInit {
     this.router.navigate([`/detail/${section}/${id}`])
   }
 
+  onLoad(id): void {
+    this.portfolioItems.filter(item => item.id == id)[0].loading = false
+  }
+
 }

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
-  API_URL: `https://apis.dslak.it/`,
-  BASE_PATH: `https://apis.dslak.it/`
+  API_URL: `https://www.dslak.it/apis/`,
+  BASE_PATH: `https://www.dslak.it`
 }