Google adsense implementation

public/mix-manifest.json

@@ -71,5 +71,6 @@
     "/js/chunks/shared-with-me.js": "/js/chunks/shared-with-me.js",
     "/js/chunks/invitation.js": "/js/chunks/invitation.js",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/chunks/app-adsense.js": "/js/chunks/app-adsense.js"
 }

resources/js/components/FilesView/FileBrowser.vue

@@ -14,8 +14,6 @@
         tabindex="-1"
         @click.self="deselect"
     >
-		<!--<div v-html="config.ads"></div>-->
-
         <ItemHandler
             @click.native="hideContextMenu"
             @dragstart="dragStart(item)"

resources/js/routes/routesAdmin.js

@@ -312,6 +312,15 @@ const routesAdmin = [
                             title: 'Sign In/Up',
                         },
                     },
+                    {
+                        name: 'AppAdsense',
+                        path: '/admin/settings/adsense',
+                        component: () => import(/* webpackChunkName: "chunks/app-adsense" */ '../views/Admin/AppSettings/AppSettingsTabs/Adsense'),
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Adsense',
+                        },
+                    },
                 ],
             },
             {

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

@@ -33,6 +33,10 @@ export default {
                     title: this.$t('admin_settings.tabs.appearance'),
                     route: 'AppAppearance',
                 },
+                {
+                    title: this.$t('Adsense'),
+                    route: 'AppAdsense',
+                },
                 {
                     title: this.$t('Homepage'),
                     route: 'AppIndex',

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

@@ -0,0 +1,115 @@
+<template>
+    <PageTab>
+        <!--Adsense basic setup-->
+        <div v-if="adsense" class="card shadow-card">
+            <FormLabel>
+                {{ $t('Basic Setup') }}
+            </FormLabel>
+
+			<AppInputSwitch
+				:title="$t('Allow Google Adsense')"
+				:description="$t('Allow ads on app pages.')"
+			>
+                <SwitchInput
+					@input="$updateText('/admin/settings', 'allowed_adsense', adsense.allowedService)"
+					v-model="adsense.allowedService"
+					class="switch"
+					:state="adsense.allowedService"
+				/>
+            </AppInputSwitch>
+
+            <AppInputText :title="$t('Client Id')" :description="$t('Paste your Adsense Client ID e.g. ca-pub-XXXXXXXXXXXXXXXXX')" :is-last="true">
+                <input
+                    @input="$updateText('/admin/settings', 'adsense_client_id', adsense.clientId, true)"
+                    v-model="adsense.clientId"
+                    :placeholder="$t('Client Id...')"
+                    type="text"
+                    class="focus-border-theme input-dark"
+                />
+            </AppInputText>
+        </div>
+
+        <!--Adsense places-->
+        <div v-if="adsense" class="card shadow-card">
+            <FormLabel>
+                {{ $t('Ads') }}
+            </FormLabel>
+
+			<AppInputText :title="$t('File Viewport Banner')" :description="$t('This banner will be showed above user files')">
+                <textarea
+					rows="3"
+					@input="$updateText('/admin/settings', 'adsense_banner_01', adsense.banner01, true)"
+					v-model="adsense.banner01"
+					:placeholder="$t('Paste the <ins></ins> tag here...')"
+					type="text"
+					class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+
+			<AppInputText :title="$t('Download Page Banner')" :description="$t('This banner will be showed below file download page')">
+                <textarea
+					rows="3"
+					@input="$updateText('/admin/settings', 'adsense_banner_02', adsense.banner02, true)"
+					v-model="adsense.banner02"
+					:placeholder="$t('Paste the <ins></ins> tag here...')"
+					type="text"
+					class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+
+			<AppInputText :title="$t('Homepage Banner')" :description="$t('This banner will be showed on the homepage')" :is-last="true">
+                <textarea
+					rows="3"
+					@input="$updateText('/admin/settings', 'adsense_banner_03', adsense.banner03, true)"
+					v-model="adsense.banner03"
+					:placeholder="$t('Paste the <ins></ins> tag here...')"
+					type="text"
+					class="focus-border-theme input-dark"
+				/>
+            </AppInputText>
+        </div>
+    </PageTab>
+</template>
+
+<script>
+import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
+import AppInputButton from '../../../../components/Admin/AppInputButton'
+import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
+import FormLabel from '../../../../components/Others/Forms/FormLabel'
+import AppInputText from '../../../../components/Admin/AppInputText'
+import PageTab from '../../../../components/Others/Layout/PageTab'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Adsense',
+    components: {
+        AppInputButton,
+        AppInputSwitch,
+        AppInputText,
+        SwitchInput,
+        FormLabel,
+        PageTab,
+    },
+    computed: {
+        ...mapGetters(['config']),
+    },
+    data() {
+        return {
+            adsense: {
+                allowedService: undefined,
+                clientId: undefined,
+				banner01: undefined,
+            },
+        }
+    },
+    created() {
+        this.adsense = {
+			allowedService: this.config.allowedAdsense,
+			clientId: this.config.adsenseClientId,
+			banner01: this.config.adsenseBanner01,
+			banner02: this.config.adsenseBanner02,
+			banner03: this.config.adsenseBanner03,
+		}
+    },
+}
+</script>

resources/js/views/Frontpage/Homepage.vue

@@ -10,11 +10,14 @@
             <!--VueFileManager ScreenShot-->
             <HeroScreenshot />
 
+			<!--Google Adsense banner-->
+			<div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mb-5"></div>
+
             <!--Main Features-->
             <MainFeatures />
 
             <!--Pricing Tables-->
-            <!--            <PricingTables v-if="config.isSaaS" />-->
+            <!--<PricingTables v-if="config.isSaaS" />-->
 
             <!--Get Started Call To Action-->
             <GetStarted />

resources/js/views/Platform.vue

@@ -32,11 +32,17 @@
         <SidebarNavigation />
         <PanelNavigationFiles />
 
-        <div @contextmenu.prevent.capture="contextMenu($event, undefined)" class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5">
+        <div
+            @contextmenu.prevent.capture="contextMenu($event, undefined)"
+            class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
+        >
             <DesktopToolbar />
 
             <MobileToolbar />
 
+            <!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mb-5"></div>
+
             <!--File list & info sidebar-->
             <div class="flex space-x-3 lg:overflow-hidden">
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
@@ -96,7 +102,7 @@ export default {
         DragUI,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'isLimitedUser']),
