Modified login and registration pages

protected/modules_core/user/controllers/AuthController.php

@@ -27,6 +27,8 @@
 class AuthController extends Controller
 {
 
+    public $subLayout = "_layout";
+
     public function actions()
     {
         return array(
@@ -55,9 +57,6 @@ class AuthController extends Controller
 
         $ntlmAutoLogin = false;
 
-        // Disable Sublayout
-        $this->subLayout = "";
-
         $model = new AccountLoginForm;
 
         //TODO: Solve this via events!
@@ -136,9 +135,6 @@ class AuthController extends Controller
     public function actionRecoverPassword()
     {
 
-        // Disable Sublayout
-        $this->subLayout = "";
-
         $model = new AccountRecoverPasswordForm;
 
         // Uncomment the following line if AJAX validation is needed
@@ -178,9 +174,6 @@ class AuthController extends Controller
 
         $_POST = Yii::app()->input->stripClean($_POST);
 
-        // Disable Sublayout
-        $this->subLayout = "";
-
         $needApproval = HSetting::Get('needApproval', 'authentication_internal');
 
         if (!Yii::app()->user->isGuest)

protected/modules_core/user/views/account/delete.php

@@ -21,9 +21,9 @@
         <p class="help-block">Fields with <span class="required">*</span> are required.</p><br>
 
         <?php echo $form->errorSummary($model); ?>
-
-        <?php echo $form->passwordField($model, 'currentPassword', array('class' => 'span8', 'maxlength' => 45)); ?>
-
+        <div class="form-group">
+            <?php echo $form->passwordField($model, 'currentPassword', array('class' => 'form-control', 'maxlength' => 45)); ?>
+        </div>
         <?php echo CHtml::submitButton(Yii::t('UserModule.base', 'Delete account'), array('class' => 'btn btn-danger')); ?>
 
 

protected/modules_core/user/views/auth/_layout.php

@@ -0,0 +1,13 @@
+<div class="outside">
+    <?php echo $content; ?>
+    <div class="text text-center animated fadeIn">
+        Powered by <a href="http://www.humhub.org" target="_blank">HumHub</a>
+    </div>
+</div>
+
+<style type="text/css">
+    body {
+        background-color: #7191a8 !important;
+    }
+</style>
+

protected/modules_core/user/views/auth/createAccount.php

@@ -11,12 +11,31 @@
 ?>
 
 <div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+    <br/>
     <div class="row">
-        <div class="panel panel-default" style="max-width: 500px; margin: 0 auto 20px; text-align: left;">
-            <div class="panel-heading"><?php echo Yii::t('UserModule.base', 'Registration'); ?></div>
+        <div id="create-account-form" class="panel panel-default animated bounceIn" style="max-width: 500px; margin: 0 auto 20px; text-align: left;">
+            <div class="panel-heading"><?php echo Yii::t('UserModule.base', '<strong>Account</strong> registration'); ?></div>
             <div class="panel-body">
                 <?php echo $form; ?>
             </div>
         </div>
     </div>
 </div>
+
+<script type="text/javascript">
+    $(function () {
+        // set cursor to login field
+        $('#User_username').focus();
+    })
+
+    // Shake panel after wrong validation
+    <?php foreach($form->models as $model) : ?>
+    <?php if ($model->hasErrors()) : ?>
+        $('#create-account-form').removeClass('bounceIn');
+        $('#create-account-form').addClass('shake');
+        $('#app-title').removeClass('fadeIn');
+    <?php endif; ?>
+    <?php endforeach; ?>
+
+</script>

protected/modules_core/user/views/auth/createAccount_success.php

@@ -11,14 +11,20 @@
 ?>
 
 <div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+    <br/>
     <div class="row">
-        <div class="panel panel-default" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
+        <div class="panel panel-default animated fadeIn" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
             <div
-                class="panel-heading"><?php echo Yii::t('UserModule.base', 'Your account has been successfully created!'); ?></div>
+                class="panel-heading"><?php echo Yii::t('UserModule.base', '<strong>Your account</strong> has been successfully created!'); ?></div>
             <div class="panel-body">
                 <?php if ($needApproval) : ?>
                     <p><?php echo Yii::t('UserModule.auth', 'After activating your account by the administrator, you will receive a notification by email.'); ?></p>
+                    <br/>
+                    <a href="<?php echo $this->createUrl('//') ?>" class="btn btn-primary"><?php echo Yii::t('UserModule.auth', 'back to home') ?></a>
                 <?php else: ?>
+                    <p><?php echo Yii::t('UserModule.auth', 'To log in with your new account, click the button below.'); ?></p>
+                    <br/>
                     <a href="<?php echo $this->createUrl('//') ?>"
                        class="btn btn-primary"><?php echo Yii::t('UserModule.auth', 'Go to login page') ?></a>
                 <?php endif; ?>

protected/modules_core/user/views/auth/login.php

@@ -12,11 +12,11 @@
 ?>
 
 
-<div class="container outsite" style="text-align: center;">
-    <h1 class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+<div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
     <br>
 
-    <div class="panel panel-default animated bounceIn" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
+    <div class="panel panel-default animated bounceIn" id="login-form" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
 
         <div class="panel-heading"><?php echo Yii::t('UserModule.auth', '<strong>Please</strong> sign in'); ?></div>
 
@@ -28,6 +28,8 @@
             ));
             ?>
 
+            <p><?php echo Yii::t('UserModule.auth', "If you're already a member, please login with your username/email and password."); ?></p>
+
             <div class="form-group">
                 <?php echo $form->textField($model, 'username', array('class' => 'form-control', 'id' => 'login_username', 'placeholder' => Yii::t('UserModule.auth', 'username or email'))); ?>
                 <?php echo $form->error($model, 'username'); ?>
@@ -45,27 +47,35 @@
             </div>
 
             <hr>
-            <?php echo CHtml::submitButton(Yii::t('UserModule.base', 'Sign in'), array('class' => 'btn btn-large btn-primary')); ?>
-            <br>
+            <div class="row">
+                <div class="col-md-4">
+                    <?php echo CHtml::submitButton(Yii::t('UserModule.base', 'Sign in'), array('class' => 'btn btn-large btn-primary')); ?>
+                </div>
+                <div class="col-md-8 text-right">
+                    <small>
+                        <?php echo Yii::t('UserModule.auth', 'Forgot your password?'); ?>
+                        <a href="<?php echo $this->createUrl('//user/auth/recoverPassword'); ?>"><br><?php echo Yii::t('UserModule.auth', 'Create a new one.') ?></a>
+                    </small>
+                </div>
+            </div>
 
             <?php $this->endWidget(); ?>
 
         </div>
 
-
     </div>
-    <a href="<?php echo $this->createUrl('//user/auth/recoverPassword'); ?>"><?php echo Yii::t('UserModule.auth', 'Forgot your password?') ?></a>
-    <br><br><br>
+
+    <br>
 
     <?php if ($canRegister) : ?>
-        <div class="panel panel-default animated bounceInLeft"
+        <div id="register-form" class="panel panel-default animated bounceInLeft"
              style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
 
             <div class="panel-heading"><?php echo Yii::t('UserModule.auth', '<strong>Sign</strong> up') ?></div>
 
             <div class="panel-body">
 
-                <p><?php echo Yii::t('UserModule.base', 'Please enter your e-mail to join the network.'); ?></p>
+                <p><?php echo Yii::t('UserModule.base', "Don't have an account? Join the network by entering your e-mail address."); ?></p>
                 <?php
                 $form = $this->beginWidget('CActiveForm', array(
                     'id' => 'account-register-form',
@@ -74,7 +84,7 @@
                 ?>
 
                 <div class="form-group">
-                    <?php echo $form->textField($registerModel, 'email', array('class' => 'form-control', 'placeholder' => Yii::t('UserModule.auth', 'email'))); ?>
+                    <?php echo $form->textField($registerModel, 'email', array('class' => 'form-control', 'id' => 'register-email', 'placeholder' => Yii::t('UserModule.auth', 'email'))); ?>
                     <?php echo $form->error($registerModel, 'email'); ?>
                 </div>
                 <hr>
@@ -83,14 +93,33 @@
                 <?php $this->endWidget(); ?>
             </div>
         </div>
+
     <?php endif; ?>
+
 </div>
 
 <script type="text/javascript">
     $(function () {
-        // set cursor ot login field
+        // set cursor to login field
         $('#login_username').focus();
     })
+
+    // Shake panel after wrong validation
+    <?php if ($form->errorSummary($model) != null) { ?>
+    $('#login-form').removeClass('bounceIn');
+    $('#login-form').addClass('shake');
+    $('#register-form').removeClass('bounceInLeft');
+    $('#app-title').removeClass('fadeIn');
+    <?php } ?>
+
+    // Shake panel after wrong validation
+    <?php if ($form->errorSummary($registerModel) != null) { ?>
+    $('#register-form').removeClass('bounceInLeft');
+    $('#register-form').addClass('shake');
+    $('#login-form').removeClass('bounceIn');
+    $('#app-title').removeClass('fadeIn');
+    <?php } ?>
+
 </script>
 
 

protected/modules_core/user/views/auth/recoverPassword.php

@@ -1,7 +1,10 @@
 <div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+    <br>
+
     <div class="row">
-        <div class="panel panel-default" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
-            <div class="panel-heading"><?php echo Yii::t('UserModule.base', 'Password recovery'); ?></div>
+        <div id="password-recovery-form" class="panel panel-default animated bounceIn" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
+            <div class="panel-heading"><?php echo Yii::t('UserModule.base', '<strong>Password</strong> recovery'); ?></div>
             <div class="panel-body">
 
 
@@ -35,10 +38,20 @@
 
             </div>
         </div>
-        <script type="text/javascript">
-            jQuery('#email_txt').focus();
-        </script>
-
-
     </div>
-</div>
+</div>
+
+<script type="text/javascript">
+
+    $(function () {
+        // set cursor to email field
+        $('#email_txt').focus();
+    })
+
+    // Shake panel after wrong validation
+    <?php if ($form->errorSummary($model) != null) { ?>
+    $('#password-recovery-form').removeClass('bounceIn');
+    $('#password-recovery-form').addClass('shake');
+    $('#app-title').removeClass('fadeIn');
+    <?php } ?>
+</script>

protected/modules_core/user/views/auth/recoverPassword_success.php

@@ -1,11 +1,13 @@
 <div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+    <br/>
     <div class="row">
-        <div class="panel panel-default" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
-            <div class="panel-heading"><?php echo Yii::t('UserModule.auth', 'Password recovery!'); ?></div>
+        <div class="panel panel-default animated fadeIn" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
+            <div class="panel-heading"><?php echo Yii::t('UserModule.auth', '<strong>Password</strong> recovery!'); ?></div>
             <div class="panel-body">
-                <p><?php echo Yii::t('UserModule.base', 'We just send you an e-mail with a new password.'); ?></p>
+                <p><?php echo Yii::t('UserModule.base', "You've got an e-mail with a new password."); ?></p><br/>
                 <a href="<?php echo $this->createUrl('//') ?>" class="btn btn-primary"><?php echo Yii::t('UserModule.auth', 'back to home') ?></a>
             </div>
         </div>
     </div>
-</div>
+</div>

protected/modules_core/user/views/auth/register_success.php

@@ -12,11 +12,14 @@
  */
 ?>
 <div class="container" style="text-align: center;">
+    <h1 id="app-title" class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
+    <br/>
     <div class="row">
         <div class="panel panel-default" style="max-width: 300px; margin: 0 auto 20px; text-align: left;">
-            <div class="panel-heading"><?php echo Yii::t('UserModule.base', 'Registration successful!'); ?></div>
+            <div class="panel-heading"><?php echo Yii::t('UserModule.base', '<strong>Registration</strong> successful!'); ?></div>
             <div class="panel-body">
                 <p><?php echo Yii::t('UserModule.base', 'Please check your email and follow the instructions!'); ?></p>
+                <br/>
                 <a href="<?php echo $this->createUrl('//') ?>" class="btn btn-primary"><?php echo Yii::t('UserModule.auth', 'back to home') ?></a>
             </div>
         </div>

themes/HumHub/css/theme.css

@@ -511,11 +511,8 @@ h4 {
 .input.btn {
   outline: none;
 }
-.btn-small {
-  padding: 2px 10px;
-}
-.btn-large {
-  padding: 11px 19px;
+.btn-lg {
+  padding: 16px 28px;
 }
 .btn-sm {
   padding: 4px 8px;
@@ -1112,3 +1109,23 @@ img.bounceIn {
     box-shadow: none;
   }
 }*/
+.outside .text {
+  color: #ffffff;
+  font-size: 12px;
+}
+.outside .text a {
+  color: #ffffff;
+  text-decoration: underline;
+}
+.outside h1 {
+  color: #ffffff !important;
+}
+.outside .panel {
+  box-shadow: 0px 0px 15px #627d92;
+  -moz-box-shadow: 0px 0px 15px #627d92;
+  -webkit-box-shadow: 0px 0px 15px #627d92;
+}
+.outside .panel .panel-heading,
+.outside .panel .panel-body {
+  padding: 15px;
+}

themes/HumHub/css/theme.less

@@ -685,12 +685,8 @@ h4 {
   outline: none;
 }
 
-.btn-small {
-  padding: 2px 10px;
-}
-
-.btn-large {
-  padding: 11px 19px;
+.btn-lg {
+  padding: 16px 28px;
 }
 
 .btn-sm {
@@ -1485,3 +1481,31 @@ img.bounceIn {
 }*/
 
 
+
+
+.outside {
+
+.text {
+  color: #ffffff;
+  font-size: 12px;
+
+  a {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+  h1 {
+    color: #ffffff !important;
+  }
+
+  .panel {
+    box-shadow: 0px 0px 15px #627d92;
+    -moz-box-shadow: 0px 0px 15px #627d92;
+    -webkit-box-shadow: 0px 0px 15px #627d92;
+
+    .panel-heading, .panel-body {
+      padding: 15px;
+    }
+  }
+}