diff options
| -rw-r--r-- | css/codeq.css | 26 | ||||
| -rw-r--r-- | index.html | 95 | ||||
| -rw-r--r-- | js/codeq/login.js | 4 |
3 files changed, 98 insertions, 27 deletions
diff --git a/css/codeq.css b/css/codeq.css index 0e4c689..3a9195f 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 { @@ -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('');
}
});
|