Merge branch 'master' into layout

8 files changed, 196 insertions, 173 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 27815d7..67af384 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -32,30 +32,10 @@ body {
     margin: 0 auto;
 }
 
-/* modalLogIn */
-#modalLogIn{
-    min-width: 250px;
-    padding: 14px 14px 0;
-    overflow:hidden;
-    background-color:rgba(255,255,255,.8);
+/* modal screens*/
+#screen_login, #screen_signup, #screen_change_pass {
+    padding: 15px 0;
 }
-#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 5ec560c..c777fec 100644
--- a/index.html
+++ b/index.html
@@ -55,13 +55,14 @@
                                 <li><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
                             </ul>
                         </li>
-                        <li class="dropdown" id="settings_dropdown_menu">
+                        <li id="settings_dropdown_menu"> <!-- class="dropdown"-->
                             <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+                            <!--<a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
                             <div class="dropdown-menu" style="background-color: #fff">
                                 <form class="form col-sm-12">
                                     <div class="form-group">
                                         <span class="small" data-tkey="language">Language</span>
-                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
                                         <select class="form-control" id="gui_lang_select">
                                             <option value="sl">Slovensko</option>
                                             <option value="en">English</option>
@@ -69,8 +70,8 @@
                                     </div>
                                     <div class="form-group">
                                         <span class="small" data-tkey="robot_address">Robot’s address</span>
-                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Set the robot's IP address.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="ip_title" title="Choose a valid IPv4 address">
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
                                     </div>
                                     <div class="form-group">
                                         <div class="text-right">
@@ -79,7 +80,7 @@
                                         </div>
                                     </div>
                                 </form>
-                            </div>
+                            </div>-->
                         </li>
                     </ul>
                 </div><!--/.nav-collapse -->
@@ -87,138 +88,137 @@
             </div>
         </div>
 
-<!--TODO -->
         <!-- login screen -->
         <div class="container" id="screen_login" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <!--div class="modal-content"-->
-                    <div class="row"><!--class="modal-header"-->
-                        <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
-                    </div>
-                    <div class="row"><!--class="modal-body"-->
-                        <div class="row">
-                            <div class="col-md-12">
-                                <span data-tkey="signin_via">Login via</span>
-                                <div class="ssa-buttons">
-                                    <a href="" class="ssa-buttons" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalAAI" id="aai_login_button">
-                                        <img src="res/gumb_aaiprijava.png" style="width: 49%">
-                                    </a>
-                                </div>
-                                <span data-tkey="signin_or">or</span>
-                                <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" data-tkey="username">Username</label>
-                                        <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
-                                    </div>
-                                    <div class="form-group">
-                                        <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                        <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
-                                    </div>
-                                    <div class="form-group">
-                                        <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
-                                    </div>
-                                    <!--div class="checkbox">
-                                        <label>
-                                            <input type="checkbox"> keep me logged-in
-                                        </label>
-                                    </div-->
-                                </form>
-                            </div>
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading"><!--class="modal-header"-->
+                            <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
                         </div>
-                    </div>
-                    <div class="row"><!-- class="modal-footer"-->
-                        <div class="text-center">
-                            <span data-tkey="signin_footer">New here ? </span><a href="" role="button" data-dismiss="modal" data-toggle="modal" id="signup_button"> <!--data-target="#modalSignUp"--><b data-tkey="signin_footer_signup">Sign Up</b></a>
+                        <div class="panel-body"><!--class="modal-body"-->
+                            <span data-tkey="signin_via">Login via</span>
+                            <div class="ssa-buttons">
+                                <a href="" class="ssa-buttons" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalAAI" id="aai_login_button">
+                                    <img src="res/gumb_aaiprijava.png" style="width: 49%">
+                                </a>
+                            </div>
+                            <span data-tkey="signin_or">or</span>
+                            <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" data-tkey="username">Username</label>
+                                    <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
+                                </div>
+                                <div class="form-group">
+                                    <label class="sr-only" for="password" data-tkey="password">Password</label>
+                                    <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
+                                </div>
+                                <div class="form-group">
+                                    <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
+                                </div>
+                                <!--div class="checkbox">
+                                    <label>
+                                        <input type="checkbox"> keep me logged-in
+                                    </label>
+                                </div-->
+                            </form>
                         </div>
-                        <br>
-                        <div class="text-center small">
-                            <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                        <div class="panel-footer"><!-- class="modal-footer"-->
+                            <div class="text-center">
+                                <span data-tkey="signin_footer">New here ? </span><a href="" role="button" data-dismiss="modal" data-toggle="modal" id="signup_button"> <!--data-target="#modalSignUp"--><b data-tkey="signin_footer_signup">Sign Up</b></a>
+                            </div>
+                            <br>
+                            <div class="text-center small">
+                                <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                            </div>
                         </div>
                     </div>
-                <!--/div-->
+                </div>
             </div>
         </div>
 
         <!-- AAI login -->
-        <div class="container" id="screen_aai_login" style="display: none;">
-            <div class="container">
-                <div class="row">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" id="cancel_aai_login">×</button>
-                    <h3 class="text-center">Arnes AAI</h3>
-                </div>
-            </div>
-            <div class="container">
-                <div class="row" style="padding: 0; padding-top: 5px;">
-                    <iframe width="100%" height="850px"  frameborder="0" scrolling="no" allowtransparency="true" src="" id="aai_iframe"></iframe>
+        <div class="container-fluid" id="screen_aai_login" style="display: none;">
+            <div class="row">
+                <div class="col-md-12" style="padding: 0;">
+                    <button type="button" class="pull-right" id="cancel_aai_login" style="position: absolute; top:10px; right:10px;" data-tkey="go_back">Go back</button>
+                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="" id="aai_iframe"></iframe>
                 </div>
             </div>
         </div>
 
         <!--Sign up screen-->
         <div class="container" id="screen_signup" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <div class="row">
-                    <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
-                </div>
-                <div class="row">
-                    <form id="formSignUp" class="form">
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="username">Username</label>
-                            <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="name">Display name</label>
-                            <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="email">E-mail</label>
-                            <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password">Password</label>
-                            <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-body">
+                            <form id="formSignUp" class="form">
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="username">Username</label>
+                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="name">Display name</label>
+                                    <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="email">E-mail</label>
+                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password">Password</label>
+                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
+                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                            </form>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                            <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-footer">
+                            <div class="text-center">
+                                <button class="btn btn-default" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
+                                <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
+                            </div>
+                            <br>
+                            <div class="text-center small">
+                                <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                            </div>
                         </div>
-                    </form>
-                </div>
-                <div class="row">
-                    <div>
-                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
-                        <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
                     </div>
-                    <br>
-                    <div class="text-center small">
-                        <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
-                    </div>
-
                 </div>
             </div>
         </div>
 
         <!-- change password screen -->
         <div class="container" id="screen_change_pass" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <div class="row">
-                    <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
-                </div>
-                <div class="row">
-                    <form id="formChangePassword" class="form">
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_new">New Password</label>
-                            <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                            <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-body">
+                            <form id="formChangePassword" class="form">
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_new">New Password</label>
+                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_verify">Verify Password</label>
+                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                            </form>
                         </div>
-                    </form>
-                </div>
-                <div class="row">
-                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
-                    <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
+                        <div class="panel-footer text-center">
+                            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
+                            <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -395,20 +395,34 @@
             </div><!--row-->
         </div><!--container-->
 
-        <!-- Modals -->
-        <!--div id="modalAAI" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">×</button>
-                        <h3 class="text-center">Arnes AAI</h3>
+        <!-- Settings screen -->
+        <div class="container" id="screen_settings" style="display: none;">
+            <div class="row">
+                <form class="form col-sm-4 col-md-offset-4" id="settingsForm">
+                    <div class="form-group">
+                        <span class="small" data-tkey="language">Language</span>
+                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                        <select class="form-control" id="gui_lang_select">
+                            <option value="sl">Slovensko</option>
+                            <option value="en">English</option>
+                        </select>
                     </div>
-                    <div class="modal-body" style="padding: 0;">
-                        <iframe width="100%" height="500px" frameborder="0" scrolling="no" allowtransparency="true" src="https://codeq.si/Shibboleth.sso/Login?forceAuthn=1"></iframe>
+                    <div class="form-group">
+                        <span class="small" data-tkey="robot_address">Robot’s address</span>
+                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
                     </div>
-                </div>
+                    <div class="form-group">
+                        <div class="text-right">
+                            <button type="button" class="btn btn-default" id="settings_cancel_btn">Close</button>
+                            <input form="settingsForm" type="submit" class="btn btn-primary" id="settings_save_btn" value="Save"/>
+                        </div>
+                    </div>
+                </form>
             </div>
-        </div-->
+        </div>
+
+        <!-- Modals -->
 
         <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
              Used as a wait screen; must be the last element in the DOM.
diff --git a/js/codeq/aaiLogin.js b/js/codeq/aaiLogin.js
index 74a9ee4..2e49138 100644
--- a/js/codeq/aaiLogin.js
+++ b/js/codeq/aaiLogin.js
@@ -36,6 +36,7 @@
                 .fail(function(reason){
                     codeq.log.error('SAML login failed: ' + reason);
                     alert('SAML login failed: ' + reason);
+                    codeq.globalStateMachine.transition('login');
                 })
                 .done();
 
diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js
index 5dbbf1e..9483e05 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -130,5 +130,9 @@
         codeq.globalStateMachine.transition('changePassword');
         e.preventDefault();//prevent this since we'll trigger a page reload otherwise
     });
+    $('#settingsTrigger').on('click',function(e){
+        codeq.globalStateMachine.transition('settings');
+        e.preventDefault();
+    });
 
 })();
