Added popever to write the telegram message when sharing.

Packaging improvements.
Updated some dependencies.
Allow Facebook bots to display the preview.

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.3 [dev]
++ Added popever to write the telegram message when sharing.
++ Packaging improvements.
++ Updated some dependencies.
++ Allow Facebook bots to display the preview.
+
 ## v1.2
 + Previews are now scaled for better page load.
 + Added auto config generator for ShareX.

Gruntfile.js

@@ -1,73 +1,73 @@
-module.exports = function(grunt) {
-	grunt.initConfig({
-		pkg: grunt.file.readJSON('package.json'),
+module.exports = function (grunt) {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
 
-		jshint: {
-		    all: ['Gruntfile.js', 'src/js/app.js']
-	  	},
+        jshint: {
+            all: ['Gruntfile.js', 'src/js/app.js']
+        },
 
-		cssmin: {
-			build: {
-				files: {
-					'static/app/app.css': 	[
-													'src/css/app.css'
-												]
-				}
-			}
-		},
+        cssmin: {
+            build: {
+                files: {
+                    'static/app/app.css': [
+                        'src/css/app.css'
+                    ]
+                }
+            }
+        },
 
-		uglify: {
-			options: {
-				preserveComments: false,
-				compress: true
-			},
-			build: {
-				files: {
-					'static/app/app.js':   [
-												'src/js/app.js'
-											],
-				}
-			}
-		},
+        uglify: {
+            options: {
+                preserveComments: false,
+                compress: true
+            },
+            build: {
+                files: {
+                    'static/app/app.js': [
+                        'src/js/app.js'
+                    ],
+                }
+            }
+        },
 
-		watch: {
-			css: {
-				files: 	[
-							'src/css/app.css'
-						],
+        watch: {
+            css: {
+                files: [
+                    'src/css/app.css'
+                ],
 
-				tasks: ['cssmin']
-			},
-			scripts: {
-				files: 	[
-							'src/js/app.js',
-						],
+                tasks: ['cssmin']
+            },
+            scripts: {
+                files: [
+                    'src/js/app.js',
+                ],
 
-				tasks: ['uglify']
-			}
-		},
+                tasks: ['uglify']
+            }
+        },
 
-		copy: {
-			main: {
-				files: [
-					{expand: true, cwd: 'src/fontawesome', src: ['**'], dest: 'static/fontawesome'},
-					{expand: true, cwd: 'node_modules/bootstrap/dist', src: ['**'], dest: 'static/bootstrap'},
-					{expand: true, cwd: 'node_modules/clipboard/dist', src: ['**'], dest: 'static/clipboardjs'},
-					{expand: true, cwd: 'node_modules/highlightjs', src: ['styles/**/*','highlight.pack.min.js'], dest: 'static/highlightjs'},
-					{expand: true, cwd: 'node_modules/jquery/dist', src: ['jquery.min.js'], dest: 'static/jquery'}
-				],
-			},
-		},
+        copy: {
+            main: {
+                files: [
+                    {expand: true, cwd: 'node_modules/@fortawesome/fontawesome-free', src: ['css/**', 'js/**'], dest: 'static/fontawesome'},
+                    {expand: true, cwd: 'node_modules/bootstrap/dist', src: ['**'], dest: 'static/bootstrap'},
+                    {expand: true, cwd: 'node_modules/clipboard/dist', src: ['**'], dest: 'static/clipboardjs'},
+                    {expand: true, cwd: 'node_modules/highlightjs', src: ['styles/**/*', 'highlight.pack.min.js'], dest: 'static/highlightjs'},
+                    {expand: true, cwd: 'node_modules/jquery/dist', src: ['jquery.min.js'], dest: 'static/jquery'}
+                ],
+            },
+        },
 
-		zip: {
-	      'release.zip': ['app/**/*', 'bin/**/*', 'bootstrap/**/*', 'logs/**/*', 'resources/**/*', 'static/**/*', '.htaccess', 'config.example.php', 'index.php', 'vendor']
-	    }
+        zip: {
+            'release.zip': ['app/**/*', 'bin/**/*', 'bootstrap/**/*', 'logs/**/*', 'resources/**/', 'static/**/*', '.htaccess', 'config.example.php', 'index.php', 'vendor']
+        }
 
-	});
+    });
 
