Merge remote-tracking branch 'origin/v2' into oasis

# Conflicts:
#	app/Http/Controllers/User/AccountController.php
#	app/Http/helpers.php
#	public/mix-manifest.json
#	resources/js/components/FilesView/Icons/AlphabetIcon.vue
#	resources/js/components/FilesView/MobileActionButton.vue
#	resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
#	resources/js/views/Admin/Users/UserTabs/UserDetail.vue
#	resources/js/views/Upgrade/UpgradeBilling.vue
#	resources/views/index.blade.php
#	resources/views/vuefilemanager/invoice.blade.php
#	resources/views/vuefilemanager/others/color-template.blade.php

resources/js/views/Admin.vue

@@ -1,8 +1,17 @@
 <template>
     <section id="viewport">
 
+        <!--Mobile Navigation-->
+        <MobileNavigation />
+
+        <!--Confirm Popup-->
+        <Confirm />
+
+        <!-- Create language popup -->
+        <CreateLanguage/>
+
         <!--Navigation Sidebar-->
-        <MenuBar />
+        <MenuBar/>
 
         <ContentSidebar>
 
@@ -41,6 +50,14 @@
                             {{ $t('admin_menu.pages') }}
                         </div>
                     </router-link>
+                    <router-link :to="{name: 'Language'}" class="menu-list-item link">
+                        <div class="icon text-theme">
+                            <globe-icon size="17" />
+                        </div>
+                        <div class="label text-theme">
+                            {{ $t('admin_menu.languages') }}
+                        </div>
+                    </router-link>
                 </div>
             </ContentGroup>
 
@@ -72,9 +89,12 @@
 </template>
 
 <script>
-    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon } from 'vue-feather-icons'
+    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
     import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import CreateLanguage from '@/components/Others/CreateLanguage'
     import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import Confirm from '@/components/Others/Popup/Confirm'
     import MenuBar from '@/components/Sidebar/MenuBar'
     import { mapGetters } from 'vuex'
 
@@ -84,6 +104,8 @@
             ...mapGetters(['config']),
         },
         components: {
+            MobileNavigation,
+            CreateLanguage,
             ContentSidebar,
             CreditCardIcon,
             FileTextIcon,
@@ -92,6 +114,8 @@
             SettingsIcon,
             MonitorIcon,
             UsersIcon,
+            GlobeIcon,
+            Confirm,
             MenuBar,
             BoxIcon,
         },

resources/js/views/Admin/AppSettings/AppSettings.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
 

resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue

@@ -26,13 +26,12 @@
 
                 <FormLabel class="mt-70">{{ $t('admin_settings.appearance.section_appearance') }}</FormLabel>
 
-                <!--TODO: add language-->
                 <div class="block-wrapper">
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
                         <div class="inline-wrapper">
                             <div class="switch-label">
-                                <label class="input-label">Color Theme:</label>
-                                <small class="input-help">Your color change will be visible after app refresh.</small>
+                                <label class="input-label">{{ $t('color_theme') }}:</label>
+                                <small class="input-help">{{ $t('color_theme_description') }}</small>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </div>
                             <input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"
@@ -62,6 +61,22 @@
                         <ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
                     </ValidationProvider>
                 </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('og_image') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+                        <ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
+                        <small class="input-help">{{ $t('og_image_description') }}</small>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('app_touch_icon') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+                        <ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
+                        <small class="input-help">{{ $t('app_touch_icon_description') }}</small>
+                    </ValidationProvider>
+                </div>
             </div>
         </PageTabGroup>
     </PageTab>
@@ -106,7 +121,7 @@
         mounted() {
             axios.get('/api/admin/settings', {
                 params: {
-                    column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color'
+                    column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color|app_og_image|app_touch_icon'
                 }
             })
                 .then(response => {
@@ -117,6 +132,8 @@
                         title: response.data.app_title,
                         color: response.data.app_color,
                         logo: response.data.app_logo,
+                        og_image: response.data.app_og_image,
+                        touch_icon: response.data.app_touch_icon,
                     }
                 })
                 .finally(() => {

resources/js/views/Admin/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="single-page">
         <div id="page-content" v-if="! isLoading && data">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="dashboard-headline">
                 <div class="logo">
@@ -10,7 +10,7 @@
                     </a>
                 </div>
                 <div class="metadata">
-                    <a href="https://vuefilemanager.com/changelog" target="_blank" class="meta">
+                    <a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="meta">
                         <span class="meta-title">{{ $t('admin_page_dashboard.version') }}:</span>
                         <ColorLabel color="purple">
                             {{ data.app_version }}

resources/js/views/Admin/Invoices.vue

@@ -3,8 +3,8 @@
 
         <!--Page Content-->
         <div id="page-content" v-show="! isLoading && config.stripe_public_key">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page" v-if="config.stripe_public_key">
                 <DatatableWrapper @data="invoices = $event" @init="isLoading = false" api="/api/admin/invoices" :paginator="false" :columns="columns" class="table">

resources/js/views/Admin/Languages/Language.vue

@@ -0,0 +1,365 @@
+<template>
+    <div id="single-page">
+        <div id="page-content">
+            <MobileHeader :title="$t('routes_title.language')" />
+            <PageHeader :title="$t('routes_title.language')" />
+
+            <div v-if="languages" class="content-page">
+
+                <!--Sidebar-->
+                <div class="side-content">
+
+                    <div class="sticky top-65">
+                        <div class="languages-wrapper page-tab from-fixed-width">
+                            <div class="language-label-wrapper">
+                                <label class="language-label">{{ $t('languages') }}</label>
+                            </div>
+
+                            <!-- Languages -->
+                            <div class="all-language-wrapper">
+                                <div @click="getLanguage(language)" v-for="language in languages" :key="language.data.id" class="language group">
+                                    <label class="name" :class="{'active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale}">
+                                        <span class="active-text-theme group-hover-text-theme">{{ language.data.attributes.name }}</span>
+                                    </label>
+                                    <x-icon
+                                        v-if="language.data.attributes.locale !== 'en'"
+                                        @click.stop="deleteLanguage(language)"
+                                        class="icon"
+                                        size="17"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <MobileActionButton @click.native="createLanguage" icon="plus" class="button-add-language">
+                            {{ $t('add_language') }}
+                        </MobileActionButton>
+                    </div>
+                </div>
+
+                <!--Content-->
+                <div class="form block-form content">
+
+                    <Spinner v-if="! selectedLanguage" />
+
+                    <div v-if="selectedLanguage">
+                        <FormLabel icon="settings">
+                            {{ $t('language_settings') }}
+                        </FormLabel>
+
+                        <!--Language name-->
+                        <div class="block-wrapper">
+                            <label>{{ $t('language_name') }}:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
+                                <input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name"
+                                       :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Set default language-->
+                        <div class="block-wrapper">
+                            <div class="input-wrapper">
+                                <div class="inline-wrapper">
+                                    <div class="switch-label">
+                                        <label class="input-label">
+                                            {{ $t('set_as_default_language') }}:
+                                        </label>
+                                        <small class="input-help">
+                                            If this language is set as default, app will appear in this language for all users.
+                                        </small>
+                                    </div>
+                                    <SwitchInput
+                                        @input="setDefaultLanguage"
+                                        class="switch"
+                                        :class="{'disable-switch': selectedLanguage.data.attributes.locale === this.defaultLanguageLocale }"
+                                        :state="selectedLanguage.data.attributes.locale === this.defaultLanguageLocale"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!--Translations-->
+                        <FormLabel class="mt-70">
+                            {{ $t('edit_translations') }}
+                        </FormLabel>
+
+                        <InfoBox class="info-box">
+                            <p>Please preserve in your translations special string variables defined in format as <b class="text-theme">:variable</b> or <b class="text-theme">{variable}</b>.</p>
+                        </InfoBox>
+
+                        <!--Inline Search-->
+                        <div class="block-wrapper sticky top-50 search-bar-wrapper">
+                            <SearchInput v-model="query" @reset-query="query = ''" />
+                        </div>
+
+                        <!--Translation-->
+                        <div class="block-wrapper" v-for="(translation, key) in translationList" :key="key">
+                            <label> {{ referenceTranslations[key] }}:</label>
+                            <ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
+                                <input type="text"
+                                       :class="{'is-error': errors[0]}"
+                                       class="focus-border-theme"
+                                       @input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
+                                       v-model="selectedLanguage.data.attributes.translations[key]"
+                                />
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Spinner v-if="! languages" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import SearchInput from '@/components/Others/Forms/SearchInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import {PlusIcon, XIcon} from 'vue-feather-icons'
+    import {debounce, omitBy} from 'lodash'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'Language',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            MobileActionButton,
+            MobileHeader,
+            SearchInput,
+            SwitchInput,
+            ButtonBase,
+            PageHeader,
+            FormLabel,
+            PlusIcon,
+            InfoBox,
+            Spinner,
+            XIcon
+        },
+        data() {
+            return {
+                searchedTranslationResults: undefined,
+                referenceTranslations: undefined,
+
+                defaultLanguageLocale: undefined,
+                selectedLanguage: undefined,
+                languages: undefined,
+                query: '',
+            }
+        },
+        watch: {
+            query: debounce(function (val) {
+                this.searchedTranslationResults = omitBy(this.selectedLanguage.data.attributes.translations, string => {
+                    return !string.toLowerCase().includes(val.toLowerCase())
+                })
+            }, 300),
+        },
+        computed: {
+            translationList() {
+                return this.searchedTranslationResults && this.query !== ''
+                    ? this.searchedTranslationResults
+                    : this.selectedLanguage.data.attributes.translations
+            }
+        },
+        methods: {
+            setDefaultLanguage() {
+                this.$updateText('/admin/settings', 'language', this.selectedLanguage.data.attributes.locale)
+                this.defaultLanguageLocale = this.selectedLanguage.data.attributes.locale
+            },
+            getLanguages() {
+                axios
+                    .get('/api/admin/languages')
+                    .then(response => {
+                        this.languages = response.data.data
+                        this.referenceTranslations = response.data.meta.reference_translations
+                        this.selectedLanguage = response.data.meta.current_language
+                        this.defaultLanguageLocale = response.data.meta.current_language.data.attributes.locale
+                    })
+                    .catch(() => {
+                        this.$isSomethingWrong()
+                    })
+            },
+            getLanguage(language) {
+                this.selectedLanguage = undefined
+
+                axios
+                    .get(`/api/admin/languages/${language.data.id}`)
+                    .then(response => {
+                        this.selectedLanguage = response.data
+                    })
+                    .catch(() => {
+                        this.$isSomethingWrong()
+                    })
+            },
+            deleteLanguage(language) {
+                events.$emit('confirm:open', {
+                    title: `Delete "${language.data.attributes.name}" language?`,
+                    message: 'Your language will be permanently deleted.',
+                    buttonColor: 'danger-solid',
+                    action: {
+                        id: language.data.id,
+                        operation: 'delete-language'
+                    }
+                })
+            },
+            createLanguage() {
+                events.$emit('popup:open', {name: 'create-language'})
+            },
+        },
+        mounted() {
+            this.getLanguages()
+
+            events.$on('reload:languages', () => this.getLanguages())
+
+            events.$on('action:confirmed', data => {
+
+                if (data.operation === 'delete-language')
+                    axios.delete(`/api/admin/languages/${data.id}`)
+                        .then(() => this.getLanguages())
+                        .catch(() => this.$isSomethingWrong())
+            })
+        },
+        destroyed() {
+            events.$off('action:confirmed')
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vuefilemanager/_variables';
+@import '@assets/vuefilemanager/_mixins';
+@import '@assets/vuefilemanager/_forms';
+@import '@assets/vuefilemanager/_vuewind';
+
+.search-bar-wrapper {
+    background: white;
+    padding: 10px 10px 0 10px;
+    margin: 0 -10px;
+}
+
+.content-page {
+    display: flex;
+    max-width: 1000px;
+    margin: 20px auto 0;
+
+    .content {
+        width: 100%;
+        position: relative;
+    }
+}
+
+.disable-switch {
+    cursor: not-allowed;
+
+    /deep/ .text-right {
+        pointer-events: none;
+    }
+}
+
+.info-box {
+    margin-bottom: 12px;
+}
+
+.side-content {
+    flex: 0 0 225px;
+
+    .button-add-language {
+        margin-top: 30px;
+    }
+
+    .languages-wrapper {
+
+        .language-label-wrapper {
+            margin-bottom: 5px;
+
+            .language-label {
+                color: $light_text;
+                font-weight: 700;
+                @include font-size(12);
+                margin-top: 20px;
+            }
+        }
+
+        .all-language-wrapper {
+
+            .language {
+                display: flex;
+                align-items: center;
+                padding: 12px 25px 12px 0px;
+                cursor: pointer;
+
+                &:hover {
+                    .icon {
+                        display: block;
+                    }
+                }
+
+                .name {
+                    color: $text;
+                    font-weight: 700;
+                    @include font-size(13);
+                    cursor: pointer;
+                }
+
+                .icon {
+                    display: none;
+                    margin-left: auto;
+                    cursor: pointer;
+                }
+
+            }
+
+        }
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    .wrapper {
+        flex-direction: column;
+
+        .side-content {
+            margin-bottom: 70px;
+        }
+
+        .languages-wrapper {
+            margin-top: 0px;
+        }
+    }
+}
+
+@media only screen and (max-width: 690px) {
+    .side-content {
+        margin-bottom: 35px !important;
+        flex: none;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .search-bar-wrapper {
+        background: $dark_mode_background;
+    }
+
+    .language {
+
+        .name {
+            color: $dark_mode_text_primary !important;
+        }
+    }
+
+    .language-label {
+        color: $dark_mode_text_secondary !important;
+    }
+}
+</style>

resources/js/views/Admin/Pages.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" v-show="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
                 <DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">

resources/js/views/Admin/Pages/PageEdit.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" v-if="! isLoading && page">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
                 <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">

resources/js/views/Admin/Plans.vue

@@ -3,8 +3,8 @@
 
         <!--Stripe plans-->
         <div id="page-content" v-show="stripeConfiguredWithPlans">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page" v-if="config.stripe_public_key">
                 <div class="table-tools">

resources/js/views/Admin/Plans/Plan.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" v-if="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
 

resources/js/views/Admin/Plans/PlanCreate.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" class="small-width">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
                 <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">

resources/js/views/Admin/Users.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
 

resources/js/views/Admin/Users/User.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" v-if="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
             <div class="content-page">
 
                 <!--User thumbnail-->

resources/js/views/Admin/Users/UserCreate.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page">
         <div id="page-content" class="small-width">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
 
             <div class="content-page">
                 <ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
@@ -20,7 +20,7 @@
 
                         <!--Email-->
                         <div class="block-wrapper">
-                            <label>{{ $t('page_registration.label_email') }}</label>
+                            <label>{{ $t('page_registration.label_email') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
                                 <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -29,7 +29,7 @@
 
                         <!--Name-->
                         <div class="block-wrapper">
-                            <label>{{ $t('page_registration.label_name') }}</label>
+                            <label>{{ $t('page_registration.label_name') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
                                 <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -39,7 +39,7 @@
                         <!--Password-->
                         <div class="wrapper-inline">
                             <div class="block-wrapper">
-                                <label>{{ $t('page_registration.label_pass') }}</label>
+                                <label>{{ $t('page_registration.label_pass') }}:</label>
                                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
                                     <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -47,7 +47,7 @@
                             </div>
 
                             <div class="block-wrapper">
-                                <label>{{ $t('page_registration.label_confirm_pass') }}</label>
+                                <label>{{ $t('page_registration.label_confirm_pass') }}:</label>
                                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
                                     <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -63,7 +63,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('admin_page_user.select_role') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
-                                <SelectInput v-model="user.role" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
+                                <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>

resources/js/views/Admin/Users/UserTabs/UserDetail.vue

@@ -15,7 +15,7 @@
                 <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role" rules="required">
                     <label>{{ $t('admin_page_user.select_role') }}:</label>
                     <div class="single-line-form">
-                        <SelectInput v-model="userRole" :options="roles"
+                        <SelectInput v-model="userRole" :options="$translateSelectOptions(roles)"
                                      :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
                         <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
                                     button-style="theme" class="submit-button">
@@ -34,7 +34,7 @@
 
                 <!--Email-->
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <label>{{ $t('page_registration.label_email') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.data.attributes.email"
                                :placeholder="$t('page_registration.placeholder_email')"
@@ -46,7 +46,7 @@
 
                 <!--Name-->
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <label>{{ $t('page_registration.label_name') }}:</label>
                     <div class="input-wrapper">
                         <input :value="user.data.relationships.settings.data.attributes.name"
                                :placeholder="$t('page_registration.placeholder_name')"

resources/js/views/Auth/CreateNewPassword.vue

@@ -7,13 +7,13 @@
             <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
 
             <h1>{{ $t('page_create_password.title') }}</h1>
-            <h2>{{ $t('page_create_password.subtitle') }}</h2>
+            <h2>{{ $t('page_create_password.subtitle') }}:</h2>
 
             <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
                                 tag="form" class="form block-form create-new-password">
 
                 <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_email') }}</label>
+                    <label>{{ $t('page_create_password.label_email') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                         v-slot="{ errors }">
                         <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"

resources/js/views/Auth/ForgottenPassword.vue

@@ -7,7 +7,7 @@
             <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
 
             <h1>{{ $t('page_forgotten_password.title') }}</h1>
-            <h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
+            <h2>{{ $t('page_forgotten_password.subtitle') }}:</h2>
 
             <ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
                                 tag="form" class="form inline-form">

resources/js/views/Auth/SignIn.vue

@@ -7,7 +7,7 @@
             <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
 
             <h1>{{ $t('page_login.title') }}</h1>
-            <h2>{{ $t('page_login.subtitle') }}</h2>
+            <h2>{{ $t('page_login.subtitle') }}:</h2>
 
             <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
                                 class="form inline-form">
@@ -37,7 +37,7 @@
             <div class="user" v-if="checkedAccount">
                 <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
                 <h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
-                <h2>{{ $t('page_sign_in.subtitle') }}</h2>
+                <h2>{{ $t('page_sign_in.subtitle') }}:</h2>
             </div>
 
             <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"

resources/js/views/Auth/SignUp.vue

@@ -7,13 +7,13 @@
             <b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
 
             <h1>{{ $t('page_registration.title') }}</h1>
-            <h2>{{ $t('page_registration.subtitle') }}</h2>
+            <h2>{{ $t('page_registration.subtitle') }}:</h2>
 
             <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
 
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <label>{{ $t('page_registration.label_email') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                         v-slot="{ errors }">
                         <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
@@ -24,7 +24,7 @@
                 </div>
 
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <label>{{ $t('page_registration.label_name') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
                                         v-slot="{ errors }">
                         <input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
@@ -35,7 +35,7 @@
                 </div>
 
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_pass') }}</label>
+                    <label>{{ $t('page_registration.label_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
@@ -46,7 +46,7 @@
                 </div>
 
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_confirm_pass') }}</label>
+                    <label>{{ $t('page_registration.label_confirm_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"

resources/js/views/Mobile/AdminMobileMenu.vue

@@ -3,7 +3,7 @@
         <div id="page-content">
 
             <!--Header-->
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <!--Content-->
             <div class="content-page">
@@ -63,6 +63,13 @@
                         routeName: 'Pages',
                         isVisible: true,
                     },
+                    {
+                        icon: 'language',
+                        title: this.$t('languages'),
+                        routeName: 'Language',
+                        isVisible: true,
+
+                    }
                 ],
                 SassNavigation: [
                     {

resources/js/views/Mobile/UserProfileMobileMenu.vue

@@ -3,7 +3,7 @@
         <div id="page-content">
 
             <!--Header-->
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
             <!--Content-->
             <div class="content-page">

resources/js/views/Platform.vue

@@ -45,7 +45,7 @@
         <keep-alive :include="['Admin', 'Users']">
             <router-view :class="{'is-scaled-down': isScaledDown}" />
         </keep-alive>
-        </div>
+    </div>
 </template>
 
 <script>

resources/js/views/Profile.vue

@@ -68,7 +68,7 @@
 
         <div id="single-page" v-if="user">
             <div id="page-content" class="medium-width" v-if="! isLoading">
-                <MobileHeader :title="$router.currentRoute.meta.title"/>
+                <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
                 <div class="content-page">
 

resources/js/views/SetupWizard/AppSetup.vue

@@ -50,6 +50,22 @@
                     </ValidationProvider>
                 </div>
 
+                <div class="block-wrapper">
+                    <label>OG Image (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+                        <ImageInput v-model="app.og_image" :error="errors[0]"/>
+                        <small class="input-help">Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627</small>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>App Touch Icon (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+                        <ImageInput v-model="app.touch_icon" :error="errors[0]"/>
+                        <small class="input-help">If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156</small>
+                    </ValidationProvider>
+                </div>
+
                 <FormLabel class="mt-70">Others Information</FormLabel>
 
                 <div class="block-wrapper">
@@ -158,6 +174,8 @@
                     logo: undefined,
                     logo_horizontal: undefined,
                     favicon: undefined,
+                    og_image: undefined,
+                    touch_icon: undefined,
                     contactMail: '',
                     googleAnalytics: '',
                     defaultStorage: '5',
@@ -199,6 +217,12 @@
                 if (this.app.logo_horizontal)
                     formData.append('logo_horizontal', this.app.logo_horizontal)
 
+                if (this.app.og_image)
+                    formData.append('og_image', this.app.og_image)
+
+                if (this.app.touch_icon)
+                    formData.append('touch_icon', this.app.touch_icon)
+
                 if (this.app.favicon)
                     formData.append('favicon', this.app.favicon)
 

resources/js/views/Upgrade/UpgradeBilling.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="single-page">
         <div id="page-content" class="large-width center-page" v-show="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title" />
+            <MobileHeader :title="$t($router.currentRoute.meta.title)" />
             <div class="content-page">
                 <div class="plan-title">
                     <credit-card-icon size="42" class="title-icon text-theme" />

resources/js/views/Upgrade/UpgradePlan.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="single-page">
         <div id="page-content" class="large-width center-page" v-show="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
             <div class="content-page">
 
                 <!--Page Title-->

resources/js/views/User/Settings.vue

@@ -4,7 +4,7 @@
             <div class="form block-form">
                 <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <label>{{ $t('page_registration.label_email') }}:</label>
                     <div class="input-wrapper">
                         <input :value="userInfo.email"
                                :placeholder="$t('page_registration.placeholder_email')"
@@ -14,7 +14,7 @@
                     </div>
                 </div>
                 <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <label>{{ $t('page_registration.label_name') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="changeUserName"
                                v-model="userInfo.name"