Jump to content

Critical Security Concern, it has come to our attention that many sites around the web are getting hacked and we are afraid that it seems like our SQL database has been leaked as well. So you're advised to change your password here immediately. For your security, we have invalidated your current password and logged you out of site. Please use the password reset feature to set your new unique password.

Photo
- - - - -

Modern Admin Login Screen


  • Please log in to reply
5 replies to this topic

#1 Apophis

Apophis

    Level 1

  • Members
  • Level
  • 2 points
  • 15 posts
    • Gender:Male
    • Location:Kansas, USA
    • Software:SE 3.1x

Posted 09 January 2017 - 04:35 PM

Exclusive from Team Visionz Studios

We all know that the Social Engine 3 admin login screen is just plain and well it's ugly.

 

 

V3RgGRm.png

 

 

As you can see for yourself!

We will show you how it's done and show you using from our project "Social Fyre" for admin login. Lets begin!

 

Open templates/admin_login.tpl and you will see:

{include file='admin_header_global.tpl'}

{* $Id: admin_login.tpl 8 2009-01-11 06:02:53Z john $ *}


{literal}
<script type="text/javascript">
<!--
window.addEvent('domready', function() { document.getElementById('username').focus(); });
//-->
</script>


<style type='text/css'>
html, body {
    height: 100% !important;
}
body {
    text-align: center;
    background-color: #EEEEEE;
    background-image: url(../images/admin_login.gif);
    background-repeat: no-repeat;
    background-position: center center;
}
div.box {
    border: 1px dashed #AAAAAA;
    padding: 15px;
    background: #FFFFFF;
    font-family: "Trebuchet MS", tahoma, verdana, serif;
    font-size: 9pt;
       width: 470px;
}
td.login {
    font-family: "Trebuchet MS", tahoma, verdana, serif;
    font-size: 9pt;
}
input.text {
    font-family: arial, tahoma, verdana, serif;
    font-size: 9pt; 
}
div.error {
    text-align: center;
    padding-top: 3px;
    font-weight: bold;
}
input.button {
    font-family: arial, tahoma, verdana, serif;
    font-size: 9pt;
    background: #DDDDDD;
    padding: 2px;
    font-weight: bold;
}
</style>
{/literal}



<table cellspacing='0' cellpadding='0' style='width: 100%; height: 100%;'>
<tr>
<td align='center'>
    <form action='admin_login.php' method='POST'>
    <div class='box'>
        <table cellpadding='0' cellspacing='0'>
        <tr>
        <td class='login'>{lang_print id=28}: &nbsp;</td>
        <td class='login'><input type='text' class='text' name='username' id='username' maxlength='50'> &nbsp;</td>
        <td class='login'>{lang_print id=29}: &nbsp;</td>
        <td class='login'><input type='password' class='text' name='password' id='password' maxlength='50'> &nbsp;</td>
        <td class='login'><input type='submit' class='button' value='{lang_print id=30}'></td>
        </tr>
        </table>
            {if $is_error != 0}<div class='error'>{lang_print id=$is_error}</div>{/if}
    </div>
    <input type='hidden' name='task' value='dologin'>
    <NOSCRIPT><input type='hidden' name='javascript' value='no'></NOSCRIPT>
    </form>
</td>
</tr>
</table>

</body>
</html>

Replace all with:

{include file='admin_header_global.tpl'}



{* Team Visionz Studios, Social Fyre . Copyright (c) 2009-2017 *}



{literal}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript">
<!--
window.addEvent('domready', function() { document.getElementById('username').focus(); });
//-->
</script>


<style type='text/css'>
@charset "utf-8";


@import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);



div.main{
   background: #0264d6; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #0264d6 1%, Coolirisc2b5a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,Coolirisc2b5a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #0264d6 1%,Coolirisc2b5a 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #0264d6 1%,Coolirisc2b5a 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #0264d6 1%,Coolirisc2b5a 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #0264d6 1%,Coolirisc2b5a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='Coolirisc2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height:calc(100vh);
width:100%;
}

[class*="fontawesome-"]:before {
 font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

* {
 box-sizing: border-box;
   margin:0px auto;

 &:before,
 &:after {
   box-sizing: border-box;
 }

}

body {
  
   color: #606468;
 font: 87.5%/1.5em 'Open Sans', sans-serif;
 margin: 0;
}

a {
    color: #eee;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

input {
    border: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    padding: 0;
    -webkit-appearance: none;
}

p {
    line-height: 1.5em;
}

.clearfix {
 *zoom: 1;

 &:before,
 &:after {
   content: ' ';
   display: table;
 }

 &:after {
   clear: both;
 }

}

.container {
 left: 50%;
 position: fixed;
 top: 50%;
 transform: translate(-50%, -50%);
}

/* ---------- LOGIN ---------- */

#login form{
    width: 250px;
}
#login, .logo{
   display:inline-block;
   width:40%;
}
#login{
border-right:1px solid #fff;
 padding: 0px 22px;
 width: 59%;
}
.logo{
color:#fff;
font-size:50px;
 line-height: 125px;
}

