"Mikrotik Login"
Bootstrap 3.3.0 Snippet by thiemkaew

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- All the files that are required -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Where all the magic happens -->
<!-- LOGIN FORM -->
<div class="text-center" style="padding:50px 0">
<div class="logo">login</div>
<!-- Main Form -->
<div class="login-form-1">
<form id="login-form" class="text-left">
<div class="login-form-main-message"></div>
<div class="main-login-form">
<div class="login-group">
<div class="form-group">
<label for="lg_username" class="sr-only">Username</label>
<input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="username">
</div>
<div class="form-group">
<label for="lg_password" class="sr-only">Password</label>
<input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="password">
</div>
<div class="form-group login-group-checkbox">
<input type="checkbox" id="lg_remember" name="lg_remember">
<label for="lg_remember">remember</label>
</div>
</div>
<button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button>
</div>
<div class="etc-login-form">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*------------------------------------------------------------------
[Master Stylesheet]
Project : Aether
Version : 1.0
Last change : 2015/03/27
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
1. General Structure
2. Anchor Link
3. Text Outside the Box
4. Main Form
5. Login Button
6. Form Invalid
7. Form - Main Message
8. Custom Checkbox & Radio
9. Misc
-------------------------------------------------------------------*/
/*=== 1. General Structure ===*/
html,
body {
background: #efefef;
padding: 10px;
font-family: 'Varela Round';
}
/*=== 2. Anchor Link ===*/
a {
color: #aaaaaa;
transition: all ease-in-out 200ms;
}
a:hover {
color: #333333;
text-decoration: none;
}
/*=== 3. Text Outside the Box ===*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function($) {
"use strict";
// Options for Message
//----------------------------------------------
var options = {
'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>',
'btn-success': '<i class="fa fa-check"></i>',
'btn-error': '<i class="fa fa-remove"></i>',
'msg-success': 'All Good! Redirecting...',
'msg-error': 'Wrong login credentials!',
'useAJAX': true,
};
// Login Form
//----------------------------------------------
// Validation
$("#login-form").validate({
rules: {
lg_username: "required",
lg_password: "required",
},
errorClass: "form-invalid"
});
// Form Submission
$("#login-form").submit(function() {
remove_loading($(this));
if(options['useAJAX'] == true)
{
// Dummy AJAX request (Replace this with your AJAX code)
// If you don't want to use AJAX, remove this
dummy_submit_form($(this));
// Cancel the normal submission.
// If you don't want to use AJAX, remove this
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: