2:44 p.m.
We should use the default kimchi style in the login page.
The same header.
And instead of the user information in the right corner, the language
selection would be displayed.
Note the background is silver and the header is centered.
And vertical and horizontal aligned would be the login form, like it is
today.
We should keep the same input styles.
And I also prefer the "Log in" button to change to "Logging..."
instead
the message in the form.
On 06/05/2014 01:10 PM, shaohef(a)linux.vnet.ibm.com wrote:
From: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
this page is used for the session timeout or first login.
Signed-off-by: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
---
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
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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>
����