Skip to content
GitLab
Explore
Projects
Groups
Topics
Snippets
Projects
Groups
Topics
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Anand Kulkarni
rgstc-project
Commits
532b5048
Commit
532b5048
authored
5 years ago
by
Prashant Savekar
Browse files
Options
Downloads
Patches
Plain Diff
Add Login Page
parent
01cfe750
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
public/assets/images/college-bg.jpg
+0
-0
public/assets/images/college-bg.jpg
public/assets/images/maharashtralogo.png
+0
-0
public/assets/images/maharashtralogo.png
src/views/Login.vue
+499
-136
src/views/Login.vue
with
499 additions
and
136 deletions
public/assets/images/college-bg.jpg
0 → 100644
+
0
−
0
View file @
532b5048
293 KiB
This diff is collapsed.
Click to expand it.
public/assets/images/maharashtralogo.png
0 → 100644
+
0
−
0
View file @
532b5048
9.38 KiB
This diff is collapsed.
Click to expand it.
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
:
10
px
45px
;
padding
:
5
px
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
:
#
dfdfd
f
none
repeat
scroll
0
0
;
background
:
#
ff
f
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
This diff is collapsed.
Click to expand it.
Preview
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Topics
Snippets