-	require('load-grunt-tasks')(grunt);
-	grunt.registerTask('default', ['jshint', 'cssmin', 'uglify', 'copy']);
-	grunt.registerTask('test', ['jshint']);
-	grunt.registerTask('build-release', ['default', 'zip']);
+    require('load-grunt-tasks')(grunt);
+    grunt.registerTask('default', ['jshint', 'cssmin', 'uglify', 'copy']);
+    grunt.registerTask('test', ['jshint']);
+    grunt.registerTask('build-release', ['default', 'zip']);
 
 };

app/Controllers/UploadController.php

@@ -92,7 +92,9 @@ class UploadController extends Controller
 
 		$filesystem = $this->getStorage();
 
-		if (stristr(Flight::request()->user_agent, 'TelegramBot')) {
+		if (stristr(Flight::request()->user_agent, 'TelegramBot') ||
+			stristr(Flight::request()->user_agent, 'facebookexternalhit/') ||
+			stristr(Flight::request()->user_agent, 'Facebot')) {
 			$this->streamMedia($filesystem, $media);
 		} else {
 

app/Controllers/UserController.php

@@ -72,7 +72,7 @@ class UserController extends Controller
 		}
 
 		do {
-			$userCode = substr(bin2hex(random_bytes(3)), 5);
+			$userCode = substr(md5(microtime()), rand(0, 26), 5);
 		} while (DB::query('SELECT COUNT(*) AS `count` FROM `users` WHERE `user_code` = ?', $userCode)->fetch()->count > 0);
 
 		$token = $this->generateNewToken();
@@ -329,7 +329,7 @@ class UserController extends Controller
 	protected function generateNewToken(): string
 	{
 		do {
-			$token = 'token_' . hash('sha256', microtime().random_bytes(256).uniqid('', true));
+			$token = 'token_' . md5(uniqid('', true));
 		} while (DB::query('SELECT COUNT(*) AS `count` FROM `users` WHERE `token` = ?', $token)->fetch()->count > 0);
 
 		return $token;

bin/migrate

@@ -83,7 +83,7 @@ foreach ($files as $file) {
 }
 
 if (isset($argv[1]) && $argv[1] === '--install') {
-	DB::query("INSERT INTO `users` (`email`, `username`, `password`, `is_admin`, `user_code`) VALUES ('admin@example.com', 'admin', ?, 1, ?)", [password_hash('admin', PASSWORD_DEFAULT),substr(bin2hex(random_bytes(3)), 5)]);
+	DB::query("INSERT INTO `users` (`email`, `username`, `password`, `is_admin`, `user_code`) VALUES ('admin@example.com', 'admin', ?, 1, ?)", [password_hash('admin', PASSWORD_DEFAULT), substr(md5(microtime()), rand(0, 26), 5)]);
 }
 
 echo 'Done.' . PHP_EOL;

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "sergix44/xbackbone",
-  "version": "1.2",
+  "version": "1.3",
   "description": "A lightweight ShareX PHP backend",
   "type": "project",
   "require": {

package.json

@@ -1,11 +1,12 @@
 {
   "dependencies": {
-    "bootstrap": "^4.1.1",
+    "bootstrap": "^4.1.3",
     "clipboard": "^2.0.1",
     "highlightjs": "^9.10.0",
     "jquery": "^3.3.1",
-    "popper.js": "^1.14.3",
-    "tooltip.js": "^1.2.0"
+    "popper.js": "^1.14.4",
+    "tooltip.js": "^1.3.0",
+    "@fortawesome/fontawesome-free": "^5.4.1"
   },
   "devDependencies": {
     "grunt": "^1.0",

resources/templates/base.twig

@@ -12,7 +12,7 @@
 	
 	<script src="{{ config.base_url }}/static/jquery/jquery.min.js"></script>
     <script src="{{ config.base_url }}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
-    <script src="{{ config.base_url }}/static/fontawesome/js/fontawesome-all.min.js"></script>
+    <script src="{{ config.base_url }}/static/fontawesome/js/all.min.js"></script>
     <script src="{{ config.base_url }}/static/highlightjs/highlight.pack.min.js"></script>
     <script src="{{ config.base_url }}/static/clipboardjs/clipboard.min.js"></script>
     <script src="{{ config.base_url }}/static/app/app.js"></script>

resources/templates/comp/footer.twig

@@ -1,6 +1,7 @@
 <footer class="footer">
     <div class="container-fluid">
         <div class="text-muted">Proudly powered by
-            XBackBone{% if session.logged %} v{{ PLATFORM_VERSION }}{% endif %}</div>
+            <a href="https://github.com/SergiX44/XBackBone">XBackBone{% if session.logged %} v{{ PLATFORM_VERSION }}{% endif %}</a>
+        </div>
     </div>
 </footer>

resources/templates/comp/navbar.twig

@@ -8,16 +8,19 @@
             <ul class="navbar-nav mr-auto">
                 <li class="nav-item">
                     <a href="{{ config.base_url }}/home" class="nav-link {{ request.url starts with '/home' ? 'active' }}"><i class="fas fa-fw fa-home"></i>
-                        Home</a>
+                        Home
+                    </a>
                 </li>
                 {% if session.admin %}
                     <li class="nav-item">
                         <a href="{{ config.base_url }}/users" class="nav-link {{ request.url starts with '/user' ? 'active' }}"><i class="fas fa-fw fa-users"></i>
-                            Users</a>
+                            Users
+                        </a>
                     </li>
                     <li class="nav-item">
                         <a href="{{ config.base_url }}/system" class="nav-link {{ request.url starts with '/system' ? 'active' }}"><i class="fas fa-fw fa-cog"></i>
-                            System</a>
+                            System
+                        </a>
                     </li>
                 {% endif %}
             </ul>

resources/templates/upload/public.twig

@@ -12,14 +12,14 @@
             <div class="collapse navbar-collapse" id="navbarCollapse">
                 <div class="ml-auto">
                     <a href="javascript:void(0)" class="btn btn-success my-2 my-sm-0 btn-clipboard" data-toggle="tooltip" title="Copy link" data-clipboard-text="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ extension }}"><i class="fas fa-link fa-lg fa-fw"></i></a>
-                    <a href="https://telegram.me/share/url?url={{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ extension }}&text={{ media.filename }}" class="btn btn-info my-2 my-sm-0" data-toggle="tooltip" title="Telegram" target="_blank"><i class="fab fa-telegram-plane fa-lg fa-fw"></i></a>
+                    <a href="javascript:void(0)" class="btn btn-info my-2 my-sm-0" data-html="true" title="Telegram Message" data-toggle="popover" data-placement="bottom" data-content='<input type="text" class="form-control mb-2" id="telegram-share-text" onclick="this.select()" value="{{ media.filename }}">
+<button type="button" class="btn btn-info btn-block" id="telegram-share-button" onclick="telegramShare()" data-url="https://telegram.me/share/url?url={{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ extension }}&text="><i class="fab fa-telegram-plane fa-lg fa-fw"></i> Send</button>'><i class="fab fa-telegram-plane fa-lg fa-fw"></i></a>
                     <a href="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ extension }}/raw" class="btn btn-light my-2 my-sm-0" data-toggle="tooltip" title="Show raw"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
                     <a href="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ extension }}/download" class="btn btn-danger my-2 my-sm-0" data-toggle="tooltip" title="Download"><i class="fas fa-cloud-download-alt fa-lg fa-fw"></i></a>
                 </div>
             </div>
         </div>
     </nav>
-
     <div class="container-fluid">
         <div class="row ml-auto mr-auto">
             <div class="col-md-12 justify-content-center">
@@ -75,5 +75,10 @@
             </div>
         </div>
     </div>
+    <script>
+        function telegramShare() {
+            $("<a>").attr("href", $('#telegram-share-button').data('url') + $('#telegram-share-text').val()).attr("target", "_blank")[0].click();
+        }
+    </script>
     {% include 'comp/footer.twig' %}
 {% endblock %}

src/fontawesome/css/fa-svg-with-js.css

@@ -1,455 +0,0 @@
-/*!
- * Font Awesome Free 5.0.9 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-svg:not(:root).svg-inline--fa {
-    overflow: visible;
-}
-
-.svg-inline--fa {
-    display: inline-block;
-    font-size: inherit;
-    height: 1em;
-    overflow: visible;
-    vertical-align: -.125em;
-}
-
-.svg-inline--fa.fa-lg {
-    vertical-align: -.225em;
-}
-
-.svg-inline--fa.fa-w-1 {
-    width: 0.0625em;
-}
-
-.svg-inline--fa.fa-w-2 {
-    width: 0.125em;
-}
-
-.svg-inline--fa.fa-w-3 {
-    width: 0.1875em;
-}
-
-.svg-inline--fa.fa-w-4 {
-    width: 0.25em;
-}
-
-.svg-inline--fa.fa-w-5 {
-    width: 0.3125em;
-}
-
-.svg-inline--fa.fa-w-6 {
-    width: 0.375em;
-}
-
-.svg-inline--fa.fa-w-7 {
-    width: 0.4375em;
-}
-
-.svg-inline--fa.fa-w-8 {
-    width: 0.5em;
-}
-
-.svg-inline--fa.fa-w-9 {
-    width: 0.5625em;
-}
-
-.svg-inline--fa.fa-w-10 {
-    width: 0.625em;
-}
-
-.svg-inline--fa.fa-w-11 {
-    width: 0.6875em;
-}
-
-.svg-inline--fa.fa-w-12 {
-    width: 0.75em;
-}
-
-.svg-inline--fa.fa-w-13 {
-    width: 0.8125em;
-}
-
-.svg-inline--fa.fa-w-14 {
-    width: 0.875em;
-}
-
-.svg-inline--fa.fa-w-15 {
-    width: 0.9375em;
-}
-
-.svg-inline--fa.fa-w-16 {
-    width: 1em;
-}
-
-.svg-inline--fa.fa-w-17 {
-    width: 1.0625em;
-}
-
-.svg-inline--fa.fa-w-18 {
-    width: 1.125em;
-}
-
-.svg-inline--fa.fa-w-19 {
-    width: 1.1875em;
-}
-
-.svg-inline--fa.fa-w-20 {
-    width: 1.25em;
-}
-
-.svg-inline--fa.fa-pull-left {
-    margin-right: .3em;
-    width: auto;
-}
-
-.svg-inline--fa.fa-pull-right {
-    margin-left: .3em;
-    width: auto;
-}
-
-.svg-inline--fa.fa-border {
-    height: 1.5em;
-}
-
-.svg-inline--fa.fa-li {
-    width: 2em;
-}
-
-.svg-inline--fa.fa-fw {
-    width: 1.25em;
-}
-
-.fa-layers svg.svg-inline--fa {
-    bottom: 0;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.fa-layers {
-    display: inline-block;
-    height: 1em;
-    position: relative;
-    text-align: center;
-    vertical-align: -.125em;
-    width: 1em;
-}
-
-.fa-layers svg.svg-inline--fa {
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
-.fa-layers-text, .fa-layers-counter {
-    display: inline-block;
-    position: absolute;
-    text-align: center;
-}
-
-.fa-layers-text {
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
-.fa-layers-counter {
-    background-color: #ff253a;
-    border-radius: 1em;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    color: #fff;
-    height: 1.5em;
-    line-height: 1;
-    max-width: 5em;
-    min-width: 1.5em;
-    overflow: hidden;
-    padding: .25em;
-    right: 0;
-    text-overflow: ellipsis;
-    top: 0;
-    -webkit-transform: scale(0.25);
-    transform: scale(0.25);
-    -webkit-transform-origin: top right;
-    transform-origin: top right;
-}
-
-.fa-layers-bottom-right {
-    bottom: 0;
-    right: 0;
-    top: auto;
-    -webkit-transform: scale(0.25);
-    transform: scale(0.25);
-    -webkit-transform-origin: bottom right;
-    transform-origin: bottom right;
-}
-
-.fa-layers-bottom-left {
-    bottom: 0;
-    left: 0;
-    right: auto;
-    top: auto;
-    -webkit-transform: scale(0.25);
-    transform: scale(0.25);
-    -webkit-transform-origin: bottom left;
-    transform-origin: bottom left;
-}
-
-.fa-layers-top-right {
-    right: 0;
-    top: 0;
-    -webkit-transform: scale(0.25);
-    transform: scale(0.25);
-    -webkit-transform-origin: top right;
-    transform-origin: top right;
-}
-
-.fa-layers-top-left {
-    left: 0;
-    right: auto;
-    top: 0;
-    -webkit-transform: scale(0.25);
-    transform: scale(0.25);
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-}
-
-.fa-lg {
-    font-size: 1.33333em;
-    line-height: 0.75em;
-    vertical-align: -.0667em;
-}
-
-.fa-xs {
-    font-size: .75em;
-}
-
-.fa-sm {
-    font-size: .875em;
-}
-
-.fa-1x {
-    font-size: 1em;
-}
-
-.fa-2x {
-    font-size: 2em;
-}
-
-.fa-3x {
-    font-size: 3em;
-}
-
-.fa-4x {
-    font-size: 4em;
-}
-
-.fa-5x {
-    font-size: 5em;
-}
-
-.fa-6x {
-    font-size: 6em;
-}
-
-.fa-7x {
-    font-size: 7em;
-}
-
-.fa-8x {
-    font-size: 8em;
-}
-
-.fa-9x {
-    font-size: 9em;
-}
-
-.fa-10x {
-    font-size: 10em;
-}
-
-.fa-fw {
-    text-align: center;
-    width: 1.25em;
-}
-
-.fa-ul {
-    list-style-type: none;
-    margin-left: 2.5em;
-    padding-left: 0;
-}
-
-.fa-ul > li {
-    position: relative;
-}
-
-.fa-li {
-    left: -2em;
-    position: absolute;
-    text-align: center;
-    width: 2em;
-    line-height: inherit;
-}
-
-.fa-border {
-    border: solid 0.08em #eee;
-    border-radius: .1em;
-    padding: .2em .25em .15em;
-}
-
-.fa-pull-left {
-    float: left;
-}
-
-.fa-pull-right {
-    float: right;
-}
-
-.fa.fa-pull-left,
-.fas.fa-pull-left,
-.far.fa-pull-left,
-.fal.fa-pull-left,
-.fab.fa-pull-left {
-    margin-right: .3em;
-}
-
-.fa.fa-pull-right,
-.fas.fa-pull-right,
-.far.fa-pull-right,
-.fal.fa-pull-right,
-.fab.fa-pull-right {
-    margin-left: .3em;
-}
-
-.fa-spin {
-    -webkit-animation: fa-spin 2s infinite linear;
-    animation: fa-spin 2s infinite linear;
-}
-
-.fa-pulse {
-    -webkit-animation: fa-spin 1s infinite steps(8);
-    animation: fa-spin 1s infinite steps(8);
-}
-
-@-webkit-keyframes fa-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes fa-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-.fa-rotate-90 {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.fa-rotate-180 {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.fa-rotate-270 {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-    -webkit-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
-.fa-flip-horizontal {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-    -webkit-transform: scale(-1, 1);
-    transform: scale(-1, 1);
-}
-
-.fa-flip-vertical {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-    -webkit-transform: scale(1, -1);
-    transform: scale(1, -1);
-}
-
-.fa-flip-horizontal.fa-flip-vertical {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-    -webkit-transform: scale(-1, -1);
-    transform: scale(-1, -1);
-}
-
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical {
-    -webkit-filter: none;
-    filter: none;
-}
-
-.fa-stack {
-    display: inline-block;
-    height: 2em;
-    position: relative;
-    width: 2em;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-    bottom: 0;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.svg-inline--fa.fa-stack-1x {
-    height: 1em;
-    width: 1em;
-}
-
-.svg-inline--fa.fa-stack-2x {
-    height: 2em;
-    width: 2em;
-}
-
-.fa-inverse {
-    color: #fff;
-}
-
-.sr-only {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.sr-only-focusable:active, .sr-only-focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-}

src/js/app.js

@@ -1,6 +1,7 @@
 var app = {
     run: function () {
         $('[data-toggle="tooltip"]').tooltip();
+        $('[data-toggle="popover"]').popover();
 
         $('.user-delete').click(app.modalDelete);
         $('.media-delete').click(app.mediaDelete);