<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <div class="moz-cite-prefix"><br>
      We should use the default kimchi style in the login page.<br>
      <br>
      <br>
      <img src="cid:part1.00000005.04090105@linux.vnet.ibm.com" alt=""><br>
      <br>
      <br>
      The same header.<br>
      And instead of the user information in the right corner, the
      language selection would be displayed.<br>
      Note the background is silver and the header is centered.<br>
      <br>
      And vertical and horizontal aligned would be the login form, like
      it is today.<br>
      <br>
      <img src="cid:part2.09000603.04050705@linux.vnet.ibm.com" alt=""><br>
      <br>
      We should keep the same input styles.<br>
      And I also prefer the "Log in" button to change to "Logging..."
      instead the message in the form.<br>
      <br>
      <br>
      <br>
      On 06/05/2014 01:10 PM, <a class="moz-txt-link-abbreviated" href="mailto:shaohef@linux.vnet.ibm.com">shaohef@linux.vnet.ibm.com</a> wrote:<br>
    </div>
    <blockquote
      cite="mid:1401984638-13103-2-git-send-email-shaohef@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">From: ShaoHe Feng <a class="moz-txt-link-rfc2396E" href="mailto:shaohef@linux.vnet.ibm.com">&lt;shaohef@linux.vnet.ibm.com&gt;</a>

this page is used for the session timeout or first login.

Signed-off-by: ShaoHe Feng <a class="moz-txt-link-rfc2396E" href="mailto:shaohef@linux.vnet.ibm.com">&lt;shaohef@linux.vnet.ibm.com&gt;</a>
Signed-off-by: Yu Xin Huo <a class="moz-txt-link-rfc2396E" href="mailto:huoyuxin@linux.vnet.ibm.com">&lt;huoyuxin@linux.vnet.ibm.com&gt;</a>
---
 ui/images/progressing.gif | Bin 0 -&gt; 1152 bytes
 ui/pages/login.html.tmpl  | 220 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 220 insertions(+)
 create mode 100644 ui/images/progressing.gif
 create mode 100644 ui/pages/login.html.tmpl