#login form span.fa {
    background-color: #fff;
    border-radius: 3px 0px 0px 3px;
    color: #000;
    display: block;
    float: left;
    height: 50px;
   font-size:24px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}

#login form input {
    height: 50px;
}
fieldset{
   padding:0;
   border:0;
   margin: 0;

}
#login form input[type="text"], input[type="password"] {
    background-color: #fff;
    border-radius: 0px 3px 3px 0px;
    color: #000;
    margin-bottom: 1em;
    padding: 0 16px;
    width: 200px;
}

#login form input[type="submit"] {
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 background-color: #000000;
 color: #eee;
 font-weight: bold;
 /* margin-bottom: 2em; */
 text-transform: uppercase;
 padding: 5px 10px;
 height: 30px;
}

#login form input[type="submit"]:hover {
    background-color: red;
}

#login > p {
    text-align: center;
}

#login > p span {
    padding-left: 5px;
}
.middle {
 display: flex;
 width: 600px;
}
</style>
{/literal}

<div class="main">
   <table width="100%" border="0">
 <tbody>
   <tr>
     <td height="200">&nbsp;</td>
   </tr>
 </tbody>
</table>

   <center>{if $is_error != 0}<div class='error' <div style="width:475px; background-color: #000000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border:1px dotted black;text-align:center"><font color="white">Invalid Login Information. Please Try Again! Did you <a class="small-text" href='admin_lostpass.php'><font color="red">Forgot password?</font></a></font></div>{/if}</center>
 <div class="container">
<center>
<div class="middle">
     <div id="login">
       <form action='admin_login.php' method='POST'>

         <fieldset class="clearfix">

           <p ><span class="fa fa-user"></span><input type='text' class='text' name='username' Placeholder='Username' required></p> <!-- JS because of IE support; better: placeholder="Username" -->
           <p><span class="fa fa-lock"></span><input type='password' class='text' name='password'  Placeholder='Password' required></p> <!-- JS because of IE support; better: placeholder="Password" -->
           
            <div>
                               <span style="width:48%; text-align:left;  display: inline-block;"></span>
                               <span style="width:50%; text-align:right;  display: inline-block;"><input type="submit" value="Sign In"></span>
             </div>
    <input type='hidden' name='task' value='dologin'>
    <NOSCRIPT><input type='hidden' name='javascript' value='no'></NOSCRIPT>
         </fieldset>
<div class="clearfix"></div>
       </form>

       <div class="clearfix"></div>
     </div> <!-- end login -->
     <div class="logo"><img src="../images/Social Fyre.png" width="300" height="116" alt=""/>
       <div class="clearfix"></div>
     </div>
     
     </div>
</center>
   </div>
</div>
</body>
</html>

Save and close. That takes care of the coding part. Now take this image and put it into your images folder.

 

 

G2l1rSE.png

 

 

After you upload that to your images folder, this is what your admin login area should look like.

 

 

SWZaeA6.png

 

Vm7F82U.png

 

A7lgePb.png

 

ok8Vl8R.png

 

 

Nice and professional looking admin login screen. Stay tuned! More to come.....Enjoy!


WpcjZZD.png


#2 paulsj

paulsj

    Level 7

  • Premium
  • Level
  • 162 points
  • 1,202 posts


Users Awards

Posted 26 January 2017 - 05:22 PM

I personally hided the admin page. No one knows where it is the better!



#3 Apophis

Apophis

    Level 1

  • Members
  • Level
  • 2 points
  • 15 posts
    • Gender:Male
    • Location:Kansas, USA
    • Software:SE 3.1x

Posted 27 January 2017 - 12:44 AM

Security won't be a issue, once i'm done with Social Fyre.  :party:


WpcjZZD.png


#4 Apophis

Apophis

    Level 1

  • Members
  • Level
  • 2 points
  • 15 posts
    • Gender:Male
    • Location:Kansas, USA
    • Software:SE 3.1x

Posted 27 January 2017 - 01:25 AM

I personally hided the admin page. No one knows where it is the better!

 

This is to dress up your admin page, not to hide it.


WpcjZZD.png


#5 paulsj

paulsj

    Level 7

  • Premium
  • Level
  • 162 points
  • 1,202 posts


Users Awards

Posted 27 January 2017 - 06:43 PM

You've come along way with SE 3, many more security holes you will have to uncover. It's also why not too many people using it now.



#6 Apophis

Apophis

    Level 1

  • Members
  • Level
  • 2 points
  • 15 posts
    • Gender:Male
    • Location:Kansas, USA
    • Software:SE 3.1x

Posted 27 January 2017 - 08:23 PM

been working on a responsive default template also. It's going to take work, and it's more secure than people give it credit for. Yes there is some small issues but nothing that can't be fixed. Soon il be looking for a dev team to help take some of the workload off of just me, so it can be made available to the public sooner than later.


WpcjZZD.png





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users


All the resources listed here are just for testing purpose and they shouldn't be used at any commercial environment without a valid license.
Those are for users who wants to try them before buy. Help the developer to build it better by purchasing them from original authors.