Wip on terms & privacy page configurator

resources/js/Pages/Admin/Tabs.vue

@@ -25,21 +25,26 @@
                         to: this.route('admin.settings'),
                         active: this.route().current('admin.settings')
                     },
-                    {
-                        title: this.__('Alert messages'),
-                        to: this.route('admin.alerts.index'),
-                        active: this.route().current('admin.alerts.*')
-                    },
                     {
                         title: this.__('System'),
                         to: this.route('admin.system'),
                         active: this.route().current('admin.system')
                     },
+                    {
+                        title: this.__('Terms'),
+                        to: this.route('admin.settings.terms'),
+                        active: this.route().current('admin.settings.terms')
+                    },
+                    {
+                        title: this.__('Alert messages'),
+                        to: this.route('admin.alerts.index'),
+                        active: this.route().current('admin.alerts.*')
+                    },
                     {
                         title: this.__('Application logs'),
                         to: this.route('admin.application-logs'),
                         active: this.route().current('admin.application-logs')
-                    }
+                    },
                 ],
             }
         },

resources/js/Pages/Admin/Terms.vue

@@ -0,0 +1,179 @@
+<template>
+    <Page>
+        <TopBar/>
+
+        <Content>
+            <Container>
+                <PageHeader>
+                    <template #start>
+                        <PageHeaderTitle>{{ __('Terms') }}</PageHeaderTitle>
+                    </template>
+                </PageHeader>
+
+                <PageBody>
+                    <SettingsLayout>
+                        <template #nav>
+                            <Tabs/>
+                        </template>
+                        <template #segments>
+                            <SettingsSegment>
+                                <template #title>{{ __('Overview') }}</template>
+                                <template #subtitle>
+                                    {{
+                                        __('Enter content for your terms of service and privacy policy here. You may use markdown.')
+                                    }}
+                                </template>
+                                <template #form>
+                                    <form class="space-y-4" @submit.prevent="submit">
+                                        <div>
+                                            <input id="terms_required" class="form-checkbox" type="checkbox"
+                                                   v-model="form.terms_required">
+                                            <label for="terms_required" class="ml-2 text-sm">{{
+                                                    __('Require users to accept terms of service on registration')
+                                                }}</label>
+                                            <p class="text-small mt-1 text-medium-emphasis">
+                                                {{
+                                                    __('This will require newly registered users to accept the terms of service.')
+                                                }}
+                                            </p>
+                                        </div>
+
+                                        <Button type="button" size="sm" @click="getTemplate('terms')">
+                                            Load Terms of Service template
+                                        </Button>
+                                        <FormCustom label="Content Terms Of Service">
+                                            <vue-simplemde v-model="form.terms" ref="terms_of_service"/>
+                                        </FormCustom>
+                                        <FormCustom label="Content Privacy Policy">
+                                            <vue-simplemde v-model="form.privacy"/>
+                                        </FormCustom>
+                                        <FormActions>
+                                            <Button>{{ __('Save changes') }}</Button>
+                                        </FormActions>
+                                    </form>
+                                </template>
+                            </SettingsSegment>
+                        </template>
+                    </SettingsLayout>
+                </PageBody>
+            </Container>
+        </Content>
+    </Page>
+</template>
+
+<script>
+import TopBar from './components/TopBar'
+import Container from '@/components/Container'
+import Content from '@/components/Content'
+import Page from '@/components/Page'
+import PageHeader from '@/components/PageHeader'
+import PageHeaderTitle from '@/components/PageHeaderTitle'
+import PageBody from '@/components/PageBody'
+import Button from '@/components/Button'
+import List from '@/components/List'
+import ListItem from '@/components/ListItem'
+import StatusBubble from '@/components/StatusBubble'
+import NotificationBadge from '@/components/NotificationBadge'
+import MainLayout from '@/Layouts/MainLayout'
+import SettingsLayout from '@/components/layouts/SettingsLayout'
+import SettingsSegment from '@/components/SettingsSegment'
+import FormInput from '@/components/forms/FormInput'
+import FormFileInput from '@/components/forms/FormFileInput'
+import FormSelect from '@/components/forms/FormSelect'
+import Form from '@/components/Form'
+import FormActions from '@/components/FormActions'
+import FormCustom from '@/components/forms/FormCustom'
+import {useNotification} from '@/hooks/notification'
+import Tabs from './Tabs'
+import VueSimplemde from 'vue-simplemde'
+
+export default {
+    metaInfo() {
+        return {
+            title: `${this.__('Terms')}`,
+        }
+    },
+
+    layout: MainLayout,
+
+    components: {
+        TopBar,
+        Container,
+        Content,
+        Page,
+        PageHeader,
+        PageHeaderTitle,
+        PageBody,
+        Button,
+        List,
+        ListItem,
+        StatusBubble,
+        NotificationBadge,
+        FormInput,
+        FormFileInput,
+        FormSelect,
+        SettingsLayout,
+        SettingsSegment,
+        Form,
+        FormActions,
+        Tabs,
+        VueSimplemde,
+        FormCustom
+    },
+
+    data() {
+        return {
+            sending: false,
+
+            form: this.$inertia.form({
+                terms: this.settings.terms,
+                terms_required: this.settings.terms_required,
+                privacy: this.settings.privacy,
+            })
+        }
+    },
+
+    props: {
+        settings: Object,
+    },
+
+    methods: {
+        useNotification,
+
+        submit() {
+            this.form.patch(this.route('admin.settings.terms.update'));
+        },
+
+        getTemplate(type) {
+            axios.get(this.route('admin.settings.terms.template'))
+                .then(response => {
+                    this.$refs.terms_of_service.simplemde.value(response.data.content);
+                    this.form.terms = response.data.content;
+
+                    useNotification({
+                        variant: 'success',
+                        title: this.__(`Terms`),
+                        message: 'Template has been loaded in, do not forget to save.',
+                    })
+                })
+
+        }
+    }
+}
+</script>
+
+<style>
+@import '~simplemde/dist/simplemde.min.css';
+
+.editor-toolbar.fullscreen {
+    z-index: 50;
+}
+
+.CodeMirror-fullscreen {
+    z-index: 50;
+}
+
+.editor-preview-side {
+    z-index: 50;
+}
+</style>

