From 8855c93594c4eca1d0c5d3e2f9f2b35cc7d420a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Pu=C5=A1nik?= <marko.pusnik@guru.si>
Date: Tue, 13 Oct 2015 15:34:51 +0200
Subject: login, sinup and change password modals translations

---
 index.html              | 71 ++++++++++++++++++++++++++++---------------------
 js/codeq/login.js       |  2 +-
 js/codeq/translation.js | 25 ++++++++++++-----
 res/en.json             | 28 ++++++++++++++++++-
 res/sl.json             | 28 ++++++++++++++++++-
 5 files changed, 114 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index bd861d8..b78f190 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
                         <li style="display: none;" id="navigation-robot"><a href="" data-tkey="robot">Robot</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
-                        <p class="navbar-text" id="signed-in-title"></p>
+                        <p class="navbar-text"><span data-tkey="signed_in_as">Signed in as </span><span id="signed-in-title">Janez</span></p>
                         <!--<li class="dropdown lang-selection">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                 <span class="lang-choice"></span>
@@ -303,30 +303,30 @@
             <div class="modal-dialog modal-sm">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h3 class="text-center">Please sign in</h3>
+                        <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
                     </div>
                     <div class="modal-body">
                         <div class="row">
                             <div class="col-md-12">
-                                Login via
+                                <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">
                                         <img src="res/gumb_aaiprijava.png" style="width: 49%">
                                     </a>
                                 </div>
-                                or
+                                <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">Username</label>
-                                        <input type="text" class="form-control" id="username" placeholder="Username" required>
+                                        <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">Password</label>
-                                        <input type="password" class="form-control" id="password" placeholder="Password" required>
+                                        <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 class="help-block text-right"><a href="#">Forgot the password?</a></div-->
                                     </div>
                                     <div class="form-group">
-                                        <button class="btn btn-primary btn-block" type="button" id="submit">Sign in</button>
+                                        <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
                                     </div>
                                     <!--div class="checkbox">
                                         <label>
@@ -339,7 +339,11 @@
                     </div><!--/modal-body-->
                     <div class="modal-footer">
                         <div class="text-center">
-                            New here ? <a href="#" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalSignUp"><b>Sign Up</b></a>
+                            <span data-tkey="signin_footer">New here ? </span><a href="#" role="button" data-dismiss="modal" data-toggle="modal" 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><!--/modal-footer-->
                 </div>
@@ -352,35 +356,42 @@
                 <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">Sign up</h3>
+                        <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                     </div>
                     <div class="modal-body">
                         <form id="formSignUp" class="form">
                             <div class="form-group">
-                                <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="">
+                                <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">Display name</label>
-                                <input class="form-control" name="name" id="modalSignUpName" type="text" placeholder="desired display name" title="Display name">
+                                <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">E-mail</label>
-                                <input class="form-control" name="email" id="modalSignUpEmail" type="email" placeholder="email" title="E-mail" required="">
+                                <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">Password</label>
-                                <input class="form-control" name="password" id="modalSignUpPassword" type="password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <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">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,}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <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><!--/row-->
                     </div><!--/modal-body-->
                     <div class="modal-footer">
-                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">Cancel</button>
-                        <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" value="Sign up">
+                        <div>
+                            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" data-tkey="cancel">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><!--/modal-footer-->
                 </div>
             </div>
@@ -391,23 +402,23 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="text-center">Change password </h3>
+                        <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
                     </div>
                     <div class="modal-body">
                         <form id="formChangePassword" class="form">
                             <div class="form-group">
-                                <label class="control-label small">New Password</label>
-                                <input class="form-control" placeholder="Enter a new password" name="new" id="modalChangePasswordNew" type="password" pattern="^[a-z,A-Z,0-9,_]{6,}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <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">Verify Password</label>
-                                <input class="form-control" placeholder="Repeat the password again" name="verify" id="modalChangePasswordVerify" type="password" pattern="^[a-z,A-Z,0-9,_]{6,}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <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><!--/row-->
                     </div><!--/modal-body-->
                     <div class="modal-footer">
-                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
-                        <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" value="Change password"></button>
+                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel">Cancel</button>
+                        <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
                     </div><!--/modal-footer-->
                 </div>
             </div>
diff --git a/js/codeq/login.js b/js/codeq/login.js
index d127fe3..b8323e1 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -16,7 +16,7 @@
                     if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message);
 
                     //nav signed in...
-                    $('#signed-in-title').html('Signed in as '+(data.name||$('#username').val()));
+                    $('#signed-in-title').html(data.name||$('#username').val());
                     //merge with profile page
                     $('#profileUsername').html($('#username').val());
                     $('#profileName').html(data.name||'undefined');
diff --git a/js/codeq/translation.js b/js/codeq/translation.js
index dda5aec..bd2bf32 100644
--- a/js/codeq/translation.js
+++ b/js/codeq/translation.js
@@ -1,11 +1,11 @@
 (function () {
 
     var dicts = {},
-        translateElement = function (jqElt, lang) {
+        translateElement = function (jqElt, tkey, lang) {
             var dictionaryKey = jqElt.data('dict') || 'gui',
-                translationKey = jqElt.data('tkey'),
+                translationKey = jqElt.data(tkey),
                 dict = dicts[dictionaryKey],
-                translations, html, key;
+                translations, html, key, att;
             if (dict === codeq.tr.emptyDictionary) return; // silent ignore
             if (!dict) {
                 codeq.log.error('Cannot find translation dictionary ' + dictionaryKey);
@@ -40,11 +40,22 @@
                     }
                 }
             }
-            jqElt.html(html);
+            att = tkey.substring(5);
+            if (att) jqElt.attr(att,html);
+            else jqElt.html(html);
         },
         translateDocument = function (lang) {
             $('[data-tkey]').each(function () {
-                translateElement($(this), lang);
+                translateElement($(this), 'tkey', lang);
+            });
+            $('[data-tkey-placeholder]').each(function () {
+                translateElement($(this), 'tkey-placeholder', lang);
+            });
+            $('[data-tkey-title]').each(function () {
+                translateElement($(this), 'tkey-title', lang);
+            });
+            $('[data-tkey-value]').each(function () {
+                translateElement($(this), 'tkey-value', lang);
             });
         };
 
@@ -71,10 +82,10 @@
         'translateDom': function (jqTopElt) {
             var lang = codeq.getLang();
             jqTopElt.filter('[data-tkey]').each(function () {
-                translateElement(jqTopElt, lang)
+                translateElement(jqTopElt,'tkey', lang)
             });
             jqTopElt.find('[data-tkey]').each(function () {
-                translateElement($(this), lang);
+                translateElement($(this),'tkey', lang);
             });
         },
 
diff --git a/res/en.json b/res/en.json
index 4cae11b..1a41876 100644
--- a/res/en.json
+++ b/res/en.json
@@ -12,5 +12,31 @@
   "btn_test": "Test",
   "btn_run": "Run",
   "btn_stop": "Stop",
-  "btn_more": "More..."
+  "btn_more": "More...",
+  "signin_header": "Please sign in",
+  "signin_via": "Login via",
+  "signin_or": "or",
+  "signin_button": "Sign in",
+  "signin_footer": "New here? ",
+  "signin_footer_signup": "Sign Up",
+  "username": "Username",
+  "password": "Password",
+  "name" : "Display name",
+  "email": "E-mail",
+  "cancel": "Cancel",
+  "signup_header": "Sign up",
+  "signup_button": "Sign up",
+  "username_placeholder": "Desired username",
+  "name_placeholder" : "Desired display name",
+  "password_verify": "Verify password",
+  "password_verify_placeholder": "Repeat the password again",
+  "username_title": "Choose a alpha-numeric username of 5-15 characters.",
+  "name_title": "Choose a display name.",
+  "email_title": "Enter a valid email address.",
+  "password_title": "Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters.",
+  "change_password_header": "Change password",
+  "password_new": "New Password",
+  "password_new_placeholder": "Enter a new password",
+  "change_password_button": "Change password",
+  "signed_in_as": "Signed in as "
 }
diff --git a/res/sl.json b/res/sl.json
index 26d33ec..1d8bc5c 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -12,5 +12,31 @@
   "btn_test": "Testiraj",
   "btn_run": "Zaženi",
   "btn_stop": "Ustavi",
-  "btn_more": "Več..."
+  "btn_more": "Več...",
+  "signin_header": "Prijava",
+  "signin_via": "Prijava prek",
+  "signin_or": "ali",
+  "signin_button": "Prijavi se",
+  "signin_footer": "Novi tukaj ? ",
+  "signin_footer_signup": "Registriraj se!",
+  "username": "Uporabniško ime",
+  "password": "Geslo",
+  "name" : "Ime za prikaz",
+  "email": "Elektronski naslov",
+  "cancel": "Prekliči",
+  "signup_header": "Registracija",
+  "signup_button": "Registriraj se",
+  "username_placeholder": "Želeno uporabniško ime",
+  "name_placeholder" : "Želeno ime za prikaz",
+  "password_verify": "Preverjanje gesla",
+  "password_verify_placeholder": "Ponovi geslo",
+  "username_title": "Izberite uporabniško ime 5-15 alfa-numerični znakov.",
+  "name_title": "Izberite ime za prikaz.",
+  "email_title": "Vnesite veljaven e-poštni naslov.",
+  "password_title": "Izberite geslo z vsaj eno številko, eno majhno in eno veliko črko in vsaj 6 znakov.",
+  "change_password_header": "Sprememba gesla",
+  "password_new": "Novo geslo",
+  "password_new_placeholder": "Vnesite novo geslo",
+  "change_password_button": "Spremeni geslo",
+  "signed_in_as": "Prijavljeni ste kot "
 }
-- 
cgit v1.2.1