Version 1.4.6: Small fixes and additions

content/00-welcome/00-configure-your-system.txt

@@ -0,0 +1 @@
+["# configure your system","Content"]

content/00-welcome/00-configure-your-system.yaml

@@ -0,0 +1,9 @@
+meta:
+    title: ''
+    description: ''
+    owner: trendschau
+    author: 'Sebastian Schürmanns'
+    created: '2021-05-12'
+    time: 21-07-28
+    navtitle: 'configure your system'
+    modified: '2021-05-12'

content/00-welcome/00-setup.md

@@ -1,23 +0,0 @@
-# Setup
-
-Congratulations! If you see this page, then the setup of the system has worked successfully!! You can now login (/tm/login) and configure your system, your themes and your plugins. You will find all settings in the settings-area (/tm/settings).
-
-If you face any problems during the installation, then please make sure, that your system supports these features:
-
----
-
-- PHP version 7+.
-- Apache server.
-- The module `mod_rewrite` and `htaccess`.
-
-If you run a linux-system like Debian or Ubuntu, then please double check that `mod_rewrite` and `htaccess` are activated. Check this [issue on GitHub](https://github.com/typemill/typemill/issues/16) for help.
-
-Please make the following folders writable with permission 774 (you can use your ftp-software for it):
-
-- Cache
-- Content
-- Media
-- Settings
-
-If you still get an error, then you can post an issue on [GitHub](https://github.com/typemill/typemill).
-

content/00-welcome/02-write-content.md

@@ -2,6 +2,8 @@
 
 Typemill is a simple Flat File Content Management System (CMS). We (the community) work hard to provide the best author experience with easy and intuitive authoring tools. But Typemill is still in early development and it is likely that not everything will work perfectly out of the box. If you miss something or if you have ideas for improvements, then post a new issue on [GitHub](https://github.com/typemill/typemill/issues).
 
+![youtube-video](media/live/youtube-6i2-uv88gke.jpeg "click to load video"){#6I2-uV88GkE .youtube}
+
 ## The Navigation
 
 You can create, structure and reorder all pages with the navigation on the left side. To structure your content, you can create new folders and files with the "add item" button. To reorder the pages, just drag an item and drop it wherever you want. Play around with it and you will notice, that it works pretty similar to the folder- and file-system of your laptop. And in fact, this is exactly what Typemill does in the background: It stores your content in files and folders on the server.

content/00-welcome/02-write-content.yaml

@@ -0,0 +1,23 @@
+meta:
+    title: 'Write Content'
+    description: 'Typemill is a simple Flat File Content Management System (CMS). We (the community) work hard to provide the best author experience with easy and intuitive authoring tools. But Typemill is still in early development and it is likely that not everything will work perfectly out of the box.'
+    heroimage: ''
+    heroimagealt: 'Hero Alternative'
+    owner: null
+    author: 'Sebastian Schürmanns'
+    manualdate: null
+    modified: '2021-01-30'
+    created: null
+    time: null
+    navtitle: ''
+    hide: false
+    allowedrole: administrator
+    alloweduser: 'trendschau, testmember'
+seo:
+    heroimage: media/live/bildschirmfoto-zu-2019-08-30-20-46-29.png
+    heroimagealt: 'My Alt-Text'
+adamhall:
+    myfield:
+        -
+            key: b
+            value: 'Das muss eine schöne Sache sei'

content/00-welcome/03-restrict-access.md

@@ -0,0 +1,32 @@
+# restrict access
+
+Typemill has a build-in system to restrict access to pages or to the whole websites. You can activate both features in the system settings under the section "access rights". If you activate one of the features, then Typemill will use session cookies on all frontend pages.
+
+![youtube-video](media/live/youtube-uw-m-4g1kaa.jpeg "click to load video"){#UW_m-4g1kAA .youtube}
+
+## Restrict Access for the Website
+
+This feature is perfect, if you want to lock down the whole website and only grant access for authenticated users. All non-authenticated users will be redirected to the login-page. There are two main use cases for this feature:
+
+* **Launch the website later**: You want to create your website first and launch it to the public later, for example if you have finished the website design or if you have polished your content.
+* **Share website internally**: You want to share your typemill website only with certain users, for example with the company stuff or only with the members of your it-unit.
+
+You can activate the feature with a simple checkbox under "Website Restrictions". 
+
+## Restrict Access for Pages
+
+If you need a more fine-tuned access and if you want to restrict access only for certain pages, then you can activate the feature "Page Restrictions". If you activate this checkbox, then you will find two new input fields in the meta-tab of each page:
+
+* **Minimum role for access**: Here you can select a miminum role that the user needs to view the page content. Be aware that the roles have a hierarchy, so if you choose the role "author", then the "editor" will also have access.
+* **Usernames**: Here you can add one or more usernames (separated with comma) that have access to this page.
+
+If you don't choose anything of it, then the page has no restrictions and everybody can see the content.
+
+You have some more features in the settings area:
+
+* **Cut content**: Per default only the title of a restricted page is visible to the public, the content is hidden. You can change this and cut the content wherever you want with a horizontal line.
+* **Teaser**: You can add a standard text with markdown that will be displayed instead of the content or after the content is cut.
+* **Teaser-Box**: You can optionally wrap the teaser in a box. 
+
+You can also combine these features with the registration plugin and this way create a membership website with member-only content.
+

content/00-welcome/03-restrict-access.yaml

@@ -0,0 +1,9 @@
+meta:
+    title: 'restrict access'
+    description: 'Typemill has a build-in system to restrict access to pages or to the whole websites. You can activate both features in the system settings under the section "access rights". If you activate one of the features, then Typemill will use session cookies on all frontend pages.'
+    owner: trendschau
+    author: 'Sebastian Schürmanns'
+    created: '2021-05-12'
+    time: 21-04-29
+    navtitle: 'restrict access'
+    modified: '2021-05-12'

content/00-welcome/04-get-help.txt

@@ -0,0 +1 @@
+["# Get Help","If you need any help, then please read the [documentation on typemill.net](https:\/\/typemill.net\/typemill) first. Some short video-tutorials are in work right now.","If you found a bug or if you have a question, then please open a new issue on [GitHub](https:\/\/github.com\/typemill\/typemill\/issues).","Do you need professional help, an individual theme or a special plugin? You can hire us at [Trendschau Digital](https:\/\/trendschau.net\/typemill-development).","[Contributions](https:\/\/github.com\/typemill\/typemill#contributors--supporters), [donations](https:\/\/www.paypal.me\/typemill) and [feedback](https:\/\/github.com\/typemill\/typemill\/issues) for this open source project are always welcome."]

content/00-welcome/04-get-help.yaml

@@ -0,0 +1,24 @@
+meta:
+    title: 'Get Help'
+    description: 'If you need any help, then please read the documentation on typemill.net first. Some short video-tutorials are in work right'
+    heroimage: null
+    heroimagealt: null
+    owner: null
+    author: 'Sebastian Schürmanns'
+    manualdate: null
+    modified: '2020-11-19'
+    created: null
+    time: null
+    navtitle: ''
+    hide: false
+    mycustom:
+        product: car
+        price: '123,20'
+seo:
+    heroimage: media/live/bildschirmfoto-zu-2019-08-30-20-46-29.png
+    heroimagealt: Alt-Text
+customfields:
+    myfield:
+        bla:
+            - text
+            - test

content/00-welcome/05-markdown-test.yaml

@@ -0,0 +1,15 @@
+meta:
+    title: 'Markdown Reference and Test Page'
+    description: 'Markdown is a simple and universal syntax for text formatting. More and more writers switch to markdown, because they can format their text during the writing process without using any format-buttons. '
+    author: 'Sebastian Schürmanns'
+    manualdate: '2020-02-22'
+    modified: '2020-01-20'
+    created: null
+    time: 04-40-32
+    navtitle: ''
+    hide: false
+ebooks:
+    layout: electric
+    content:
+        -
+            name: 'markdown test'

content/01-settings.md

@@ -0,0 +1,27 @@
+# Settings and Access Rights
+
+Typemill provides detailed settings, and you have access to nearly all settings in the author panel. You will find everything in the `settings` tab:
+
+* System settings
+* Theme settings
+* Plugin settings
+* User settings
+
+All settings are stored in the `\settings` folder of Typemill. It is not recommended to edit the settings manually, because it might crash the system if done wrong.
+
+![youtube-video](media/live/youtube-7yvlwxjl9dc.jpeg "click to load video"){#7yvlwXJL9dc .youtube}
+
+## Developer Settings
+
+As of version 1.4.0 you will find some advanced developer settings in the author panel under `settings`. See the details below. 
+
+! **Only for devs**
+! 
+! These options are for developers only. Make sure that you fully understand what happens. For example, you should never activate the error reporting on live systems because this is a security risk.
+
+* **Error Reporting**: You can switch the error reporting of the slim-framework on and off here. This can be helpful for bug-analysis, but you should NEVER switch it on (or keep it active) on a productive system. 
+* **Twig cache**: You can activate the cache for the twig templates. This will speed up the page rendering a bit, but it can also produce a headace if you changed something in your theme. The best option is to clear the cache if something does not work.
+* **Clear cache**: This will clear the cache for Twig templates and delete all cache files of Typemill. If you clear the cache, then some details might not work or look strange, for example the navigation is set back to the original state. Everything will work again when the cache has been rebuild. This happens every 10 minutes. If you want to spead up the process, then refresh your browser cache with F12 on windows machines, because it will also trigger the recreation of the Typemill cache.
+* **Image sizes**: All images in the content area will be resized to 820px width. If you want to change it, then add another value in the width-field. If you additionally add a height for your images, then the images will be resized first and then cropped to the correct aspect ratio.
+* **Proxy**: If you run Typemill behind a proxy (which is a common usecase in companies), then you can activate the proxy detection. This will read the `X-Forwarded-Proto`, `X-Forwarded-Host` and `X-Forwarded-Port` Headers and return the html with the correct urls. Optionally you can also add a comma separated list of trusted IP-addresses.
+

content/01-settings.yaml

@@ -0,0 +1,9 @@
+meta:
+    title: 'Settings and Access Rights'
+    description: 'Content '
+    owner: trendschau
+    author: 'Sebastian Schürmanns'
+    created: '2021-05-12'
+    time: 19-47-59
+    navtitle: settings
+    modified: '2021-05-12'

content/02-cyanine-theme/01-colors-and-fonts.yaml

@@ -0,0 +1,13 @@
+meta:
+    title: 'Colors and Fonts'
+    description: 'First of all cyanine supports individual logos. If you want to use our logo, then please upload it in the system settings. Cyanine will automatically replace the title text with your logo. '
+    heroimage: null
+    heroimagealt: null
+    owner: null
+    author: trendschau
+    manualdate: null
+    modified: '2020-06-14'
+    created: '2020-06-11'
+    time: 20-37-12
+    navtitle: 'colors and fonts'
+    hide: false

content/02-cyanine-theme/02-footer.yaml

@@ -0,0 +1,12 @@
+meta:
+    title: '3-Column Footer'
+    description: 'Cyanine provides a three column footer at the bottom of each page. You can use markdown for each column. Make sure that you use the correct headline-level (we suggest a headline level 3 or level 4 to keep the logical headline hierarchy in the document). You can, of course, also add link-lists or'
+    heroimage: null
+    heroimagealt: null
+    author: trendschau
+    manualdate: null
+    modified: '2020-06-14'
+    created: '2020-06-11'
+    time: 21-00-20
+    navtitle: ''
+    hide: false

system/Controllers/AuthController.php

@@ -133,7 +133,7 @@ class AuthController extends Controller
 				}
 
 				# if user is allowed to view content-area
-				if($this->c->acl->isAllowed($userdata['userrole'], 'content', 'view'))
+				if($this->c->acl->hasRole($userdata['userrole']) && $this->c->acl->isAllowed($userdata['userrole'], 'content', 'view'))
 				{
 					$settings = $this->c->get('settings');
 					$editor = (isset($settings['editor']) && $settings['editor'] == 'visual') ? 'visual' : 'raw';

system/Controllers/SettingsController.php

@@ -11,6 +11,7 @@ use Typemill\Models\ProcessFile;
 use Typemill\Models\ProcessImage;
 use Typemill\Events\OnUserfieldsLoaded;
 use Typemill\Events\OnSystemnaviLoaded;
+use Typemill\Events\OnUserDeleted;
 
 class SettingsController extends Controller
 {	
@@ -479,8 +480,24 @@ class SettingsController extends Controller
 				}
 				else
 				{
+					# fetch the original settings from the folder to get the field definitions
+					$originalSettings = \Typemill\Settings::getObjectSettings('plugins', $pluginName);
+
+					# check if the plugin has dependencies
+					if(isset($userInput[$pluginName]['active']) && isset($originalSettings['dependencies']))
+					{
+						foreach($originalSettings['dependencies'] as $dependency)
+						{
+							if(!isset($userInput[$dependency]['active']) OR !$userInput[$dependency]['active'])
+							{
+								$this->c->flash->addMessage('error', 'Activate the plugin ' . $dependency . ' before you activate the plugin ' . $pluginName);
+								return $response->withRedirect($this->c->router->pathFor('plugins.show'));
+							}
+						}
+					}
+
 					/* validate the user-input */
-					$imageFields = $this->validateInput('plugins', $pluginName, $userInput[$pluginName], $validate);
+					$imageFields = $this->validateInput('plugins', $pluginName, $userInput[$pluginName], $validate, $originalSettings);
 
 					/* use the input data */
 					$pluginSettings[$pluginName] = $userInput[$pluginName];
@@ -615,6 +632,11 @@ class SettingsController extends Controller
 
 		# set navigation active
 		$navigation['Users']['active'] = true;
+
+		if(isset($userdata['lastlogin']))
+		{
+			$userdata['lastlogin'] = date("d.m.Y H:i:s", $userdata['lastlogin']);
+		}
 		
 		return $this->render($response, 'settings/user.twig', array(
 			'settings' 		=> $settings,
@@ -876,13 +898,22 @@ class SettingsController extends Controller
 				if($_SESSION['user'] !== $params['username'])
 				{
 					return $response->withRedirect($this->c->router->pathFor('user.account'));
-				}				
+				}
 			}
 			
 			if($validate->username($params['username']))
 			{
+				$userdata = $user->getSecureUser($params['username']);
+				if(!$userdata)
+				{
+					$this->c->flash->addMessage('error', 'Ups, we did not find that user');
+					return $response->withRedirect($this->c->router->pathFor('user.show', ['username' => $params['username']]));
+				}
+
 				$user->deleteUser($params['username']);
 
+				$this->c->dispatcher->dispatch('onUserDeleted', new OnUserDeleted($userdata));
+
 				# if user deleted his own account
 				if($_SESSION['user'] == $params['username'])
 				{
@@ -894,7 +925,7 @@ class SettingsController extends Controller
 				return $response->withRedirect($this->c->router->pathFor('user.list'));
 			}
 			
-			$this->c->flash->addMessage('error', 'Ups, we did not find that user');
+			$this->c->flash->addMessage('error', 'Ups, it is not a valid username');
 			return $response->withRedirect($this->c->router->pathFor('user.show', ['username' => $params['username']]));			
 		}
 	}
@@ -937,6 +968,12 @@ class SettingsController extends Controller
 
 	private function getUserFields($role)
 	{
+		# if a plugin with a role has been deactivated, then users with the role throw an error, so set them back to member...
+		if(!$this->c->acl->hasRole($role))
+		{
+			$role = 'member';
+		}
+
 		$fields = [];
 		$fields['username'] 	= ['label' => 'Username (read only)', 'type' => 'text', 'readonly' => true];
 		$fields['firstname'] 	= ['label' => 'First Name', 'type' => 'text'];

system/Events/OnUserConfirmed.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Typemill\Events;
+
+use Symfony\Component\EventDispatcher\Event;
+
+/**
+ * Event for the page tree.
+ */
+ 
+class OnUserConfirmed extends BaseEvent
+{
+
+}

system/Events/OnUserDeleted.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Typemill\Events;
+
+use Symfony\Component\EventDispatcher\Event;
+
+/**
+ * Event for the page tree.
+ */
+ 
+class OnUserDeleted extends BaseEvent
+{
+
+}

system/Models/Field.php

@@ -71,7 +71,8 @@ class Field
 									'min',
 									'max',
 									'class',
-									'pattern'
+									'pattern',
+									'steps'
 								);
 	
 	/* defines additional data, that are allowed for fields */

system/Models/User.php

@@ -21,6 +21,9 @@ class User extends WriteYaml
 			$usernames[] = str_replace('.yaml', '', $userfile);
 		}
 
+
+		usort($usernames, 'strnatcasecmp');
+
 		return $usernames;
 	}
 	
@@ -235,8 +238,13 @@ class User extends WriteYaml
 	{
 		if(file_exists($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-mail.txt'))
 		{
-			# read and return the file
-			$usermailindex = file($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-mail.txt');
+			# unserialize and return the file
+			$usermailindex = unserialize(file_get_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-mail.txt'));
+
+			if($usermailindex)
+			{
+				return $usermailindex;
+			}
 		}
 		
 		$usernames 		= $this->getUsers();
@@ -249,7 +257,7 @@ class User extends WriteYaml
 			$usermailindex[$userdata['email']] = $username;
 		}
 
-		file_put_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-mail.txt', var_export($usermailindex, TRUE));
+		file_put_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-mail.txt', serialize($usermailindex));
 
 		return $usermailindex;
 	}
@@ -304,8 +312,12 @@ class User extends WriteYaml
 	{
 		if(file_exists($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-role.txt'))
 		{
-			# read and return the file
-			$userroleindex = file($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-role.txt');
+			# unserialize and return the file
+			$userroleindex = unserialize(file_get_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-role.txt'));
+			if($userroleindex)
+			{
+				return $userroleindex;
+			}
 		}
 
 		$usernames		= $this->getUsers();
@@ -318,7 +330,7 @@ class User extends WriteYaml
 			$userroleindex[$userdata['userrole']][] = $username;
 		}
 
-		file_put_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-role.txt', var_export($userroleindex, TRUE));
+		file_put_contents($this->userDir . DIRECTORY_SEPARATOR . 'tmuserindex-role.txt', serialize($userroleindex));
 
 		return $userroleindex;
 	}

system/Plugin.php

@@ -8,9 +8,13 @@ use Typemill\Models\WriteYaml;
 use Typemill\Extensions\ParsedownExtension;
 
 abstract class Plugin implements EventSubscriberInterface
-{	
+{
 	protected $container;
 
+	protected $path;
+
+	protected $adminpath = false;
+
     /**
      * Constructor
      *
@@ -19,6 +23,13 @@ abstract class Plugin implements EventSubscriberInterface
     public function __construct($container)
     {
 		$this->container 	= $container;
+
+		$this->path 		= trim($this->container['request']->getUri()->getPath(),"/");
+
+		if(substr($this->path, 0, 3) === "tm/")
+		{
+			$this->adminpath = true;
+		}
     }
 
     protected function isXhr()

system/author/css/style.css

@@ -73,9 +73,33 @@ a, a:link, a:visited, a:focus, a:hover, a:active, .link, button, .button, .tab-b
 .hover-bg-white.active{
 	background-color: #fff;
 }
+.tm-gray{
+	color:#f9f8f6;
+}
+.bg-tm-gray{
+	background:#f9f8f6;
+}
+.b--tm-gray{
+	border-color:#f9f8f6;
+}
+.hover-tm-gray:hover{
+	color:#f9f8f6;
+}
+.hover-bg-tm-gray:hover{
+	background:#f9f8f6;
+}
+.hover-b--tm-gray:hover,.hover-b--tm-gray.active{
+	border-color:#f9f8f6;
+}
+
+/*
 .w-100{
 	width:100%!important;
 }
+*/
+.w-100{
+	width:100%;
+}
 .w-15{
 	width: 15%;
 }

system/author/editor/editor-blox.twig

@@ -39,7 +39,7 @@
 					<div v-if="bloxOverlay" class="blox-overlay"></div>
 				</transition>
 				
-				<div id="initial-content">
+				<div id="initial-content" v-pre>
 				
 					<div class="blox title">{{title}}</div>
 					

system/author/js/vue-blox.js

@@ -1633,7 +1633,7 @@ const imageComponent = Vue.component('image-component', {
 								publishController.errors.message = "Looks like you are logged out. Please login and try again.";
 							}
 							*/
-				            if(error.response.data.errors.message)
+				            if(error.response)
 				            {
 				            	publishController.errors.message = error.response.data.errors.message;
 				            }
@@ -1809,7 +1809,7 @@ const fileComponent = Vue.component('file-component', {
 				        })
 				        .catch(function (error)
 				        {
-				            if(error.response.data.errors.message)
+				            if(error.response)
 				            {
 				            	publishController.errors.message = error.response.data.errors.message;
 				            }
@@ -1960,8 +1960,9 @@ let editor = new Vue({
 	        })
 	        .catch(function (error)
 	        {
+	        	if(error)
 				publishController.publishDisabled = false;
-	        	if(error.response.data.errors.message)
+	        	if(error.response)
 	        	{
 					publishController.errors.message = error.response.data.errors.message;
 	        	}

system/author/js/vue-userlist.js

@@ -4,8 +4,6 @@ Vue.component('searchbox', {
 	  return {
 	    filter: 'username',
 	    searchterm: '',
-	    searchmode: true,
-	    clearmode: false,
 	    userroles: userroles,
 	  }
 	},
@@ -20,8 +18,8 @@ Vue.component('searchbox', {
 						'<option v-for="role in userroles">{{role}}</option>' +
 					'</select>' +
 	  				'<input v-else type="text" class="usersearch" v-model="searchterm">' +
-					'<button v-if="searchmode" class="searchbutton search" @click.prevent="startSearch()">Search</button>' +
-					'<button v-if="clearmode" class="searchbutton clear" @click.prevent="clearSearch()">Clear</button>' +
+					'<button class="searchbutton search" @click.prevent="startSearch()">Search</button>' +
+					'<button class="searchbutton clear" @click.prevent="clearSearch()">Clear</button>' +
 				  '</div>' +
 				  '<div v-if="error" class="error pt1 f6">{{error}}</div>' +
 				  '<div v-if="this.filter == \'usermail\'" class="description pt1">You can use the asterisk (*) wildcard to search for name@* or *@domain.com.</div>' +
@@ -38,8 +36,6 @@ Vue.component('searchbox', {
     				this.$root.error = 'Please enter at least 3 characters';
     				return;
     			}
-	    		this.searchmode = false;
-	    		this.clearmode = true;
 	    		this.$root.search(this.searchterm, this.filter);
     		}
     	},
@@ -47,14 +43,11 @@ Vue.component('searchbox', {
     	{
     		this.$root.error = false;
     		this.searchterm = '';
-    		this.searchmode = true;
-    		this.clearmode = false;
     		this.$root.clear(this.filter);
     	},
     	setFilter: function(filter)
     	{
-    		this.clearSearch();
-
+    		this.searchterm = '';
     		this.filter = filter;
     		if(filter == 'userrole')
     		{
@@ -72,16 +65,22 @@ Vue.component('searchbox', {
     }
 })
 
-Vue.component('userrow', {
-  	props: ['user'],
-  	template: '<li class="row">' +
-					'<ul>' +
-						'<li class="col username">{{ user.username }}</li>' +
-						'<li class="col userrole">{{ user.userrole }}</li>' + 
-						'<li class="col email">{{ user.email }}</li>' +
-						'<li class="col edit"><a :href="getEditLink(user.username)">edit</a></li>' +
-					'</ul>' +
-				'</li>',
+Vue.component('usertable', {
+  	props: ['userdata'],
+   	template: '<table class="w-100 mw8" cellspacing="0">' +
+				'<tr class="white">' +
+					'<th class="pa3 bg-tm-green ba b--white normal tl">Username</th>' +
+					'<th class="pa3 bg-tm-green ba b--white normal tl">Userrole</th>' +
+					'<th class="pa3 bg-tm-green ba b--white normal tl">E-Mail</th>' +
+					'<th class="pa3 bg-tm-green ba b--white normal tl">Edit</th>' +
+				'</tr>' + 
+  				'<tr v-for="user,index in userdata" key="username">' +
+	  				'<td class="pa3 bg-tm-gray ba b--white tl">{{ user.username }}</td>' +
+	  				'<td class="pa3 bg-tm-gray ba b--white tl">{{ user.userrole }}</td>' +
+	  				'<td class="pa3 bg-tm-gray ba b--white tl">{{ user.email }}</td>' +
+	  				'<td class="pa3 bg-tm-gray ba b--white tl"><a :href="getEditLink(user.username)" class="link tm-red no-underline underline-hover">edit</a></td>' +
+			 	'</tr>' +
+			 '</table>', 	
     methods: {
     	getEditLink: function(username){
 			return this.$root.$data.root + '/tm/user/' + username;
@@ -191,7 +190,7 @@ let userlist = new Vue({
 		{
 			if(filter == 'username')
 			{
-				let result = this.filterItems(this.usernames, term);
+				let result = this.filterItems(this.holdusernames, term);
 				
 				this.usernames = result;
 

system/author/languages/en.yaml

@@ -16,77 +16,77 @@ ADD_ROW_ABOVE: add row above
 ADD_ROW_BELOW: add row below
 ADMINISTRATOR: administrator
 ALL: all
-ALL_USERS: All users
-ALTERNATIVE_TEXT_FOR_THE_HERO_IMAGE: Alternative Text for the hero image
-ALT_TEXT: Alt-Text
-AUTHOR: Author
-AUTHOR_DESCRIPTION_(MARKDOWN): Author-Description (Markdown)
+ALL_USERS: all users
+ALTERNATIVE_TEXT_FOR_THE_HERO_IMAGE: alternative text for the hero image
+ALT_TEXT: alt-text
+AUTHOR: author
+AUTHOR_DESCRIPTION_(MARKDOWN): author-description (markdown)
 BACK_TO_STARTPAGE: back to startpage
 BOLD: bold
-BOTTOM: Bottom
+BOTTOM: bottom
 BROWSE: BROWSE
-BULLET_LIST: Bullet List
+BULLET_LIST: bullet list
 BY: by
 CANCEL: cancel
 CAN_BE_USED_FOR_AUTHOR_LINE_IN_FRONTEND_: Can be used for author line in frontend.
-CAPTION: Caption
+CAPTION: caption
 CELL: cell
-CENTER: Center
+CENTER: center
 CHECK: check
-CHOOSE_FILE: Choose file
-CLASS: Class
-CLOSE_LIBRARY: Close Library
-CODE: Code
+CHOOSE_FILE: choose file
+CLASS: class
+CLOSE_LIBRARY: close library
+CODE: code
 COG: cog
-CONTENT: Content
-COPYRIGHT: Copyright
+CONTENT: content
+COPYRIGHT: copyright
 CREATED_AT_(READONLY): Created at (read only)
 CREATED_AT_(READ_ONLY): Created at (readonly)
-CREATE_NEW_USER: Create New User
-CREATE_USER: Create User
+CREATE_NEW_USER: Create new user
+CREATE_USER: Create user
 CROSS: cross
 CUSTOM_CSS: Custom CSS
-DEFINITION: Definition List
-DEFINITION_LIST: Definition List
+DEFINITION: definition list
+DEFINITION_LIST: definition list
 DELETE: delete
 DELETE_CLOSE: delete/close
 DELETE_COLUMN: delete column
 DELETE_CONTENT_BLOCK: delete content-block
-DELETE_PAGE: Delete page
+DELETE_PAGE: delete page
 DELETE_ROW: delete row
-DELETE_USER: Delete User
+DELETE_USER: delete user
 DESCRIPTION: description
-DISCARD: Discard
-DISCARD_CHANGES: Discard Changes
+DISCARD: discard
+DISCARD_CHANGES: discard changes
 DO_YOU_REALLY_WANT_TO_DELETE_THE_USER: Do you really want to delete the user
 DO_YOU_REALLY_WANT_TO_DELETE_THIS_PAGE: Do you really want to delete this page?
 DO_YOU_WANT_TO_DISCARD_YOUR_CHANGES_AND_SET_THE_CONTENT_BACK_TO_THE_LIVE_VERSION: Do you want to discard your changes and set the content back to the live version?
-DRAFT: Draft
+DRAFT: draft
 DRAG_A_PICTURE_OR_CLICK_TO_SELECT: upload an image
 DUTCH__FLEMISH: Dutch, Flemish
 EDIT: edit
 EDITOR: editor
-EDIT_USER: Edit User
+EDIT_USER: edit user
 ENGLISH: English
 EXTERNAL_LINK: external-link
 E_G_: e.g.
-E_MAIL: E-Mail
-FAVICON: Favicon
-FILE: File
+E_MAIL: e-mail
+FAVICON: favicon
+FILE: file
 FILES: Files
-FIRST_NAME: First Name
+FIRST_NAME: first name
 FOLDER: folder
-FORGOT_PASSWORD: Forgot password
-FORMAT: Format
+FORGOT_PASSWORD: forgot password
+FORMAT: format
 FRENCH: French
 GENERAL_PRESENTATION: General Presentation
 GERMAN: German
-GOOGLE_SITEMAP: Google Sitemap
+GOOGLE_SITEMAP: google sitemap
 HAS_EDIT_RIGHTS_FOR_THIS_ARTICLE_: Has edit rights for this article.
 HEAD: Head
 HEADLINE: Headline
-HEADLINE_ANCHORS: Headline Anchors
-HERO_IMAGE: Hero Image
+HEADLINE_ANCHORS: Headline anchors
+HERO_IMAGE: Hero image
 HIDE: Hide
 HIDE_PAGE_FROM_NAVIGATION: Hide page from navigation
 HOME: home

system/author/settings/plugins.twig

@@ -41,6 +41,15 @@
 								</ul>
 							</div>
 						<div class="cardInner cardFields{{ errors[pluginName] ? ' open' : '' }}">
+
+							{% if plugin.dependencies %}
+								<div class="w-100 mt3 pa3 pb4 bg-tm-green white">
+									<p>Please make sure that you have installed and activated the following plugins:</p>
+									{% for dependency in plugin.dependencies %}
+										<span class="pa2 mr2 br1 bg-tm-gray black">{{ dependency }}</span> 
+									{% endfor %}
+								</div>
+							{% endif %}
 						
 							{% for field in plugin.forms.fields %}
 								

system/author/settings/system.twig

@@ -16,10 +16,11 @@
 
 				<header class="headline">
 					<h1>{{ __('System') }} <span class="version-number">v. {{settings.version}}</span></h1>
+					<p>New here? Then watch the <a class="link tm-red underline-hover" href="https://www.youtube.com/watch?v=7yvlwXJL9dc" target="_blank">video-tutorial</a> about configurations for typemill on YouTube.</p>				
 				</header>
 				
 				<div id="typemill" class="fc-system-version update-banner">{{ settings.version ? settings.version : 'Unknown' }}</div>
-				
+							
 				<fieldset>
 				
 					<div class="medium{{ errors.settings.title ? ' error' : '' }}">
@@ -142,6 +143,7 @@
 					<header class="headline">
 						<h2>{{ __('Access Control') }}</h2>
 						<p>{{ __('Limit the access for the whole website or for each page individually. If you activate the website restriction or the page restrictions, then sessions will be used in frontend.') }}</p>
+						<p>New here? Then watch the <a class="link tm-red underline-hover" href="https://www.youtube.com/watch?v=UW_m-4g1kAA" target="_blank">video-tutorial</a> about access rights for typemill on YouTube.</p>
 					</header>
 					<div class="large{{ errors.settings.access ? ' error' : '' }}">
 						<label for="settings[access]">{{ __('Website Restriction') }}</label>

system/author/settings/userlist.twig

@@ -42,9 +42,3 @@
 	</div>
 	
 {% endblock %}
-
-{% block javascript %}
-
-	<script src="{{ base_url }}/system/author/js/vue-userlist.js"></script>
-
-{% endblock %}

system/author/settings/userlistvue.twig

@@ -2,39 +2,24 @@
 {% block title %}{{ __('User') }}{% endblock %}
 
 {% block content %}
-	
-	<div class="formWrapper">
+	 
+	<section class="pa3">
 
-		<section id="users" class="settings">
+		<div class="mh3">
 
-			<header class="headline">
-				<h1>{{ __('All Users') }} </h1>
-			</header>
-			
+			<h1>{{ __('All Users') }} </h1>
+				
 			<div id="userlist" v-cloak>
 
-				<div class="usersearchbox">
+				<div class="mb3">
 					<searchbox :error="error"></searchbox>
 				</div>
 
-				<ul class="userlist">
-					<li class="row header">
-						<ul>
-							<li class="col username">{{ __('Username') }}</li><li 
-								class="col userrole">{{ __('Role') }}</li><li 
-								class="col email">{{ __('E-Mail') }}</li><li 
-								class="col edit">{{ __('Edit') }}</li>
-						</ul>
-					</li>
-
-					<userrow
-					  v-for="user in userdata"
-					  v-bind:key="user.name"
-					  v-bind:user="user"
-					></userrow>
-				</ul>
-
-				<ul class="pagination" v-if="showpagination">
+			  	<div class="overflow-auto">
+			  		<usertable :userdata="userdata"></usertable>
+				</div>
+				
+				<ul class="list pl0" v-if="showpagination">
 					<pagination
 						v-for="page in pages"
 						v-bind:key="page"
@@ -43,16 +28,17 @@
 				</ul>
 
 			</div>
-			
-			<div class="medium">
-				<a class="button" href="{{ path_for('user.new') }}">{{ __('Create New User') }}</a>
+				
+			<div class="mv4">
+				<a class="button dib" href="{{ path_for('user.new') }}">{{ __('Create New User') }}</a>
 			</div>
-		</section>
+
+		</div>
 
 		<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
 		{{ csrf_field() | raw }}
 		
-	</div>
+	</section>
 	
 {% endblock %}