resources/js/Pages/Auth/Login.vue

@@ -27,6 +27,12 @@
                             v-if="$page.props.settings.allow_registration" block>Register
                     </Button>
                 </div>
+
+                <TextDivider v-if="$page.props.settings.has_terms" :without-text="true"></TextDivider>
+
+                <div class="flex" v-if="$page.props.settings.has_terms">
+                    <inertia-link :href="route('page.show', 'terms-of-service')" class="text-medium-emphasis hover:text-high-emphasis border-b border-dotted">Terms Of Service</inertia-link>
+                </div>
             </form>
         </Container>
     </div>

resources/js/Pages/Pages/Terms.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="flex items-center justify-center w-full min-h-screen py-8 px-8">
+        <Container size="medium" class="py-4 space-y-8">
+            <div class="flex flex-col items-center space-y-5">
+                <img class="h-14" v-if="$page.props.settings.logo" :src="$page.props.settings.logo" />
+                <h1 class="font-semibold text-center text-heading">
+                    Terms of Service
+                </h1>
+            </div>
+            <TextDivider :without-text="true"></TextDivider>
+            <ul class="flex justify-between">
+                <li>
+                    <inertia-link :href="route('login')" class="text-medium-emphasis hover:text-high-emphasis border-b border-dotted">Back to login</inertia-link>
+                </li>
+            </ul>
+            <TextDivider :without-text="true"></TextDivider>
+            <div class="prose" v-html="content"></div>
+        </Container>
+    </div>
+</template>
+
+<script>
+import TextDivider from '@/components/TextDivider'
+import FormInput from '@/components/forms/FormInput'
+import Button from '@/components/Button'
+import Container from '@/components/Container'
+
+export default {
+    metaInfo: {title: 'Terms of Service'},
+
+    components: {
+        TextDivider,
+        FormInput,
+        Button,
+        Container,
+    },
+
+    props: {
+        content: {
+            type: String,
+            required: false
+        }
+    }
+}
+</script>

resources/js/components/Container.vue

@@ -8,6 +8,7 @@
 const baseClasses = 'w-full px-4 sm:px-8 mx-auto'
 const sizeClasses = {
     small: 'max-w-sm',
+    medium: 'max-w-xl',
     base: 'max-w-5xl',
     large: 'max-w-screen-xl',
     fluid: 'max-w-none',

resources/js/components/TextDivider.vue

@@ -1,8 +1,19 @@
 <template>
     <div class="relative flex items-center justify-center">
         <div class="absolute inset-x-0 w-full border-t border-low-emphasis"></div>
-        <div class="relative px-2 py-1 bg-surface-1 text-body text-medium-emphasis">
+        <div v-if="!withoutText" class="relative px-2 py-1 bg-surface-1 text-body text-medium-emphasis">
             <slot></slot>
         </div>
     </div>
 </template>
+
+<script>
+export default {
+    props: {
+        withoutText: {
+            type: Boolean,
+            default: false,
+        }
+    }
+}
+</script>

resources/js/components/forms/FormCustom.vue

@@ -0,0 +1,72 @@
+<template>
+    <FormGroup>
+        <Label :errors="errors" :forId="id">{{ label }}</Label>
+
+        <slot />
+        <ErrorText v-if="errors">{{ errors[0] }}</ErrorText>
+        <HelperText v-if="helperText && !errors">{{ helperText }}</HelperText>
+    </FormGroup>
+</template>
+
+<script>
+    import FormGroup from '@/components/FormGroup'
+    import Label from '@/components/Label'
+    import ErrorText from '@/components/ErrorText'
+    import HelperText from '@/components/HelperText'
+
+    const defaultClasses =
+        'w-full border-medium-emphasis text-body max-w-lg px-2 border rounded bg-surface-1 focus:outline-none focus:border-primary'
+
+    export default {
+        props: {
+            id: {
+                type: String,
+                required: false,
+            },
+            label: {
+                type: String,
+                required: true,
+            },
+            required: {
+                type: Boolean,
+                default: () => false,
+            },
+            errors: {
+                type: Array,
+            },
+            placeholder: {
+                type: String,
+            },
+            value: {
+                required: false,
+                default: '',
+            },
+            rows: {
+                default: 3,
+                required: false,
+            },
+            helperText: {
+                type: String
+            },
+        },
+
+        components: {
+            FormGroup,
+            Label,
+            ErrorText,
+            HelperText
+        },
+
+        data() {
+            return {
+                defaultClasses,
+            }
+        },
+
+        methods: {
+            updateValue(value) {
+                this.$emit('input', value);
+            },
+        },
+    }
+</script>