Merge pull request #4262 from fabrixxm/frio-login

Frio: restyle login page episode II • Attack of the Clones

mod/home.php

@@ -24,8 +24,6 @@ function home_init(App $a) {
 if(! function_exists('home_content')) {
 function home_content(App $a) {
 
-	$o = '';
-
 	if (x($_SESSION,'theme')) {
 		unset($_SESSION['theme']);
 	}
@@ -33,21 +31,31 @@ function home_content(App $a) {
 		unset($_SESSION['mobile-theme']);
 	}
 
-	/// @TODO No absolute path used, maybe risky (security)
+	$customhome = false;
-	if (file_exists('home.html')) {
+	$defaultheader = '<h1>'.((x($a->config,'sitename')) ? sprintf(t("Welcome to %s"), $a->config['sitename']) : "").'</h1>';
-		if (file_exists('home.css')) {
+
+	$homefilepath = $a->basepath . "/home.html";
+	$cssfilepath = $a->basepath . "/home.css";
+	if (file_exists($homefilepath)) {
+		$customhome = $homefilepath;
+		if (file_exists($cssfilepath)) {
 			$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="'.System::baseUrl().'/home.css'.'" media="all" />';
 		}
-
-		$o .= file_get_contents('home.html');
-	} else {
-		$o .= '<h1>'.((x($a->config,'sitename')) ? sprintf(t("Welcome to %s"), $a->config['sitename']) : "").'</h1>';
 	} 
 
-	$o .= Login::form($a->query_string, $a->config['register_policy'] == REGISTER_CLOSED ? 0 : 1);
+	$login = Login::form($a->query_string, $a->config['register_policy'] == REGISTER_CLOSED ? 0 : 1);
+
+	$content = '';
+	call_hooks("home_content",$content);
 
 
-	call_hooks("home_content",$o);
+	$tpl = get_markup_template('home.tpl');
+	return replace_macros($tpl, [
+		'$defaultheader' => $defaultheader,
+		'$customhome' => $customhome,
+		'$login' => $login,
+		'$content' => $content
+	]);
 
 	return $o;
 

view/templates/home.tpl

@@ -0,0 +1,14 @@
+
+{{* custom content from hook will replace everything. *}}
+{{if $content != '' }}
+	{{$content}}
+{{else}}
+
+	{{if $customhome != false }}
+		{{include file="$customhome"}}
+	{{else}}
+		{{$defaultheader}}
+	{{/if}}
+
+	{{$login}}
+{{/if}}

view/theme/frio/config.php

@@ -40,6 +40,7 @@ function theme_admin_post(App $a) {
 		Config::set('frio', 'background_image', $_POST["frio_background_image"]);
 		Config::set('frio', 'bg_image_option',  $_POST["frio_bg_image_option"]);
 		Config::set('frio', 'login_bg_image',   $_POST["frio_login_bg_image"]);
+		Config::set('frio', 'login_bg_color',   $_POST["frio_login_bg_color"]);
 		Config::set('frio', 'css_modified',     time());
 	}
 }
@@ -77,6 +78,7 @@ function theme_admin(App $a) {
 	$arr["background_image"] = Config::get('frio', 'background_image');
 	$arr["bg_image_option"]  = Config::get('frio', 'bg_image_option');
 	$arr["login_bg_image"]   = Config::get('frio', 'login_bg_image');
+	$arr["login_bg_color"]	 = Config::get('frio', 'login_bg_color');
 
 	return frio_form($arr);
 }
@@ -123,6 +125,10 @@ function frio_form($arr) {
 	if ( array_key_exists("login_bg_image", $arr ) &&  !array_key_exists("login_bg_image", $disable ) ) {
 		$ctx['$login_bg_image']  = ['frio_login_bg_image', t('Login page background image'), $arr['login_bg_image'], $background_image_help];
 	}
+	if ( array_key_exists("login_bg_color", $arr ) &&  !array_key_exists("login_bg_color", $disable ) ) {
+		$ctx['$login_bg_color']  = ['frio_login_bg_color', t('Login page background color'), $arr['login_bg_color'], t('Leave background image and color empty for theme defaults')];
+	}
+
 
 	$o .= replace_macros($t, $ctx);
 

view/theme/frio/css/style.css

@@ -3008,8 +3008,17 @@ section .profile-match-wrapper {
 /** 
  * Login page
  */
+#login-submit-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+#lost-password-link { flex-grow: 2; }
+
 .mod-home.is-not-singleuser,
 .mod-login {
+    background-color: $login_bg_color;
     background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
     background-size: cover;
     background-attachment: fixed;
@@ -3024,25 +3033,45 @@ section .profile-match-wrapper {
     box-shadow: unset;
     border: 0
 }
-.mod-home.is-not-singleuser #content > h1,
+.mod-home.is-not-singleuser .login-content,
-.mod-login #content > h1 {
+.mod-login .login-content {
+    color: #eee;
+    margin-top: 2.5%;
+}
+
+.mod-home.is-not-singleuser .login-form > #login-form label,
+.mod-login #content #login-form label {
     color: #eee;  
 }
 
-@media screen and (min-width: 700px) {
+	
-    .mod-home.is-not-singleuser #content > #login-form,
+.mod-home.is-not-singleuser .login-panel-content,
-    .mod-login #content > #login-form {    
+.mod-login .login-panel-content { 
-        width: 50%;
+    background-color: rgba(255,255,255,.85);
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+    .mod-home.is-not-singleuser #content,
+    .mod-login #content {
+        margin-top: 100px!important;
+    }
+
+    .mod-home.is-not-singleuser .login-form > #login-form,
+    .mod-login #content #login-form {    
         background-color: #fff;
-        color: #444;
         padding: 1em;
-        float: right;
         position: relative;
         margin-top: 4em;
     }
 
-    .mod-home.is-not-singleuser #content > #login-form:before,
+    .mod-home.is-not-singleuser .login-form > #login-form label,
-    .mod-login #content > #login-form:before {
+    .mod-login #content #login-form label {
+        color: #444;  
+    }
+
+    .mod-home.is-not-singleuser .login-form > #login-form::before,
+    .mod-login #content #login-form::before {
         display: block;
         position: absolute;
         content: " ";
@@ -3054,8 +3083,8 @@ section .profile-match-wrapper {
         z-index: -1;
     }
 
-    .mod-home.is-not-singleuser #content > #login-form:after,
+    .mod-home.is-not-singleuser .login-form > #login-form::after,
-    .mod-login #content > #login-form:after {
+    .mod-login #content #login-form::after {
         display: block;
         position: absolute;
         content: " ";
@@ -3066,6 +3095,7 @@ section .profile-match-wrapper {
         left: 10%;
         z-index: -1;
     }
+
 }
 
 

view/theme/frio/style.php

@@ -47,6 +47,7 @@ if ($a->module !== 'install') {
 		$background_image = Config::get("frio", "background_image");
 		$bg_image_option  = Config::get("frio", "bg_image_option");
 		$login_bg_image   = Config::get("frio", "login_bg_image");
+		$login_bg_color   = Config::get("frio", "login_bg_color");
 		$modified         = Config::get("frio", "css_modified");
 
 		// There is maybe the case that the user did never modify the theme settings.
@@ -101,9 +102,16 @@ $link_color       = (empty($link_color)       ? "#6fdbe8"      : $link_color);
 $bgcolor          = (empty($bgcolor)          ? "#ededed"      : $bgcolor);
 // The background image can not be empty. So we use a dummy jpg if no image was set.
 $background_image = (empty($background_image) ? 'img/none.jpg' : $background_image);
-$login_bg_image   = (empty($login_bg_image)   ? 'img/login_bg.jpg' : $login_bg_image);
 $modified         = (empty($modified)         ? time()         :$modified);
 
+
+// set a default login bg image if no custom image and no custom bg color are set.
+if (empty($login_bg_image) && empty($login_bg_color)) {
+	$login_bg_image   = (empty($login_bg_image)   ? 'img/login_bg.jpg' : $login_bg_image);
+}
+$login_bg_color = (empty($login_bg_color) ? "#ededed" : $login_bg_color);
+
+
 $contentbg_transp = ((isset($contentbg_transp) && $contentbg_transp != "") ? $contentbg_transp : 100);
 
 // Calculate some colors in dependance of existing colors.
@@ -181,6 +189,7 @@ $options =  [
 	'$background_image'            => $background_image,
 	'$background_size_img'         => $background_size_img,
 	'$login_bg_image'              => $login_bg_image,
+	'$login_bg_color'              => $login_bg_color
 ];
 
 $css_tpl = file_get_contents('view/theme/frio/css/style.css');

view/theme/frio/templates/home.tpl

@@ -0,0 +1,25 @@
+
+{{* custom content from hook will replace everything. *}}
+<div class="row">
+{{if $content != '' }}
+	<div class="col-sm-12">
+		<div class="panel panel-default login-panel-content">
+			<div class="panel-body">
+				{{$content}}
+			</div>
+		</div>
+	</div>
+{{else}}
+
+	<div class="col-md-7 col-sm-12 login-content">
+		{{if $customhome != false }}
+			{{include file="$customhome"}}
+		{{else}}
+			{{$defaultheader}}
+		{{/if}}
+	</div>
+	<div class="col-md-5 col-sm-12 login-form">
+	{{$login}}
+	</div>
+{{/if}}
+</div>

view/theme/frio/templates/login.tpl

@@ -18,15 +18,15 @@
 
 		{{include file="field_checkbox.tpl" field=$lremember}}
 
-		<div id="login-extra-links" class="list-unstyled">
+		<div id="login-submit-wrapper">
-			{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
 			<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link">{{$lostlink}}</a>
+
+			<div class="pull-right" >
+				{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link" class="btn btn-default">{{$register.desc}}</a>{{/if}}
+				<button type="submit" name="submit" id="login-submit-button" class="btn btn-primary" value="{{$login|escape:'html'}}">{{$login|escape:'html'}}</button>
+			</div>
 		</div>
 
-		<div id="login-submit-wrapper" class="pull-right" >
-			<button type="submit" name="submit" id="login-submit-button" class="btn btn-primary" value="{{$login|escape:'html'}}">{{$login|escape:'html'}}</button>
-		</div>
-		<div class="clear"></div>
 
 		{{foreach $hiddens as $k=>$v}}
 			<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />

view/theme/frio/templates/theme_settings.tpl

@@ -31,10 +31,11 @@
 </div>
 
 {{if $login_bg_image}}{{include file="field_fileinput.tpl" field=$login_bg_image}}{{/if}}
+{{if $login_bg_color}}{{include file="field_colorinput.tpl" field=$login_bg_color}}{{/if}}
 
 <script type="text/javascript">
 	$(document).ready(function() {
-		$("#frio_nav_bg, #frio_nav_icon_color, #frio_background_color, #frio_link_color").colorpicker({format: 'hex', align: 'left'});
+		$("#frio_nav_bg, #frio_nav_icon_color, #frio_background_color, #frio_link_color, #frio_login_bg_color").colorpicker({format: 'hex', align: 'left'});
 
 		// show image options when user user starts to type the address of the image
 		$("#id_frio_background_image").keyup(function(){