X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/4e8722661faaf1f44d6884a48cbd301b40d194d8..refs/pull/1755/head:/resources/views/settings/index.blade.php

diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 1d4f2ebda..a52774186 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -1,130 +1,249 @@
-@extends('base')
+@extends('simple-layout')
 
-@section('content')
+@section('body')
+    <div class="container small">
 
-    @include('settings/navbar', ['selected' => 'settings'])
-
-<div class="container small settings-container">
-
-    <h1>Settings</h1>
+        <div class="grid left-focus v-center no-row-gap">
+            <div class="py-m">
+                @include('settings.navbar', ['selected' => 'settings'])
+            </div>
+            <div class="text-right p-m">
+                <a target="_blank" rel="noopener noreferrer" href="https://github.com/BookStackApp/BookStack/releases">
+                    BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+                </a>
+            </div>
+        </div>
 
-    <form action="/http/source.bookstackapp.com/settings" method="POST" ng-cloak>
-        {!! csrf_field() !!}
+        <div class="card content-wrap auto-height">
+            <h2 class="list-heading">{{ trans('settings.app_features_security') }}</h2>
+            <form action="{{ url("/http/source.bookstackapp.com/settings") }}" method="POST">
+                {!! csrf_field() !!}
+
+                <div class="setting-list">
+
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label for="setting-app-public" class="setting-list-label">{{ trans('settings.app_public_access') }}</label>
+                            <p class="small">{!! trans('settings.app_public_access_desc') !!}</p>
+                            @if(userCan('users-manage'))
+                                <p class="small mb-none">
+                                    <a href="{{ url($guestUser->getEditUrl()) }}">{!! trans('settings.app_public_access_desc_guest') !!}</a>
+                                </p>
+                            @endif
+                        </div>
+                        <div>
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-app-public',
+                                'value' => setting('app-public'),
+                                'label' => trans('settings.app_public_access_toggle'),
+                            ])
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.app_secure_images') }}</label>
+                            <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
+                        </div>
+                        <div>
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-app-secure-images',
+                                'value' => setting('app-secure-images'),
+                                'label' => trans('settings.app_secure_images_toggle'),
+                            ])
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.app_disable_comments') }}</label>
+                            <p class="small">{!! trans('settings.app_disable_comments_desc') !!}</p>
+                        </div>
+                        <div>
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-app-disable-comments',
+                                'value' => setting('app-disable-comments'),
+                                'label' => trans('settings.app_disable_comments_toggle'),
+                            ])
+                        </div>
+                    </div>
 
-        <h3>App Settings</h3>
 
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="setting-app-name">Application name</label>
-                    <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
-                </div>
-                <div class="form-group">
-                    <label>Allow public viewing?</label>
-                    <div toggle-switch name="setting-app-public" value="{{ setting('app-public') }}"></div>
                 </div>
-                <div class="form-group">
-                    <label>Enable higher security image uploads?</label>
-                    <p class="small">For performance reasons, all images are public by default, This option adds a random, hard-to-guess characters in front of image names. Ensure directory indexes are not enabled to prevent easy access.</p>
-                    <div toggle-switch name="setting-app-secure-images" value="{{ setting('app-secure-images') }}"></div>
-                </div>
-                <div class="form-group">
-                    <label for="setting-app-editor">Page editor</label>
-                    <p class="small">Select which editor will be used by all users to edit pages.</p>
-                    <select name="setting-app-editor" id="setting-app-editor">
-                        <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
-                        <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="form-group" id="logo-control">
-                    <label for="setting-app-logo">Application logo</label>
-                    <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
-                    <image-picker resize-height="43" show-remove="true" resize-width="200" current-image="{{ setting('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
-                </div>
-                <div class="form-group" id="color-control">
-                    <label for="setting-app-color">Application primary color</label>
-                    <p class="small">This should be a hex value. <br> Leave empty to reset to the default color.</p>
-                    <input  type="text" value="{{ setting('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
-                    <input  type="hidden" value="{{ setting('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
+
+                <div class="form-group text-right">
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
-            </div>
+            </form>
         </div>
 
+        <div class="card content-wrap auto-height">
+            <h2 class="list-heading">{{ trans('settings.app_customization') }}</h2>
+            <form action="{{ url("/http/source.bookstackapp.com/settings") }}" method="POST" enctype="multipart/form-data">
+                {!! csrf_field() !!}
+
+                <div class="setting-list">
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label for="setting-app-name" class="setting-list-label">{{ trans('settings.app_name') }}</label>
+                            <p class="small">{{ trans('settings.app_name_desc') }}</p>
+                        </div>
+                        <div>
+                            <input type="text" value="{{ setting('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-app-name-header',
+                                'value' => setting('app-name-header'),
+                                'label' => trans('settings.app_name_header'),
+                            ])
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.app_editor') }}</label>
+                            <p class="small">{{ trans('settings.app_editor_desc') }}</p>
+                        </div>
+                        <div>
+                            <select name="setting-app-editor" id="setting-app-editor">
+                                <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
+                                <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.app_logo') }}</label>
+                            <p class="small">{!! trans('settings.app_logo_desc') !!}</p>
+                        </div>
+                        <div>
+                            @include('components.image-picker', [
+                                     'removeName' => 'setting-app-logo',
+                                     'removeValue' => 'none',
+                                     'defaultImage' => url('/http/source.bookstackapp.com/logo.png'),
+                                     'currentImage' => setting('app-logo'),
+                                     'name' => 'app_logo',
+                                     'imageClass' => 'logo-image',
+                                 ])
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
+                            <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
+                        </div>
+                        <div setting-app-color-picker class="text-m-right">
+                            <input type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
+                            <input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
+                            <br>
+                            <button type="button" class="text-button text-muted mt-s mx-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button>
+                        </div>
+                    </div>
+
+                    <div homepage-control id="homepage-control" class="grid half gap-xl">
+                        <div>
+                            <label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
+                            <p class="small">{{ trans('settings.app_homepage_desc') }}</p>
+                        </div>
+                        <div>
+                            <select name="setting-app-homepage-type" id="setting-app-homepage-type">
+                                <option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option>
+                                <option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option>
+                                <option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option>
+                                <option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option>
+                            </select>
+
+                            <div page-picker-container style="display: none;" class="mt-m">
+                                @include('components.page-picker', ['name' => 'setting-app-homepage', 'placeholder' => trans('settings.app_homepage_select'), 'value' => setting('app-homepage')])
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div>
+                        <label for="setting-app-custom-head" class="setting-list-label">{{ trans('settings.app_custom_html') }}</label>
+                        <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
+                        <textarea name="setting-app-custom-head" id="setting-app-custom-head" class="simple-code-input mt-m">{{ setting('app-custom-head', '') }}</textarea>
+                        <p class="small text-right">{{ trans('settings.app_custom_html_disabled_notice') }}</p>
+                    </div>
 
 
-        <hr class="margin-top">
+                </div>
 
-        <h3>Registration Settings</h3>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="setting-registration-enabled">Allow registration?</label>
-                    <div toggle-switch name="setting-registration-enabled" value="{{ setting('registration-enabled') }}"></div>
+                <div class="form-group text-right">
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
-                <div class="form-group">
-                    <label for="setting-registration-role">Default user role after registration</label>
-                    <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
-                        @foreach(\BookStack\Role::all() as $role)
-                            <option value="{{$role->id}}"
-                                    @if(setting('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
+            </form>
+        </div>
+
+        <div class="card content-wrap auto-height">
+            <h2 class="list-heading">{{ trans('settings.reg_settings') }}</h2>
+            <form action="{{ url("/http/source.bookstackapp.com/settings") }}" method="POST">
+                {!! csrf_field() !!}
+
+                <div class="setting-list">
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.reg_enable') }}</label>
+                            <p class="small">{!! trans('settings.reg_enable_desc') !!}</p>
+                        </div>
+                        <div>
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-registration-enabled',
+                                'value' => setting('registration-enabled'),
+                                'label' => trans('settings.reg_enable_toggle')
+                            ])
+
+                            <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
+                            <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
+                                @foreach(\BookStack\Auth\Role::all() as $role)
+                                    <option value="{{$role->id}}" data-role-name="{{ $role->name }}"
+                                            @if(setting('registration-role', \BookStack\Auth\Role::first()->id) == $role->id) selected @endif
                                     >
