Current section
Files
Jump to
Current section
Files
priv/templates/oauth_login_form.dtl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background: #1abc9d;
}
h1{
color: #fff;
text-align: center;
font-family: Arial;
font-weight: normal;
margin: 2em auto 0px;
}
.outer-screen{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background: none;
border-radius: 20px;
height: 540px;
margin: 50px auto;
padding-top: 35px;
position: relative;
width: 500px;
}
.outer-screen:before{
background: none;
border-radius: 50px;
bottom: 20px;
content: "";
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 50px;
z-index: 9999;
}
.outer-screen:after{
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
background: none;
border-radius: 0 0 20px 20px;
bottom: 0;
content: "";
height: 88px;
position: absolute;
width: 500px;
}
.stand{
position: relative;
}
.stand:before{
content: "";
position: absolute;
bottom: -150px;
width: 200px;
left: 0px;
right: 0px;
margin: auto;
border: none;
}
.stand:after{
content: "";
position: absolute;
width: 260px;
left: 0px;
right: 0px;
margin: auto;
border: none;
bottom: -180px;
box-shadow: 0px 4px 0px #7e7e7e
}
.inner-screen{
height: 340px;
background: #1abc9d;
margin: 0px auto;
padding-top: 0px;
width: 400px;
}
.form{
padding-bottom: 20px;
padding-top: 20px;
display: table;
width: 400px;
background: #edeff1;
margin: 0px auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
input[type="text"]{
display: block;
width: 309px;
height: 35px;
margin: 15px auto;
background: #fff;
border: 0px;
padding: 5px;
font-size: 16px;
border: 2px solid #fff;
transition: all 0.3s ease;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type="text"]:focus{
border: 2px solid #1abc9d
}
input[type="password"]{
display: block;
width: 309px;
height: 35px;
margin: 15px auto;
background: #fff;
border: 0px;
padding: 5px;
font-size: 16px;
border: 2px solid #fff;
transition: all 0.3s ease;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type="password"]:focus{
border: 2px solid #1abc9d
}
input[type="submit"]{
display: block;
background: #1abc9d;
width: 314px;
padding: 12px;
cursor: pointer;
color: #fff;
border: 0px;
margin: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 17px;
transition: all 0.3s ease;
}
input[type="submit"]:hover{
background: #09cca6
}
a{
text-align: center;
font-family: Arial;
color: gray;
display: block;
margin: 15px auto;
text-decoration: none;
transition: all 0.3s ease;
font-size: 12px;
}
a:hover{
color: #1abc9d;
}
::-webkit-input-placeholder {
color: gray;
}
:-moz-placeholder { /* Firefox 18- */
color: gray;
}
::-moz-placeholder { /* Firefox 19+ */
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
@media only screen and (max-width: 767px) {
input[type="text"] {
background: none repeat scroll 0 0 #fff;
border: 2px solid #fff;
border-radius: 5px;
display: block;
font-size: 12px;
height: 20px;
margin: 12px auto;
padding: 5px;
transition: all 0.3s ease 0s;
width: 220px;
}
input[type="submit"] {
margin: 26px auto auto;
padding: 10px 5px;
width: 200px;
}
.form {
background: none repeat scroll 0 0 #edeff1;
border-radius: 10px;
height: 230px;
margin: 0 auto;
padding-top: 20px;
width: 300px;
}
.outer-screen:before {
width: auto;
height: auto;
}
.outer-screen:after {
width: auto;
height: auto;
}
.outer-screen {
width: auto;
height: auto;
margin: 10px auto;
}
.inner-screen {
width: auto;
height: auto;
}
}
</style>
</head>
<body>
{% if error %}
<h1> Error: {{error}}</h1>
{% else %}
<h1>Wiggle - OAuth2</h1>
<div class="stand">
<div class="outer-screen">
<div class="inner-screen">
<div class="form">
<form method="post">
{% if user_name %}
Welcome back {{user_name}},
{% else %}
<input type="text" name="username" class="username" placeholder="Enter your email" />
<input type="password" name="password" placeholder="Password" />
{% endif %}
<center>
The client <br/>
<b>{{client_name}}</b><br/>
requests the following permissions:
</center>
<ul>
{% for scope_desc in scope_list %}
<li>{{ scope_desc }}</li>
{% endfor %}
</ul>
<!-- Hidden values passed on fromt he server -->
<input type="hidden" name="response_type" value="{{response_type}}" />
<input type="hidden" name="client_id" value="{{client_id}}" />
{% if redirect_uri %}<input type="hidden" name="redirect_uri" value="{{redirect_uri}}" />{% endif %}
{% if scope %}<input type="hidden" name="scope" value="{{scope}}" />{% endif %}
{% if state %}<input type="hidden" name="state" value="{{state}}" />{% endif %}
<!-- Submit button -->
<input type="submit" value="Grant" />
</form>
</div>
</div>
</div>
</div>
{% endif %}
</body>
</html>