Link expiration frontend

resources/js/components/Others/Forms/SelectBoxInput.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="select-box">
+        <div class="box-item"
+             :class="{'selected': item.value === value}"
+             @click="getSelectedValue(item)"
+             v-for="(item, i) in data" :key="i"
+        >
+            <span class="box-value">{{ item.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'SelectBoxInput',
+        props: ['data'],
+        data() {
+            return {
+                value: undefined,
+            }
+        },
+        methods: {
+            getSelectedValue(item) {
+                if (! this.value || this.value !== item.value)
+                    this.value = item.value
+                else
+                    this.value = undefined
+
+                this.$emit('input', this.value)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import "@assets/vue-file-manager/_forms.scss";
+
+    .select-box {
+        display: flex;
+        justify-content: space-between;
+
+        .box-item {
+            padding: 12px 14px;
+            background: $light_background;
+            border-radius: 8px;
+            font-weight: 700;
+            border: 2px solid $light_background;
+            cursor: pointer;
+
+            .box-value {
+                @include font-size(15);
+            }
+
+            &.selected {
+                background: rgba($theme, .1);
+                border-color: $theme;
+
+                .box-value {
+                    color: $theme;
+                }
+            }
+        }
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+</style>

resources/js/components/Others/ShareCreate.vue

@@ -32,6 +32,12 @@
                     <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
+
+                <!--Set expiration-->
+                <div class="input-wrapper">
+                    <label class="input-label">{{ $t('shared_form.label_expiration') }}:</label>
+                    <SelectBoxInput v-model="shareOptions.expiration" :data="expirationList" class="box"/>
+                </div>
             </ValidationObserver>
 
             <!--Copy generated link-->
@@ -66,6 +72,7 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import SelectBoxInput from '@/components/Others/Forms/SelectBoxInput'
     import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
     import PopupActions from '@/components/Others/Popup/PopupActions'
     import PopupContent from '@/components/Others/Popup/PopupContent'
@@ -85,6 +92,7 @@
         components: {
             ValidationProvider,
             ValidationObserver,
+            SelectBoxInput,
             ThumbnailItem,
             PopupWrapper,
             PopupActions,
@@ -110,8 +118,39 @@
         },
         data() {
             return {
+                expirationList: [
+                    {
+                        label: this.$t('shared_form.expiration_hour', {value: 1}),
+                        value: '1',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_hour', {value: 2}),
+                        value: '2',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_hour', {value: 6}),
+                        value: '6',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_hour', {value: 12}),
+                        value: '12',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_day', {value: 1}),
+                        value: '24',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_day', {value: 2}),
+                        value: '48',
+                    },
+                    {
+                        label: this.$t('shared_form.expiration_day', {value: 7}),
+                        value: '168',
+                    },
+                ],
                 shareOptions: {
                     isPassword: false,
+                    expiration: undefined,
                     password: undefined,
                     permission: undefined,
                     type: undefined,

resources/js/i18n/lang/cn.json

@@ -631,6 +631,9 @@
 		"label_password_protection": "密码保护",
 		"label_permission": "权限",
 		"label_shared_url": "分享链接",
+		"label_expiration": "Link Expiration",
+		"expiration_hour": "{value}h.",
+		"expiration_day": "{value}d.",
 		"placeholder_permission": "请设置权限"
 	},
 	"sidebar": {

resources/js/i18n/lang/en.json

@@ -631,6 +631,9 @@
 		"label_password_protection": "Password Protected",
 		"label_permission": "Permission",
 		"label_shared_url": "Share url",
+		"label_expiration": "Link Expiration",
+		"expiration_hour": "{value}h.",
+		"expiration_day": "{value}d.",
 		"placeholder_permission": "Select your permission"
 	},
 	"sidebar": {

resources/js/i18n/lang/sk.json

@@ -631,6 +631,9 @@
 		"label_password_protection": "Chrániť heslom",
 		"label_permission": "Oprávnenie",
 		"label_shared_url": "Zdieľací odkaz",
+		"label_expiration": "Expirácia Linku",
+		"expiration_hour": "{value}h.",
+		"expiration_day": "{value}d.",
 		"placeholder_permission": "Zvoľte oprávnenia"
 	},
 	"sidebar": {