<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"><shaohef@linux.vnet.ibm.com></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"><shaohef@linux.vnet.ibm.com></a>
Signed-off-by: Yu Xin Huo <a class="moz-txt-link-rfc2396E" href="mailto:huoyuxin@linux.vnet.ibm.com"><huoyuxin@linux.vnet.ibm.com></a>
---
ui/images/progressing.gif | Bin 0 -> 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&uK_IXO9@p`oUxrgCy}4A_9;e{Mh5
zkYH!W09PYD17=2`8pWS1oFWVy3_2k7AY&O=+5}E^`WY^hIhD@I;2`qkhUamCHs#2?
zD{Sl5ddqAu;o;E8n07H&VTOd$9w+z3Od8dz)1OOlg@hfQ?6P6gg)Nhut~h8s_iHy|
zTx?f<DfNuF4qs+in1T70o7P)P87f1<g5(0~t-`bz%`;<c7;R*Hby&0+Cd*D$nyx)7
zxH>hoEs9-2GEYbl<TO?^r*$AZO&~F#<dR{_!xK!0-EtLPZ*p|yWoF`%>SmZA?aQ<9
zUT3kA$h=8X2{%vLaEeZ2FfFvxHCy+@)2xTXXx&nW19L8~I4mhFCLSR*N5YUN_g8RC
zxvG$d3rC2Yoni>Hr8Z+mk+UtMt&Fyriq3S|nYyz*lh|s_)v7fmBnyPWjzbSOeSwpn
ztM^*GK3gr@WX{W=;H4@s$Eix`o#&Z+UC|vq;?Mm$*qz>q{MpOLKD$V>lW^GM@gRp<
zTfqAxmTMW#NQtz1Ow(GUENaLTnG@~OSSl%)a-~@^*=_L^Wu6LazRZG$dI^iu%U-z%
zg<00g*_8=1ySk){v9Pk(*~<9qvQD2qQDdsojG1{NY_a__TQemj7eK-u-Fqm>f>utm
zWMS=L&jJU059@Suul#8<RCK0juuU^pO9X~|9`=wYHdzoCYCehQmh?GGSt;IO&EY61
z^|cU^WKC}pQa3GC)^bS)J5HFrADAqr$@=Tg_KIeUMR6Q@nr+9QW_y9zNsLj!T)@YO
zmFW>EN`0IXPrZ>S5M3ptD%hrTMQhc8T>+_g4tF#}E)IMpc<k8J3C>bEce!tTI4V-^
zEEL|{;B8wW%<SUK!k*>CY&#hksVX{CWv466RGb|aXRcN%49rjY*aHrnWY;d4a(eT<
sn9_<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
+<!DOCTYPE html>
+<html lang="$lang.lang[0]">
+<head>
+<meta charset="UTF-8">
+<title>Kimchi</title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+<style type="text/css">
+.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;
+}
+</style>
+<script>
+function getCookie(cname) {
+ var name = cname + "=";
+ var ca = document.cookie.split(';');
+ for(var i=0; i<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 && field.value.trim()!="" ? true : false;
+ if(!isValid){
+ field.className += " invalid-field";
+ field.focus();
+ }
+ return isValid;
+ };
+ var isValid = validateField(pass);
+ isValid = validateField(user) && 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();
+}
+</script>
+</head>
+<body class="login" onload="init()">
+<div class="header">
+ <div class="lang">
+ <label>$_("Language"):</label>
+ <select id="userLang" onchange="changeLang()">
+ <option value="en_US">English (US)</option>
+ <option value="zh_CN">中文（简体）</option>
+ <option value="pt_BR">Português (Brasil)</option>
+ </select>
+ </div>
+</div>
+<div class="content-pane">
+ <div class="trademark"><span class="logo"></span><span class="name">Kimchi</span><span class="version">1.2</span></div>
+ <div class="message-area">
+ <div id="messUserPass" class="item text" style="display: none;">$_("User name or password is incorrect.")</div>
+ <div id="messSession" class="item text" style="display: none;">$_("Session timeout, please re-login.")</div>
+ <div id="messWait" class="item progress-indicator" style="display: none;">
+ <img src="images/progressing.gif" class="progress-icon"><span class="progress-text">$_("Processing")...</span>
+ </div>
+ </div>
+ <div class="hint">$_("Sign in with your linux account")</div>
+ <div class="field-area">
+ <form name="login" action="/login?next=$getVar('data.next', '/')" method="POST" onsubmit="return validateForm()">
+ <input type="hidden" name="next" value="$getVar('data.next', '/')">
+ <input type="text" name="username" placeholder="$_("User Name")" class="text-field" autofocus>
+ <input type="password" name="password" placeholder="$_("Password")" class="text-field">
+ <input type="submit" value="$_("Sign In")" class="button">
+ </form>
+ </div>
+</div>
+</body>
+</html>
</pre>
</blockquote>
<br>
</body>
</html>