]> BookStack Code Mirror - bookstack/blob - resources/views/settings/index.blade.php
Changed color picker library and moved color logic to front end
[bookstack] / resources / views / settings / index.blade.php
1 @extends('base')
2
3 @section('content')
4
5     @include('settings/navbar', ['selected' => 'settings'])
6
7 <div class="container small">
8
9     <h1>Settings</h1>
10
11     <form action="/settings" method="POST">
12         {!! csrf_field() !!}
13
14         <h3>App Settings</h3>
15
16         <div class="row">
17             <div class="col-md-6">
18                 <div class="form-group">
19                     <label for="setting-app-name">Application name</label>
20                     <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
21                 </div>
22                 <div class="form-group">
23                     <label>Allow public viewing?</label>
24                     <toggle-switch name="setting-app-public" value="{{ Setting::get('app-public') }}"></toggle-switch>
25                 </div>
26                 <div class="form-group">
27                     <label>Enable higher security image uploads?</label>
28                     <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>
29                     <toggle-switch name="setting-app-secure-images" value="{{ Setting::get('app-secure-images') }}"></toggle-switch>
30                 </div>
31             </div>
32             <div class="col-md-6">
33                 <div class="form-group" id="logo-control">
34                     <label for="setting-app-logo">Application Logo</label>
35                     <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
36                     <image-picker resize-height="43" show-remove="true" resize-width="200" current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
37                 </div>
38                 <div class="form-group" id="color-control">
39                     <label for="setting-app-color">Application Primary Color</label>
40                     <p class="small">This should be a hex value. <br> Leave empty to reset to the default color.</p>
41                     <input  type="text" value="{{ Setting::get('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
42                     <input  type="hidden" value="{{ Setting::get('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
43                 </div>
44             </div>
45         </div>
46
47
48
49         <hr class="margin-top">
50
51         <h3>Registration Settings</h3>
52         <div class="row">
53             <div class="col-md-6">
54                 <div class="form-group">
55                     <label for="setting-registration-enabled">Allow registration?</label>
56                     <toggle-switch name="setting-registration-enabled" value="{{ Setting::get('registration-enabled') }}"></toggle-switch>
57                 </div>
58                 <div class="form-group">
59                     <label for="setting-registration-role">Default user role after registration</label>
60                     <select id="setting-registration-role" name="setting-registration-role" @if($errors->has('setting-registration-role')) class="neg" @endif>
61                         @foreach(\BookStack\Role::all() as $role)
62                             <option value="{{$role->id}}"
63                                     @if(\Setting::get('registration-role', \BookStack\Role::first()->id) == $role->id) selected @endif
64                                     >
65                                 {{ $role->display_name }}
66                             </option>
67                         @endforeach
68                     </select>
69                 </div>
70                 <div class="form-group">
71                     <label for="setting-registration-confirmation">Require email confirmation?</label>
72                     <p class="small">If domain restriction is used then email confirmation will be required and the below value will be ignored.</p>
73                     <toggle-switch name="setting-registration-confirmation" value="{{ Setting::get('registration-confirmation') }}"></toggle-switch>
74                 </div>
75             </div>
76             <div class="col-md-6">
77                 <div class="form-group">
78                     <label for="setting-registration-restrict">Restrict registration to domain</label>
79                     <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.
80                         <br> Note that users will be able to change their email addresses after successful registration.</p>
81                     <input type="text" id="setting-registration-restrict" name="setting-registration-restrict" placeholder="No restriction set" value="{{ Setting::get('registration-restrict', '') }}">
82                 </div>
83             </div>
84         </div>
85
86         <hr class="margin-top">
87
88         <div class="form-group">
89             <button type="submit" class="button pos">Save Settings</button>
90         </div>
91     </form>
92
93 </div>
94
95 @include('partials/image-manager', ['imageType' => 'system'])
96
97 @stop
98
99 @section('scripts')
100     <script src="/libs/jq-color-picker/tiny-color-picker.min.js?version=1.0.0"></script>
101     <script type="text/javascript">
102         $('#setting-app-color').colorPicker({
103             opacity: false,
104             renderCallback: function($elm, toggled) {
105                 var hexVal = '#' + this.color.colors.HEX;
106                 var rgb = this.color.colors.RND.rgb;
107                 var rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
108                 // Set textbox color to hex color code.
109                 var isEmpty = $.trim($elm.val()).length === 0;
110                 if (!isEmpty) $elm.val(hexVal);
111                 $('#setting-app-color-light').val(isEmpty ? '' : rgbLightVal);
112                 // Set page elements to provide preview
113                 $('#header, .image-picker .button').css('background-color', hexVal);
114                 $('.faded-small').css('background-color', rgbLightVal);
115                 $('.setting-nav a.selected').css('border-bottom-color', hexVal);
116             }
117         });
118     </script>
119 @stop