+        ...mapGetters(['isVisibleSidebar', 'isLimitedUser', 'config']),
     },
     data() {
         return {

resources/js/views/Shared/SharedSingleFile.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="flex h-screen items-center justify-center">
-        <div>
+        <div class="w-full text-center">
             <ItemGrid v-if="sharedFile" :entry="sharedFile" :highlight="true" :mobile-handler="true" />
 
-            <ButtonBase @click.native="download" button-style="theme">
+            <ButtonBase @click.native="download" button-style="theme" class="mx-auto">
                 {{ $t('page_shared.download_file') }}
             </ButtonBase>
+
+			<!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mt-5"></div>
         </div>
     </div>
 </template>
@@ -22,7 +25,7 @@ export default {
         ItemGrid,
     },
     computed: {
-        ...mapGetters(['sharedDetail', 'sharedFile']),
+        ...mapGetters(['sharedDetail', 'sharedFile', 'config']),
     },
     methods: {
         download() {

resources/views/index.blade.php

@@ -143,6 +143,13 @@
 			allowedGithubLogin: {{ $settings->allowed_github_login ?? 0 }},
 			isGithubLoginConfigured: {{ env('GITHUB_CLIENT_ID') ? 1 : 0 }},
 
+            // Adsense
+            allowedAdsense: {{ $settings->allowed_adsense ?? 0 }},
+            adsenseClientId: '{{ $settings->adsense_client_id ?? '' }}',
+			adsenseBanner01: `{!! $settings->adsense_banner_01 ?? '' !!}`,
+			adsenseBanner02: `{!! $settings->adsense_banner_02 ?? '' !!}`,
+			adsenseBanner03: `{!! $settings->adsense_banner_03 ?? '' !!}`,
+
             // User settings
             defaultEmoji: '{{ $defaultEmoji }}',
             defaultThemeMode: '{{ $defaultThemeMode }}',
@@ -174,10 +181,13 @@
         <script src="{{ mix('js/main.js') }}"></script>
     @endif
 
-<!--    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8058330732865164" crossorigin="anonymous"></script>
+    {{--Adsense code--}}
+    @if($settings->allowed_adsense)
+        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ $settings->adsense_client_id }}" crossorigin="anonymous"></script>
 
-    <script>
+        <script>
-         (adsbygoogle = window.adsbygoogle || []).push({});
+             (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>-->
+        </script>
+    @endif
 </body>
 </html>