summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMarko Pušnik <marko.pusnik@guru.si>2015-09-29 16:06:11 +0200
committerMarko Pušnik <marko.pusnik@guru.si>2015-09-29 16:06:11 +0200
commit91f3b77d4743731b6f0b2f282a592752565d7d74 (patch)
tree91cf098a1495b409ace434e179422f7aa1d87078
parent22cb497f9ed19548e30a4c86dd99aaa91fd4b344 (diff)
made login as modal with arnesaai button + modals beautified;
-rw-r--r--css/codeq.css26
-rw-r--r--index.html95
-rw-r--r--js/codeq/login.js4
3 files changed, 98 insertions, 27 deletions
diff --git a/css/codeq.css b/css/codeq.css
index 138761b..2efa5b0 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -44,6 +44,32 @@ body {
border-top-right-radius: 0;
}
+/* modalLogIn */
+
+#modalLogIn{
+ min-width: 250px;
+ padding: 14px 14px 0;
+ overflow:hidden;
+ background-color:rgba(255,255,255,.8);
+}
+#modalLogIn .help-block{
+ font-size:12px
+}
+#modalLogIn .bottom{
+ background-color:rgba(255,255,255,.8);
+ border-top:1px solid #ddd;
+ clear:both;
+ padding:14px;
+}
+#modalLogIn .ssa-buttons{
+ margin-bottom: 1em;
+}
+
+#modalLogIn .form-group {
+ margin-bottom: 10px;
+}
+
+
/* screen language */
#screen_language {
diff --git a/index.html b/index.html
index 105fae4..20137a7 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
<li style="display: none;" id="navigation-prolog"><a href="">Prolog</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
- <p class="navbar-text" id="signed-in-title">Signed in as Franc Jožef</p>
+ <p class="navbar-text" id="signed-in-title"></p>
<li class="dropdown lang-selection">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="lang-choice"></span>
@@ -112,7 +112,7 @@
</div>
<!-- login screen -->
- <div class="container" id="screen_login">
+ <!--div class="container" id="screen_login">
<form class="form-signin">
<h2 class="form-signin-heading">Please login</h2>
<div class="form-group">
@@ -123,10 +123,10 @@
<button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button>
</div>
<div class="form-group">
- <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignIn">New User? Sign-in..</a>
+ <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp">New User? Sign-up..</a>
</div>
</form>
- </div>
+ </div-->
<!-- main screen: programming language selection, settings, etc. -->
@@ -297,63 +297,106 @@
</div><!--container-->
<!-- Modals -->
- <div id="modalSignIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
- <div class="modal-dialog">
+
+ <div id="modalLogIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h3 class="text-center">Please sign in</h3>
+ </div>
+ <div class="modal-body">
+ <div class="row">
+ <div class="col-md-12">
+ Login via
+ <div class="ssa-buttons">
+ <img src="res/gumb_aaiprijava.png" style="width: 49%">
+ </div>
+ or
+ <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
+ <div class="form-group">
+ <label class="sr-only" for="username">Username</label>
+ <input type="text" class="form-control" id="username" placeholder="Username" required>
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="password">Password</label>
+ <input type="password" class="form-control" id="password" placeholder="Password" required>
+ <div class="help-block text-right"><a href="#">Forgot the password?</a></div>
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary btn-block" data-dismiss="modal" type="button" id="submit">Sign in</button>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> keep me logged-in
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div><!--/modal-body-->
+ <div class="modal-footer">
+ <div class="text-center">
+ New here ? <a href="#" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp"><b>Sign Up</b></a>
+ </div>
+ </div><!--/modal-footer-->
+ </div>
+ </div>
+ </div>
+
+
+ <div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
+ <div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h2 class="text-center">Sign-in</h2>
+ <h3 class="text-center">Sign up</h3>
</div>
<div class="modal-body">
<form class="form" method="post">
- <div class="form-group">
- <label class="control-label">Email</label>
- <input class="form-control" name="email" id="inputEmail" type="email" data-ng-model="newuser.email" placeholder="email@you.com (kept private)" required="">
- </div>
<div class="form-group" bs-has-error="">
- <label class="control-label">Username</label>
- <input class="form-control" name="username" id="inputUsername" type="text" data-ng-model="newuser.username" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required="">
+ <label class="control-label small">Username</label>
+ <input class="form-control" name="username" id="modalSignUpUsername" type="text" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required="">
</div>
<div class="form-group">
- <label class="control-label">Password</label>
- <input class="form-control" name="password" id="inputpassword" type="password" data-ng-model="newuser.password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+ <label class="control-label small">Password</label>
+ <input class="form-control" name="password" id="modalSignUpPassword" type="password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
</div>
<div class="form-group">
- <label class="control-label">Verify (repeat password)</label>
- <input class="form-control" name="verify" id="inputVerify" type="password" data-ng-model="newuser.verify" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+ <label class="control-label small">Verify (repeat password)</label>
+ <input class="form-control" name="verify" id="modalSignUpVerify" type="password" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
</div>
</form><!--/row-->
</div><!--/modal-body-->
<div class="modal-footer">
- <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
- <button class="btn btn-lg btn-primary" id="btnRegister" type="submit">Sign</button>
+ <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">Cancel</button>
+ <button class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modalLogIn" id="btnSignUp" type="submit">Sign up</button>
</div><!--/modal-footer-->
</div>
</div>
</div>
<div id="modalChangePassword" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
- <div class="modal-dialog">
+ <div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h2 class="text-center">Password Change</h2>
+ <h3 class="text-center">Change password </h3>
</div>
<div class="modal-body">
<form class="form" method="post">
<div class="form-group">
- <label>New Password</label>
- <input class="form-control input-lg" placeholder="Enter a new password" name="new" type="password">
+ <label class="control-label small">New Password</label>
+ <input class="form-control" placeholder="Enter a new password" name="new" type="password">
</div>
<div class="form-group">
- <label>Verify Password</label>
- <input class="form-control input-lg" placeholder="Repeat the password again" name="verify" type="password">
+ <label class="control-label small">Verify Password</label>
+ <input class="form-control" placeholder="Repeat the password again" name="verify" type="password">
</div>
</form><!--/row-->
</div><!--/modal-body-->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
- <button class="btn btn-lg btn-primary" id="btnPasswdChange" type="submit">Change</button>
+ <button class="btn btn-primary" id="btnPasswdChange" type="submit">Change</button>
</div><!--/modal-footer-->
</div>
</div>
diff --git a/js/codeq/login.js b/js/codeq/login.js
index f590acb..248e8c3 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -28,8 +28,9 @@
};
codeq.globalStateMachine.register('login',{
'enter': function(){
+ $('#signed-in-title').html('');
$("#submit").on('click', loginFun);
- //$('#modalLogin').modal();
+ $('#modalLogIn').modal();
$("#screen_login").css('display', '');
$('#disabled').css('display', 'none');
@@ -37,6 +38,7 @@
'exit' : function(){
$("#submit").off('click', loginFun);
$("#screen_login").css('display', 'none');
+ $('#signed-in-title').html('Signed in as '+$('#username').val());
$("#password").val('');
}
});