diff --git a/ui/images/progressing.gif b/ui/images/progressing.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6552d41d9d4c874091bb51931c6adf64a95e8bd0
GIT binary patch
literal 1152
zcmZ?wbhEHb6k!ly*v!E2|NsBHckiA#b7s?~O&amp;uK_IXO9@p`oUxrgCy}4A_9;e{Mh5
zkYH!W09PYD17=2`8pWS1oFWVy3_2k7AY&amp;O=+5}E^`WY^hIhD@I;2`qkhUamCHs#2?
zD{Sl5ddqAu;o;E8n07H&amp;VTOd$9w+z3Od8dz)1OOlg@hfQ?6P6gg)Nhut~h8s_iHy|
zTx?f&lt;DfNuF4qs+in1T70o7P)P87f1&lt;g5(0~t-`bz%`;&lt;c7;R*Hby&amp;0+Cd*D$nyx)7
zxH&gt;hoEs9-2GEYbl&lt;TO?^r*$AZO&amp;~F#&lt;dR{_!xK!0-EtLPZ*p|yWoF`%&gt;SmZA?aQ&lt;9
zUT3kA$h=8X2{%vLaEeZ2FfFvxHCy+@)2xTXXx&amp;nW19L8~I4mhFCLSR*N5YUN_g8RC
zxvG$d3rC2Yoni&gt;Hr8Z+mk+UtMt&amp;Fyriq3S|nYyz*lh|s_)v7fmBnyPWjzbSOeSwpn
ztM^*GK3gr@WX{W=;H4@s$Eix`o#&amp;Z+UC|vq;?Mm$*qz&gt;q{MpOLKD$V&gt;lW^GM@gRp&lt;
zTfqAxmTMW#NQtz1Ow(GUENaLTnG@~OSSl%)a-~@^*=_L^Wu6LazRZG$dI^iu%U-z%
zg&lt;00g*_8=1ySk){v9Pk(*~&lt;9qvQD2qQDdsojG1{NY_a__TQemj7eK-u-Fqm&gt;f&gt;utm
zWMS=L&amp;jJU059@Suul#8&lt;RCK0juuU^pO9X~|9`=wYHdzoCYCehQmh?GGSt;IO&amp;EY61
z^|cU^WKC}pQa3GC)^bS)J5HFrADAqr$@=Tg_KIeUMR6Q@nr+9QW_y9zNsLj!T)@YO
zmFW&gt;EN`0IXPrZ&gt;S5M3ptD%hrTMQhc8T&gt;+_g4tF#}E)IMpc&lt;k8J3C&gt;bEce!tTI4V-^
zEEL|{;B8wW%&lt;SUK!k*&gt;CY&amp;#hksVX{CWv466RGb|aXRcN%49rjY*aHrnWY;d4a(eT&lt;
sn9_&lt;U58lHODbH9KGQC;#6@s@G?AG7t-SQycLr1Fr#FC=U9tH+$0KoWQ9smFU

literal 0
HcmV?d00001

diff --git a/ui/pages/login.html.tmpl b/ui/pages/login.html.tmpl
new file mode 100644
index 0000000..0e4bb0d
--- /dev/null
+++ b/ui/pages/login.html.tmpl
@@ -0,0 +1,220 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2014
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *#
+#unicode UTF-8
+#import gettext
+#from kimchi.cachebust import href
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
+#silent _ = t.gettext
+#silent _t = t.gettext
+#from kimchi.config import get_version
+&lt;!DOCTYPE html&gt;
+&lt;html lang="$lang.lang[0]"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;Kimchi&lt;/title&gt;
+&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"/&gt;
+&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /&gt;
+&lt;style type="text/css"&gt;
+.login {
+    font-family: Arial;
+    margin: 0px;
+}
+.login input.invalid-field {
+    border-color: #C85305 !important;
+}
+.login .header {
+    background: none repeat scroll 0 0 #353D40;
+    border-bottom: 3px solid #008ABF;
+    border-top: 0 none;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    height: 50px;
+    color: #F8F8F8;
+    font-size: 13px;
+    font-weight: 700;
+    font-family: Helvetica;
+    overflow: hidden;
+}
+.login .header .lang {
+    float: right;
+    margin-right: 20px;
+    margin-top: 14px;
+}
+.login .header .lang select {
+    vertical-align: middle;
+}
+.login .content-pane {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 200px;
+    width: 260px;
+}
+.login .content-pane .trademark {
+    margin-bottom: 30px;
+}
+.login .content-pane .trademark .logo {
+    background: url("../images/logo.ico") no-repeat scroll center center transparent;
+    display: inline-block;
+    height: 25px;
+    width: 25px;
+    margin-left: -4px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+.login .content-pane .trademark .name {
+    vertical-align: middle;
+    padding-top: 2px;
+    font-weight: bold;
+    font-size: 18px;
+}
+.login .content-pane .trademark .version {
+    vertical-align: middle;
+    padding-top: 6px;
+    font-size: 13px;
+    padding-left: 6px;
+}
+.login .content-pane .message-area .item {
+    font-size: 12px;
+    margin-bottom: 30px;
+    margin-top: 30px;
+    height: 20px;
+}
+.login .content-pane .message-area .text {
+    color: #C85305;
+}
+.login .progress-indicator .progress-icon {
+    margin-right: 3px;
+    vertical-align: middle;
+    width: 15px;
+    height: 15px;
+}
+.login .progress-indicator .progress-text {
+    vertical-align: middle;
+    padding-top: 2px;
+    padding-left: 2px;
+}
+.login .content-pane .hint {
+    margin-bottom: 10px;
+    font-size: 14px;
+}
+.login .content-pane .field-area {
+    overflow: hidden;
+}
+.login .content-pane .field-area .text-field {
+    width: 240px;
+    padding: 5px 7px;
+    margin-bottom: 5px;
+    border: 1px solid #BABABA;
+    border-radius: 1px;
+}
+.login .button {
+    margin-top: 20px;
+    background: -moz-linear-gradient(center top , #1783BF 0%, #0C4C88 100%) repeat scroll 0 0 transparent;
+    border-color: #666666 #666666 #555555;
+    border-image: none;
+    border-radius: 5px 5px 5px 5px;
+    border-style: solid;
+    border-width: 1px;
+    color: #DDDDDD;
+    cursor: pointer;
+    font-weight: bolder;
+    padding: 5px 10px;
+    float: right;
+}
+&lt;/style&gt;
+&lt;script&gt;
+function getCookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0; i&lt;ca.length; i++) {
+        var c = ca[i].trim();
+        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
+    }
+    return null;
+}
+function setCookie(cname,cvalue,exdays) {
+    var d = new Date();
+    d.setTime(d.getTime()+(exdays*24*60*60*1000));
+    var expires = "expires="+d.toGMTString();
+    document.cookie = cname + "=" + cvalue + "; " + expires;
+}
+function validateForm() {
+    var user = document.forms["login"]["username"];
+    var pass = document.forms["login"]["password"];
+    var validateField = function(field){
+        field.className = "text-field";
+        var isValid = field.value &amp;&amp; field.value.trim()!="" ? true : false;
+        if(!isValid){
+            field.className += " invalid-field";
+            field.focus();
+        }
+        return isValid;
+    };
+    var isValid = validateField(pass);
+    isValid = validateField(user) &amp;&amp; isValid;
+    if(isValid)
+        document.getElementById("messWait").style.display = "";
+    return isValid;
+}
+function changeLang() {
+    var lang = document.getElementById('userLang').value;
+    setCookie('kimchiLang', lang, 365);
+    window.location.reload();
+}
+function setLang() {
+    var defaultLang = 'en_US';
+    var clientLang = document.getElementsByTagName("html")[0].getAttribute("lang");
+    var persistLang = getCookie('kimchiLang');
+    document.getElementById("userLang").value = persistLang || clientLang || defaultLang;
+}
+function init() {
+    setLang();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body class="login" onload="init()"&gt;
+&lt;div class="header"&gt;
+    &lt;div class="lang"&gt;
+    &lt;label&gt;$_("Language"):&lt;/label&gt;
+    &lt;select id="userLang" onchange="changeLang()"&gt;
+        &lt;option value="en_US"&gt;English (US)&lt;/option&gt;
+        &lt;option value="zh_CN"&gt;中文(简体)&lt;/option&gt;
+        &lt;option value="pt_BR"&gt;Português (Brasil)&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="content-pane"&gt;
+    &lt;div class="trademark"&gt;&lt;span class="logo"&gt;&lt;/span&gt;&lt;span class="name"&gt;Kimchi&lt;/span&gt;&lt;span class="version"&gt;1.2&lt;/span&gt;&lt;/div&gt;
+    &lt;div class="message-area"&gt;
+        &lt;div id="messUserPass" class="item text" style="display: none;"&gt;$_("User name or password is incorrect.")&lt;/div&gt;
+        &lt;div id="messSession" class="item text" style="display: none;"&gt;$_("Session timeout, please re-login.")&lt;/div&gt;
+        &lt;div id="messWait" class="item progress-indicator" style="display: none;"&gt;
+            &lt;img src="images/progressing.gif" class="progress-icon"&gt;&lt;span class="progress-text"&gt;$_("Processing")...&lt;/span&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="hint"&gt;$_("Sign in with your linux account")&lt;/div&gt;
+    &lt;div class="field-area"&gt;
+        &lt;form name="login" action="/login?next=$getVar('data.next', '/')" method="POST" onsubmit="return validateForm()"&gt;
+        &lt;input type="hidden" name="next" value="$getVar('data.next', '/')"&gt;
+        &lt;input type="text" name="username" placeholder="$_("User Name")" class="text-field" autofocus&gt;
+        &lt;input type="password" name="password" placeholder="$_("Password")" class="text-field"&gt;
+        &lt;input type="submit" value="$_("Sign In")" class="button"&gt;
+        &lt;/form&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</pre>
    </blockquote>
    <br>
  </body>
</html>