rebuild login page

8 files changed, 98 insertions, 30 deletions

diff --git a/includes/pages/guest_login.php b/includes/pages/guest_login.php
index 69201161..1e6ac41a 100644
--- a/includes/pages/guest_login.php
+++ b/includes/pages/guest_login.php
@@ -212,7 +212,7 @@ function guest_register() {
                       ]),
                       div('col-sm-8', [
                           form_email('mail', _("E-Mail") . ' ' . entry_required(), $mail),
-                          form_checkbox('email_shiftinfo', _("The engelsystem is allowed to send me an email (e.g. when my shifts change)"), $email_shiftinfo), 
+                          form_checkbox('email_shiftinfo', _("The engelsystem is allowed to send me an email (e.g. when my shifts change)"), $email_shiftinfo),
                           form_checkbox('email_by_human_allowed', _("Humans are allowed to send me an email (e.g. for ticket vouchers)"), $email_by_human_allowed) 
                       ]) 
                   ]),
@@ -286,9 +286,9 @@ function guest_login() {
   $nick = "";
   
   unset($_SESSION['uid']);
+  $valid = true;
   
   if (isset($_REQUEST['submit'])) {
-    $valid = true;
     
     if (isset($_REQUEST['nick']) && strlen(User_validate_Nick($_REQUEST['nick'])) > 0) {
       $nick = User_validate_Nick($_REQUEST['nick']);
@@ -326,25 +326,36 @@ function guest_login() {
   return page([
       div('col-md-12', [
           div('row', [
-              div('col-md-4', [
-                  EventConfig_countdown_page($event_config) 
+              EventConfig_countdown_page($event_config) 
+          ]),
+          div('row', []),
+          div('row', [
+              div('col-md-4 text-center', [
+                  heading(register_title(), 2),
+                  get_register_hint() 
               ]),
               div('col-md-4', [
-                  heading(login_title(), 2),
-                  msg(),
-                  form([
-                      form_text('nick', _("Nick"), $nick),
-                      form_password('password', _("Password")),
-                      form_submit('submit', _("Login")),
-                      buttons([
-                          button(page_link_to('user_password_recovery'), _("I forgot my password")) 
+                  div('panel panel-primary first', [
+                      div('panel-heading', [
+                          '<span class="icon-icon_angel"></span> ' . _("Login") 
                       ]),
-                      info(_("Please note: You have to activate cookies!"), true) 
+                      div('panel-body', [
+                          msg(),
+                          form([
+                              form_text_placeholder('nick', _("Nick"), $nick),
+                              form_password_placeholder('password', _("Password")),
+                              form_submit('submit', _("Login")),
+                              ! $valid ? buttons([
+                                  button(page_link_to('user_password_recovery'), _("I forgot my password")) 
+                              ]) : '' 
+                          ]) 
+                      ]),
+                      div('panel-footer', [
+                          glyph('info-sign') . _("Please note: You have to activate cookies!") 
+                      ]) 
                   ]) 
               ]),
-              div('col-md-4', [
-                  heading(register_title(), 2),
-                  get_register_hint(),
+              div('col-md-4 text-center', [
                   heading(_("What can I do?"), 2),
                   '<p>' . _("Please read about the jobs you can do to help us.") . '</p>',
                   buttons([
diff --git a/includes/sys_form.php b/includes/sys_form.php
index 960be401..98ef2134 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -176,6 +176,23 @@ function form_text($name, $label, $value, $disabled = false) {
 }
 
 /**
+ * Renders a text input with placeholder instead of label.
+ *
+ * @param String $name
+ *          Input name
+ * @param String $placeholder
+ *          Placeholder
+ * @param String $value
+ *          The value
+ * @param Boolean $disabled
+ *          Is the field enabled?
+ */
+function form_text_placeholder($name, $placeholder, $value, $disabled = false) {
+  $disabled = $disabled ? ' disabled="disabled"' : '';
+  return form_element('', '<input class="form-control" id="form_' . $name . '" type="text" name="' . $name . '" value="' . htmlspecialchars($value) . '" placeholder="' . $placeholder . '" ' . $disabled . '/>');
+}
+
+/**
  * Rendert ein Formular-Emailfeld
  */
 function form_email($name, $label, $value, $disabled = false) {
@@ -199,6 +216,14 @@ function form_password($name, $label, $disabled = false) {
 }
 
 /**
+ * Renders a password input with placeholder instead of label.
+ */
+function form_password_placeholder($name, $placeholder, $disabled = false) {
+  $disabled = $disabled ? ' disabled="disabled"' : '';
+  return form_element('', '<input class="form-control" id="form_' . $name . '" type="password" name="' . $name . '" value="" placeholder="' . $placeholder . '" ' . $disabled . '/>', 'form_' . $name);
+}
+
+/**
  * Rendert ein Formular-Textfeld
  */
 function form_textarea($name, $label, $value, $disabled = false) {
diff --git a/includes/view/EventConfig_view.php b/includes/view/EventConfig_view.php
index d184166f..bf3ad3a4 100644
--- a/includes/view/EventConfig_view.php
+++ b/includes/view/EventConfig_view.php
@@ -6,33 +6,49 @@
  */
 function EventConfig_countdown_page($event_config) {
   if ($event_config == null) {
-    return info(_("We got no information about the event right now."), true);
+    return div('col-md-12 text-center', [
+        heading(sprintf(_("Welcome to the %s!"), '<span class="icon-icon_angel"></span> ENGELSYSTEM'), 2) 
+    ]);
   }
   
   $elements = [];
   
   if ($event_config['event_name'] != null) {
-    $elements[] = heading($event_config['event_name'], 2);
+    $elements[] = div('col-md-12 text-center', [
+        heading(sprintf(_("Welcome to the %s!"), $event_config['event_name'] . ' <span class="icon-icon_angel"></span> ENGELSYSTEM'), 2) 
+    ]);
   }
   
-  if ($event_config['event_start_date'] != null && $event_config['event_end_date'] != null) {
-    $elements[] = sprintf(_("from %s to %s"), date("Y-m-d", $event_config['event_start_date']), date("Y-m-d", $event_config['event_end_date']));
-  }
-  
-  if ($event_config['buildup_start_date'] != null && time() < $event_config['buildup_start_date']) {
-    $elements[] = '<h2 class="moment-countdown" data-timestamp="' . $event_config['buildup_start_date'] . '">' . _("Buildup starts in %c") . '</h2>';
+  if ($event_config['buildup_start_date'] != null) {
+    $elements[] = div('col-md-3 text-center', [
+        heading(_("Buildup starts"), 3),
+        '<h2 class="moment-countdown" data-timestamp="' . $event_config['buildup_start_date'] . '">%c</h2>',
+        '<small>' . date(_("Y-m-d"), $event_config['buildup_start_date']) . '</small>' 
+    ]);
   }
   
-  if ($event_config['event_start_date'] != null && time() < $event_config['event_start_date']) {
-    $elements[] = '<h2 class="moment-countdown" data-timestamp="' . $event_config['event_start_date'] . '">' . _("Event starts in %c") . '</h2>';
+  if ($event_config['event_start_date'] != null) {
+    $elements[] = div('col-md-3 text-center', [
+        heading(_("Event starts"), 3),
+        '<h2 class="moment-countdown" data-timestamp="' . $event_config['event_start_date'] . '">%c</h2>',
+        '<small>' . date(_("Y-m-d"), $event_config['event_start_date']) . '</small>' 
+    ]);
   }
   
-  if ($event_config['event_end_date'] != null && time() < $event_config['event_end_date'] && ($event_config['event_start_date'] == null || time() > $event_config['event_start_date'])) {
-    $elements[] = '<h2 class="moment-countdown" data-timestamp="' . $event_config['event_end_date'] . '">' . _("Event ends in %c") . '</h2>';
+  if ($event_config['event_end_date'] != null) {
+    $elements[] = div('col-md-3 text-center', [
+        heading(_("Event ends"), 3),
+        '<h2 class="moment-countdown" data-timestamp="' . $event_config['event_end_date'] . '">%c</h2>',
+        '<small>' . date(_("Y-m-d"), $event_config['event_end_date']) . '</small>' 
+    ]);
   }
   
-  if ($event_config['teardown_end_date'] != null && time() < $event_config['teardown_end_date'] && ($event_config['event_start_date'] == null || time() > $event_config['event_start_date'])) {
-    $elements[] = '<h2 class="moment-countdown" data-timestamp="' . $event_config['teardown_end_date'] . '">' . _("Teardown ends in %c") . '</h2>';
+  if ($event_config['teardown_end_date'] != null) {
+    $elements[] = div('col-md-3 text-center', [
+        heading(_("Teardown ends"), 3),
+        '<h2 class="moment-countdown" data-timestamp="' . $event_config['teardown_end_date'] . '">%c</h2>',
+        '<small>' . date(_("Y-m-d"), $event_config['teardown_end_date']) . '</small>' 
+    ]);
   }
   
   return join("", $elements);
diff --git a/public/css/theme0.css b/public/css/theme0.css
index e6730397..f623f239 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6730,6 +6730,9 @@ body {
 .footer a {
   color: #777777;
 }
+.first {
+  margin-top: 20px;
+}
 .panel-primary .panel-heading a {
   color: #ffffff;
 }
diff --git a/public/css/theme1.css b/public/css/theme1.css
index 32d31bd2..163e9b1e 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6753,6 +6753,9 @@ body {
 .footer a {
   color: #888888;
 }
+.first {
+  margin-top: 20px;
+}
 .panel-primary .panel-heading a {
   color: #ffffff;
 }
diff --git a/public/css/theme2.css b/public/css/theme2.css
index 8a1c3583..0fd65393 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6730,6 +6730,9 @@ body {
 .footer a {
   color: #777777;
 }
+.first {
+  margin-top: 20px;
+}
 .panel-primary .panel-heading a {
   color: #ffffff;
 }
diff --git a/public/css/theme3.css b/public/css/theme3.css
index 24aebfaf..78d58f0b 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6739,6 +6739,9 @@ body {
 .footer a {
   color: #777777;
 }
+.first {
+  margin-top: 20px;
+}
 .panel-primary .panel-heading a {
   color: #ffffff;
 }
diff --git a/themes/base.less b/themes/base.less
index d1ef5b64..f105377f 100644
--- a/themes/base.less
+++ b/themes/base.less
@@ -10,6 +10,10 @@ body {
   color: @text-muted;
 }
 
+.first {
+	margin-top: 20px;
+}
+
 .panel-primary .panel-heading a {
   color: @panel-primary-text;
 }