-                                {{ $role->display_name }}
-                            </option>
-                        @endforeach
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label for="setting-registration-confirmation">Require email confirmation?</label>
-                    <p class="small">If domain restriction is used then email confirmation will be required and the below value will be ignored.</p>
-                    <div toggle-switch name="setting-registration-confirmation" value="{{ setting('registration-confirmation') }}"></div>
+                                        {{ $role->display_name }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label for="setting-registration-restrict" class="setting-list-label">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
+                            <p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
+                        </div>
+                        <div>
+                            <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="{{ trans('settings.reg_confirm_restrict_domain_placeholder') }}" value="{{ setting('registration-restrict', '') }}">
+                        </div>
+                    </div>
+
+                    <div class="grid half gap-xl">
+                        <div>
+                            <label class="setting-list-label">{{ trans('settings.reg_email_confirmation') }}</label>
+                            <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
+                        </div>
+                        <div>
+                            @include('components.toggle-switch', [
+                                'name' => 'setting-registration-confirmation',
+                                'value' => setting('registration-confirmation'),
+                                'label' => trans('settings.reg_email_confirmation_toggle')
+                            ])
+                        </div>
+                    </div>
+
                 </div>
-            </div>
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="setting-registration-restrict">Restrict registration to domain</label>
-                    <p class="small">Enter a comma separated list of email domains you would like to restrict registration to. Users will be sent an email to confirm their address before being allowed to interact with the application.
-                        <br> Note that users will be able to change their email addresses after successful registration.</p>
-                    <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="No restriction set" value="{{ setting('registration-restrict', '') }}">
+
+                <div class="form-group text-right">
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
-            </div>
+            </form>
         </div>
 
-        <hr class="margin-top">
+    </div>
 
-        <div class="form-group">
-            <span class="float right muted">
-                BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
-            </span>
-            <button type="submit" class="button pos">Save Settings</button>
-        </div>
-    </form>
-
-</div>
-
-@include('partials/image-manager', ['imageType' => 'system'])
-
-@stop
-
-@section('scripts')
-    <script src="/http/source.bookstackapp.com/libs/jq-color-picker/tiny-color-picker.min.js?version=1.0.0"></script>
-    <script type="text/javascript">
-        $('#setting-app-color').colorPicker({
-            opacity: false,
-            renderCallback: function($elm, toggled) {
-                var hexVal = '#' + this.color.colors.HEX;
-                var rgb = this.color.colors.RND.rgb;
-                var rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
-                // Set textbox color to hex color code.
-                var isEmpty = $.trim($elm.val()).length === 0;
-                if (!isEmpty) $elm.val(hexVal);
-                $('#setting-app-color-light').val(isEmpty ? '' : rgbLightVal);
-                // Set page elements to provide preview
-                $('#header, .image-picker .button').css('background-color', hexVal);
-                $('.faded-small').css('background-color', rgbLightVal);
-                $('.setting-nav a.selected').css('border-bottom-color', hexVal);
-            }
-        });
-    </script>
+    @include('components.image-manager', ['imageType' => 'system'])
+    @include('components.entity-selector-popup', ['entityTypes' => 'page'])
 @stop
\ No newline at end of file