Add mail support

* Allow sending emails with generated link
* Updated language support
* Added webbox config for storage lifetime
* Updated responsive design for modal
* Moved select storage lifetime to own vue component

Author: steve-ks

app/Console/Kernel.php

@@ -25,9 +25,9 @@ class Kernel extends ConsoleKernel
     protected function schedule(Schedule $schedule)
     {
         // Cleanup old upload directories
-        $schedule->command('upload:cleanup')->hourly();
+        $schedule->command('upload:cleanup')->everyFifteenMinutes();
         // Cleanup old storage directories
-        $schedule->command('storage:cleanup')->hourly();
+        $schedule->command('storage:cleanup')->everyFifteenMinutes();
     }
 
     /**

app/Http/Controllers/UploadController.php

@@ -2,11 +2,13 @@
 
 namespace App\Http\Controllers;
 
+use App\Mail\SharedLink;
 use App\Traits\SessionLifetime;
 use App\Traits\StorageTime;
 use App\Traits\StringAdditions;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
+use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Storage;
 use Intervention\Image\Exception\NotReadableException;
 use Intervention\Image\Facades\Image;
@@ -118,4 +120,19 @@ public function store(Request $request)
             'url' => 'share/'.$sessId
         ]);
     }
+
+    /**
+     * Send an email with the given session id as link
+     */
+    public function sendmail(Request $request)
+    {
+        $sessId = $request->session()->get('sessionid');
+        Mail::to($request->input('email'))
+          ->send(new SharedLink(
+            $sessId,
+            $this->getStorageTime($sessId)->isoFormat('LLLL')
+          ));
+
+        return response()->json(['success' => true]);
+    }
 }

app/Mail/SharedLink.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Mail;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Mail\Mailable;
+use Illuminate\Queue\SerializesModels;
+
+class SharedLink extends Mailable
+{
+    use Queueable, SerializesModels;
+
+    /**
+     * This is the shared link ending date
+     */
+    public $validUntil;
+    /**
+     * This is the shared link URL passed to the email
+     */
+    public $url;
+
+    /**
+     * Create a new message instance.
+     *
+     * @return void
+     */
+    public function __construct(string $path, string $validUntil)
+    {
+        $this->validUntil = $validUntil;
+        $this->url = preg_replace('/\/*$/', '', config('app.url')) . '/' . $path;
+    }
+
+    /**
+     * Build the message.
+     *
+     * @return $this
+     */
+    public function build()
+    {
+        // Use from address as given by config/mail.php
+        return $this->markdown('emails.shared.link');
+    }
+}

app/User.php

@@ -11,7 +11,7 @@
         "php": "^7.2.5",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^1.0",
-        "guzzlehttp/guzzle": "^6.3",
+        "guzzlehttp/guzzle": "^6.5",
         "illuminate/filesystem": "^7.5",
         "intervention/image": "^2.5",
         "laravel/framework": "^7.5",

composer.json

@@ -13,7 +13,7 @@
     |
     */
 
-    'default' => env('MAIL_MAILER', 'smtp'),
+    'default' => env('MAIL_MAILER', null),
 
     /*
     |--------------------------------------------------------------------------
@@ -83,8 +83,8 @@
     */
 
     'from' => [
-        'address' => env('MAIL_FROM_ADDRESS', '[email protected]'),
-        'name' => env('MAIL_FROM_NAME', 'Example'),
+        'address' => env('MAIL_FROM_ADDRESS', '[email protected]'),
+        'name' => env('MAIL_FROM_NAME', 'Shared Webbox Link'),
     ],
 
     /*

composer.lock

@@ -16,6 +16,10 @@
     // Maximum allowed file size in megabytes (should fit with php & webserver upload limits)
     'max_filesize' => env('MAX_FILESIZE_MB', '256'),
 
+    // Footer text, can also be empty
+    'footer_text' => env('FOOTER_TEXT', '© 2020 powered by KingStarter GbR'),
+    'footer_link' => env('FOOTER_LINK', 'https://kingstarter.de'),
+
     /*
     |--------------------------------------------------------------------------
     | Honeypot configuration
@@ -30,4 +34,38 @@
 
     // Honeypot field name for form input, should be a known field with some random chars
     'honeypot_field' => env('HONEYPOT_FIELD', 'phone_number_4f3dx'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Storage lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Set an array of possible storage lifetime durations when generating
+    | data links. The labels for generic time periods are translated
+    | automatically with singular and plural modifications added.
+    |
+    | NOTE: Cleanup schedules are set to everyFifteenMinutes, to provide
+    |       even shorter lifetimes, the app/Console/Kernel.php cleanup
+    |       schedules need to be called more frequently.
+    |
+    */
+
+    // Value format: /[0-9]+ [a-z]+/
+    'storage_lifetime' => [
+        '1 hour',
+        '6 hours',
+        '1 day',
+        '2 days',
+        '3 days',
+        '1 week',
+        '2 weeks',
+        '1 month',
+        '2 months',
+        '3 months',
+        '6 months',
+        '1 year',
+    ],
+
+    // The default lifetime should be one option within the storage duration array
+    'default_lifetime' => '1 month',
 ];

config/mail.php

@@ -4,7 +4,7 @@
     <div class="modal fixed flex z-20 top-0 left-0 w-full h-full overflow-auto backdrop justify-around pt-6 sm:pt-12 md:pt-32"
       v-if="show" @click.prevent="handleClick">
 
-      <div class="modal-container bg-white w-full sm:w-4/5 md:w-3/5 max-w-md h-64 sm:h-56 md:h-48 shadow" @click.prevent="handleClick">
+      <div class="modal-container bg-white w-full sm:w-4/5 md:w-3/5 max-w-md rounded" :class="modalHeight" @click.prevent="handleClick">
 
         <!-- Add margin if you want to see some of the overlay behind the modal-->
         <div class="modal-content py-4 text-left px-6">
@@ -20,15 +20,25 @@
           </div>
 
           <!--Body-->
-          <div class="w-full p-3 border rounded shadow bg-gray-100 truncate mb-4 sm:mb-3 md:mb-0" v-text="url"></div>
+          <div>
+            <div class="w-full p-3 border rounded shadow bg-gray-100 truncate mb-4 sm:mb-3" v-text="url + 'a'"></div>
+
+            <!-- Mail input -->
+            <div class="flex my-4" v-if="withmail">
+              <input type="email" class="form-control text-left rounded-r-none" v-model="email" @keyup.enter="sendEmail" :placeholder="$trans('email.placeholder')" />
+              <button class="btn btn-teal rounded-l-none" :title="$trans('link.email')" @click="sendEmail()" :class="btnClsDisabled" :disabled="!emailValid">
+                <span class="fa fa-envelope"></span>
+              </button>
+            </div>
+          </div>
 
           <!-- footer -->
-          <div class="w-full flex justify-around py-5 px-0 sm:px-2 md:px-5">
-            <button class="btn btn-teal w-40 text-center mr-2" @click="copyToClipboard">
+          <div class="w-full flex flex-col sm:flex-row justify-around items-center h-24 sm:h-20 pt-8 sm:pt-0">
+            <button class="btn btn-teal text-center w-56 sm:w-40 my-2 sm:my-0 sm:mr-2" @click="copyToClipboard">
               <span class="fa fa-copy"></span>
               <span v-trans="'link.copy'"></span>
             </button>
-            <button class="btn btn-teal w-40 text-center ml-2" @click="openPath">
+            <button class="btn btn-teal text-center w-56 sm:w-40 my-2 sm:my-0 sm:ml-2" @click="openPath">
               <span class="fa fa-external-link-alt"></span>
               <span v-trans="'link.open'"></span>
             </button>
@@ -49,13 +59,33 @@ export default {
       type: String,
       default: 'Modal title'
     },
-    url: String
+    url: String,
+    withmail: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      email: '',
+      sending: false
+    }
   },
 
   computed: {
     fullPath () {
       let basepath = window.location.href
       return basepath.endsWith('/') ? basepath + this.url : basepath + '/' + this.url
+    },
+    modalHeight () {
+      return this.withmail ? 'h-84 sm:h-72' : 'h-72 sm:h-56'
+    },
+    emailValid () {
+      return /\S+@\S+\.\S+/.test(this.email)
+    },
+    btnClsDisabled () {
+      return !this.emailValid || this.sending ? 'opacity-50 cursor-not-allowed' : ''
     }
   },
 
@@ -67,12 +97,24 @@ export default {
     emitModalClose () {
       this.$emit('close')
     },
+    openPath () {
+      window.open(this.fullPath)
+    },
     async copyToClipboard () {
       await navigator.clipboard.writeText(this.fullPath);
       this.$toastr.s(this.$trans('link.copied'));
     },
-    openPath () {
-      window.open(this.fullPath)
+    sendEmail () {
+      if (this.emailValid || this.sending) {
+        this.sending = true
+        this.$http.post('/sendmail', { 'email': this.email }).then(reponse => {
+          this.$toastr.s(this.$trans('email.send.succ'))
+        }).catch(err => {
+          this.$toastr.e(this.$trans('email.send.fail'))
+        }).then(() => {
+          this.sending = false
+        })
+      }
     }
   }
 }

config/webbox.php

@@ -0,0 +1,70 @@
+<template>
+  <select
+    v-bind="$attrs"
+    v-bind:value="value"
+    @change.prevent="onchange"
+  >
+    <option v-for="item in optionList" :key="item.value" :value="item.value" v-text="item.label"></option>
+  </select>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
+  props: ['value'],
+
+  data () {
+    return {
+      // Default storage lifetime array
+      values: [
+        '1 day',
+        '2 days',
+        '3 days',
+        '1 week',
+        '2 weeks',
+        '1 month',
+        '2 months',
+        '3 months',
+        '1 year',
+      ]
+    }
+  },
+
+  mounted () {
+    // Retrieve config array
+    if (window.config && Array.isArray(window.config.storageTimes) && window.config.storageTimes.length)
+      this.values = window.config.storageTimes
+  },
+
+  computed: {
+    optionList () {
+      let options = []
+      this.values.forEach(item => {
+        let parts = item.split(' ')
+        let msgcode = (parts.length > 1 ? 'time.' + parts[1] : 'timespan')
+        msgcode.endsWith('s') || (msgcode = msgcode+'s')
+        options.push({
+          value: item,
+          label: `${parts[0]} ${this.$choice(msgcode, parts[0])}`
+        })
+      })
+      return options
+    }
+  },
+
+  methods: {
+    // Enable v-model binding
+    onchange(event) {
+      // When emitted inline the parent model seems to stay unchanged,
+      // though moved event emitter to method
+      this.$emit('change', event.target.value);
+    }
+  }
+}
+</script>