diff --git a/js/codeq/settings.js b/js/codeq/settings.js
index dd844a5..5b57c49 100644
--- a/js/codeq/settings.js
+++ b/js/codeq/settings.js
@@ -5,37 +5,52 @@
 
     var guiLangSelect = $('#gui_lang_select'),
         robotAddressInput = $('#robot_address_input'),
-        previousGuiLang = guiLangSelect.val(),
-        closedWithSave = false;
+        jqDisabledOverlay = $('#disabled'),
+        jqSettForm = $("#settingsForm"),
+        jqSettCancelBtn = $("#settings_cancel_btn"),
+        jqScreenSettings = $('#screen_settings');
 
-    guiLangSelect.on("change",function() {
-        var lang = guiLangSelect.val();
-        if (lang in codeq.supportedLangs) {
-            codeq.setLang(lang);
-        }
-    });
-
-    $("#settings_save_btn").on("click", function() {
-        closedWithSave = true;
-    });
-
-    $("#settings_dropdown_menu").on("shown.bs.dropdown", function() {
-        closedWithSave = false;
-        previousGuiLang = codeq.settings['gui_lang'];
-    }).on("hidden.bs.dropdown", function() {
-        if(closedWithSave){
-            codeq.settings['robot_address'] = robotAddressInput.val();
-            codeq.comms.updateSettings(codeq.settings)
-                .then(function (data) {
-                    if (data.code !== 0) {
-                        throw new Error('Updating settings failed, code: ' + data.code + ', message: ' + data.message);
-                    }
-                })
-                .done();
-        }else{
-            guiLangSelect.val(previousGuiLang);
-            if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang);
-            robotAddressInput.val(codeq.settings['robot_address']);
+    codeq.globalStateMachine.register('settings',{
+        'enter':function(){
+            jqDisabledOverlay.css('display', '');
+            robotAddressInput.val(codeq.settings['robot_address']);//set the robot address once we enter the state
+            var previousGuiLang = codeq.settings['gui_lang'];
+            jqSettForm.on("submit", function(e) {
+                codeq.settings['robot_address'] = robotAddressInput.val();
+                codeq.comms.updateSettings(codeq.settings)
+                    .then(function (data) {
+                        if (data.code !== 0) {
+                            throw new Error('Updating settings failed, code: ' + data.code + ', message: ' + data.message);
+                        }
+                        history.back();
+                    })
+                    .fail(function(reason){
+                        codeq.log.error('Settings update failed: ' + reason);
+                        alert('Settings update failed: ' + reason);
+                    })
+                    .done();
+                e.preventDefault();
+            });
+            jqSettCancelBtn.on("click",function(){
+                guiLangSelect.val(previousGuiLang);
+                if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang);
+                history.back();
+            });
+            guiLangSelect.on("change",function() {
+                var lang = guiLangSelect.val();
+                if (lang in codeq.supportedLangs) {
+                    codeq.setLang(lang);
+                }
+            });
+            jqScreenSettings.css('display', '');
+            jqDisabledOverlay.css('display', 'none');
+        },
+        'exit':function(){
+            jqSettForm.off('submit');
+            jqSettCancelBtn.off('click');
+            guiLangSelect.off('select');
+            robotAddressInput.val('');
+            jqScreenSettings.css('display', 'none');
         }
     });
 })();
diff --git a/js/codeq/translation.js b/js/codeq/translation.js
index f0c8aab..1e85273 100644
--- a/js/codeq/translation.js
+++ b/js/codeq/translation.js
@@ -57,6 +57,9 @@
             $('[data-tkey-value]').each(function () {
                 translateElement($(this), 'tkey-value', lang);
             });
+            $('[data-tkey-data-content]').each(function () {
+                translateElement($(this), 'tkey-data-content', lang);
+            });
         };
 
     // Translate the whole document when the user switches the display language
diff --git a/res/en.json b/res/en.json
index c721548..bde0a98 100644
--- a/res/en.json
+++ b/res/en.json
@@ -1,6 +1,9 @@
 {
   "language": "Language",
+  "ui_language_title": "Select the UI language.",
   "robot_address": "Robot’s IP address",
+  "robot_address_placeholder": "IP address",
+  "robot_address_title": "Set the robot's IPv4 or IPv6 address.",
   "problem_list": "Problems",
   "python": "Python",
   "prolog": "Prolog",
diff --git a/res/sl.json b/res/sl.json
index 7745fd7..17ae22b 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -1,6 +1,9 @@
 {
   "language": "Jezik",
+  "ui_language_title": "Izberite jezik uporabniškega vmesnika.",
   "robot_address": "Robotov naslov IP",
+  "robot_address_placeholder": "IP naslov",
+  "robot_address_title": "Vnesite IPv4 or IPv6 naslov robota.",
   "problem_list": "Naloge",
   "python": "Python",
   "prolog": "Prolog",