Skip to content
GitLab
Commit 532b5048 authored by Prashant Savekar's avatar Prashant Savekar
Browse files

Add Login Page

parent 01cfe750
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 499 additions and 136 deletions
public/assets/images/college-bg.jpg 0 → 100644
+ 0
− 0
View file @ 532b5048
public/assets/images/college-bg.jpg

293 KiB

public/assets/images/maharashtralogo.png 0 → 100644
+ 0
− 0
View file @ 532b5048
public/assets/images/maharashtralogo.png

9.38 KiB

src/views/Login.vue
+ 499
− 136
View file @ 532b5048
<template> <template>
<section id="login"> <div class="login-2" style="background-image: linear-gradient(150deg, rgba(0, 0, 0, 0.6)15%, rgba(0, 0, 0, 0.6)70%, rgba(0, 0, 0, 0.6)94%), url(assets/images/college-bg.jpg);">
<div class="container">
<div class="col-md-12 pad-0">
<div class="row login-box-2">
<div class="col-lg-5 col-md-12 col-sm-12 col-pad-0 bg-img align-self-center none-992">
<a href="#">
<img src="assets/images/maharashtralogo.png" class="logo" alt="logo">
</a>
<h4>RGSTC</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-lg-7 col-md-12 col-sm-12 col-pad-0 align-self-center">
<div class="login-inner-form">
<div class="details">
<h3>Sign into your account</h3>
<form>
<div id="loginFormId" class="form-group">
<label id="emailId" for="email">
Email address
</label>
<input v-model="username" id="email" type="email" name="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">
We'll never share your email with anyone else.
</small>
</div>
<div class="form-group">
<label for="password">
Password
</label>
<input v-model="password" type="password" name="password" class="form-control" @focus="showPassInfo = true" id="password" @blur="showPassInfo = false" placeholder="Password">
</div>
<div class="checkbox clearfix">
<div class="form-check checkbox-theme">
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
<label class="form-check-label" for="rememberMe">
Remember me
</label>
</div>
<a href="forgot-password-6.html">Forgot Password</a>
</div>
<button id="loginBtn" type="submit" name="btnlogin" class="btn btn-gradient btn-block px-4 mr-2 mb-2" @click="authenticate()">
Login
</button>
<div class="aro-pswd_info">
<div v-show="showPassInfo" id="pswd_info">
<h4>Password must be requirements</h4>
<ul>
<li id="letter" class="invalid">
At least
<strong>one letter</strong>
</li>
<li id="capital" class="invalid">
At least
<strong>one capital letter</strong>
</li>
<li id="number" class="invalid">
At least
<strong>one number</strong>
</li>
<li id="length" class="invalid">
Be at least
<strong>8 characters</strong>
</li>
<li id="space" class="invalid">
be
<strong> use [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong>
</li>
</ul>
</div>
</div>
</form>
<p>Don't have an account?<router-link to="dashboard"> Register here</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <section id="login">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-4 offset-md-4"> <div class="col-md-4 offset-md-4">
...@@ -119,166 +199,449 @@ ...@@ -119,166 +199,449 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section> -->
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import Response from '@/plugins/response.js' import Response from '@/plugins/response.js'
export default { export default {
data () { data() {
return { return {
username: '', username: '',
password: '', password: '',
showPassInfo: false showPassInfo: false
} }
},
methods: {
show () {
let r = new Response({})
r.showElement('loginFormId')
},
authenticate () {
this.$store.dispatch('AUTH_REQUEST', { loginId: this.username, password: this.password }).then(res => {
// Redirect to next page after suucessfull login
alert('Login : ' + res.isValid('MQLLogin'))
})
.catch(err => {
alert(err)
Vue.$log.error(err)
})
// let req = {
// loginId: this.username,
// password: this.password
// };
// this.$MQLFetch('O.LoginService', req)
// .then(res => {
// // alert(JSON.stringify(res));
// this.$router.push("/");
// })
// .catch(error => {
// // Do in case of error
// Vue.error(error);
// });
}, },
validatePassword () { methods: {
// validate password length show() {
if (this.password.length < 8) { let r = new Response({})
let showLengthMsg = document.getElementById('length') r.showElement('loginFormId')
showLengthMsg.classList.remove('valid') },
showLengthMsg.classList.add('invalid') authenticate() {
} else { this.$store.dispatch('AUTH_REQUEST', { loginId: this.username, password: this.password }).then(res => {
let showLengthMsg = document.getElementById('length') // Redirect to next page after suucessfull login
showLengthMsg.classList.remove('invalid') alert('Login : ' + res.isValid('MQLLogin'))
showLengthMsg.classList.add('valid') })
} .catch(err => {
alert(err)
// validate letter Vue.$log.error(err)
if (this.password.match(/[A-z]/)) { })
let showLengthMsg = document.getElementById('letter')
showLengthMsg.classList.remove('invalid') // let req = {
showLengthMsg.classList.add('valid') // loginId: this.username,
} else { // password: this.password
let showLengthMsg = document.getElementById('letter') // };
showLengthMsg.classList.remove('valid') // this.$MQLFetch('O.LoginService', req)
showLengthMsg.classList.add('invalid') // .then(res => {
} // // alert(JSON.stringify(res));
// this.$router.push("/");
// validate capital letter // })
if (this.password.match(/[A-Z]/)) { // .catch(error => {
let showLengthMsg = document.getElementById('capital') // // Do in case of error
showLengthMsg.classList.remove('invalid') // Vue.error(error);
showLengthMsg.classList.add('valid') // });
} else { },
let showLengthMsg = document.getElementById('capital') validatePassword() {
showLengthMsg.classList.remove('valid') // validate password length
showLengthMsg.classList.add('invalid') if (this.password.length < 8) {
} let showLengthMsg = document.getElementById('length')
showLengthMsg.classList.remove('valid')
// validate number showLengthMsg.classList.add('invalid')
if (this.password.match(/\d/)) { } else {
let showLengthMsg = document.getElementById('number') let showLengthMsg = document.getElementById('length')
showLengthMsg.classList.remove('invalid') showLengthMsg.classList.remove('invalid')
showLengthMsg.classList.add('valid') showLengthMsg.classList.add('valid')
} else { }
let showLengthMsg = document.getElementById('number')
showLengthMsg.classList.remove('valid') // validate letter
showLengthMsg.classList.add('invalid') if (this.password.match(/[A-z]/)) {
} let showLengthMsg = document.getElementById('letter')
showLengthMsg.classList.remove('invalid')
// validate space showLengthMsg.classList.add('valid')
if (this.password.match(/[^a-zA-Z0-9\-/]/)) { } else {
let showLengthMsg = document.getElementById('space') let showLengthMsg = document.getElementById('letter')
showLengthMsg.classList.remove('invalid') showLengthMsg.classList.remove('valid')
showLengthMsg.classList.add('valid') showLengthMsg.classList.add('invalid')
} else { }
let showLengthMsg = document.getElementById('space')
showLengthMsg.classList.remove('valid') // validate capital letter
showLengthMsg.classList.add('invalid') if (this.password.match(/[A-Z]/)) {
} let showLengthMsg = document.getElementById('capital')
showLengthMsg.classList.remove('invalid')
showLengthMsg.classList.add('valid')
} else {
let showLengthMsg = document.getElementById('capital')
showLengthMsg.classList.remove('valid')
showLengthMsg.classList.add('invalid')
}
// validate number
if (this.password.match(/\d/)) {
let showLengthMsg = document.getElementById('number')
showLengthMsg.classList.remove('invalid')
showLengthMsg.classList.add('valid')
} else {
let showLengthMsg = document.getElementById('number')
showLengthMsg.classList.remove('valid')
showLengthMsg.classList.add('invalid')
}
// validate space
if (this.password.match(/[^a-zA-Z0-9\-/]/)) {
let showLengthMsg = document.getElementById('space')
showLengthMsg.classList.remove('invalid')
showLengthMsg.classList.add('valid')
} else {
let showLengthMsg = document.getElementById('space')
showLengthMsg.classList.remove('valid')
showLengthMsg.classList.add('invalid')
}
}
} }
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.login-2 {
background: #f5f5f5;
min-height: 100vh;
position: relative;
// text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.login-2 a>h4 {
font-size: 24px;
color: #fff;
}
.login-2 .login-inner-form {
color: #717171;
// text-align: center;
padding: 20px 0;
}
.login-2 .col-pad-0 {
padding: 0;
}
.login-box-2 {
margin: 0 150px 0 200px;
max-width: 700px;
border-radius: 10px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
background: #fff;
}
.login-box-2 h4 {
text-align: center;
color: #fff;
font-weight: 600;
}
.login-2 .login-inner-form .details p a {
margin-left: 3px;
color: #3afe;
}
.login-2 .login-inner-form .details p {
margin-bottom: 0;
font-size: 14px;
}
.login-2 .login-inner-form .details {
padding: 30px 60px 30px 0;
}
.login-2 .bg-img {
background-size: cover;
width: 100%;
bottom: 0;
border-radius: 10px;
padding: 80px 30px;
background-image: linear-gradient(-225deg, #01c0c8 0%, #6B8DD6 48%, #8E37D7 100%);
margin: 30px 0;
left: -60px;
z-index: 999;
}
.login-2 .none-2 {
display: none;
}
.login-2 .btn-outline:hover {
background: #fff;
text-decoration: none;
color: #1b548c;
}
.login-2 .login-inner-form h3 {
margin: 0 0 25px;
font-size: 22px;
font-weight: 400;
color: #352a3a;
}
.login-2 .login-inner-form .form-group {
margin-bottom: 20px;
}
.login-2 .login-inner-form .btn-md {
cursor: pointer;
padding: 10px 50px 8px 50px;
letter-spacing: 1px;
font-size: 15px;
font-weight: 400;
height: 45px;
border-radius: 3px;
text-transform: uppercase;
}
.login-2 .bg-img .social-list li {
display: inline-block;
font-size: 16px;
}
.login-2 .bg-img .logo {
width: 100px;
margin: auto;
margin-bottom: 20px;
}
.login-2 .bg-img p {
font-size: 15px;
color: #e8e8e8;
text-align: center;
margin-bottom: 30px;
}
.login-2 .bg-img .btn-sm {
padding: 6px 20px 6px 20px;
font-size: 13px;
}
.login-2 .bg-img .social-list {
padding: 0;
margin: 35px 0 0;
}
.login-2 .bg-img .social-list li a {
margin: 0 5px;
font-size: 20px;
color: #1b548c;
border-radius: 3px;
display: inline-block;
}
.login-2 .bg-img .social-list li a:hover {
color: #fff;
}
.login-2 .login-inner-form input[type=checkbox],
input[type=radio] {
margin-right: 3px;
}
.login-2 .login-inner-form button:focus {
outline: none;
outline: 0 auto -webkit-focus-ring-color;
}
.login-2 .login-inner-form .btn-theme.focus,
.btn-theme:focus {
box-shadow: none;
}
.login-2 .login-inner-form .btn-theme {
background: #1b548c;
border: none;
color: #fff;
}
.login-2 .login-inner-form .btn-theme:hover {
background: #194c7d;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
}
.login-2 .login-inner-form .terms {
margin-left: 3px;
}
.login-2 .login-inner-form .checkbox {
margin-bottom: 20px;
font-size: 14px;
}
.login-2 .login-inner-form .form-check {
float: left;
margin-bottom: 0;
padding-left: 2px;
}
.login-2 .login-inner-form .form-check a {
color: #717171;
float: right;
}
.login-2 .login-inner-form .form-check-input {
position: absolute;
margin-left: 0;
}
.login-2 .login-inner-form .form-check label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
margin-left: -25px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
}
.login-2 .login-inner-form .form-check-label {
padding-left: 25px;
margin-bottom: 0;
font-size: 14px;
}
.login-2 .login-inner-form .checkbox-theme input[type="checkbox"]:checked+label::before {
background-color: #1db2cb;
border-color: #1b548c;
}
.login-2 .login-inner-form input[type=checkbox]:checked+label:before {
font-weight: 300;
color: #f3f3f3;
line-height: 15px;
font-size: 14px;
content: "\2713";
}
.login-2 .login-inner-form input[type=checkbox],
input[type=radio] {
margin-top: 4px;
}
.login-2 .login-inner-form .checkbox a {
font-size: 14px;
color: #3afe;
float: right;
}
.btn-gradient {
background-image: linear-gradient(-225deg, #01c0c8 0%, #6B8DD6 48%, #8E37D7 100%);
color: #fff;
}
/** MEDIA **/
@media (max-width: 1200px) {
.login-box-2 {
margin: 0 70px 0 120px;
}
}
@media (max-width: 992px) {
.none-992 {
display: none;
}
.login-box-2 {
margin: 0 auto;
max-width: 400px;
}
.login-2 .login-inner-form .details {
padding: 30px;
}
.login-2 .pad-0 {
padding: 0;
}
}
.toast-header {
padding: .25rem .75rem;
}
#login { #login {
.login-card { .login-card {
box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
padding: 30px; padding: 30px;
} }
} }
#pswd_info { #pswd_info {
background: #dfdfdf none repeat scroll 0 0; background: #fff none repeat scroll 0 0;
color: #fff; border:1px solid #eee;
left: 20px; box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
position: absolute; border-radius: 6px;
top: 115px; overflow: hidden;
color: #fff;
left: 20px;
position: absolute;
top: 115px;
} }
#pswd_info h4 { #pswd_info h4 {
background: black none repeat scroll 0 0; background: #fafafa none repeat scroll 0 0;
display: block; color:#181818;
font-size: 14px; display: block;
letter-spacing: 0; font-size: 14px;
padding: 17px 0; letter-spacing: 0;
text-align: center; padding: 17px 0;
text-transform: uppercase; text-align: center;
text-transform: uppercase;
} }
#pswd_info ul { #pswd_info ul {
list-style: outside none none; list-style: outside none none;
margin: 0;
padding: 0;
margin-bottom:20px;
} }
#pswd_info ul li { #pswd_info ul li {
padding: 10px 45px; padding: 5px 45px;
} }
.valid { .valid {
background: rgba(0, 0, 0, 0) background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px;
url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px; color: green;
color: green; line-height: 1.29;
line-height: 21px; padding-left: 22px;
padding-left: 22px;
} }
.invalid { .invalid {
background: rgba(0, 0, 0, 0) background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px;
url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px color: red;
6px; line-height: 1.29;
color: red; padding-left: 22px;
line-height: 21px;
padding-left: 22px;
} }
#pswd_info::before { #pswd_info::before {
background: #dfdfdf none repeat scroll 0 0; background: #fff none repeat scroll 0 0;
content: ""; content: "";
height: 25px; height: 25px;
left: -13px; left: -13px;
margin-top: -12.5px; margin-top: -12.5px;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: rotate(45deg); transform: rotate(45deg);
width: 25px; width: 25px;
} }
</style> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment