modify login function

Issue-id: CLIENT-13

Change-Id: I6a10a0eb0b0f81cd8a51f260fd0e956ea63e1d90
Signed-off-by: “shentao” <shentao@chinamobile.com>

30 files changed, 1841 insertions, 17 deletions

diff --git a/login/src/main/webapp/login/css/login_background.css b/login/src/main/webapp/login/css/login_background.css
new file mode 100644
index 00000000..96a82304
--- /dev/null
+++ b/login/src/main/webapp/login/css/login_background.css
@@ -0,0 +1,277 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+*{
+    margin:0;
+    padding:0;
+}
+
+.slideshow {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.slideshow-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: no-repeat 50% 50%;
+    background-size: cover;
+    -webkit-animation-name: kenburns;
+    animation-name: kenburns;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-duration: 16s;
+    animation-duration: 16s;
+    opacity: 1;
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
+.slideshow-image:nth-child(1) {
+    -webkit-animation-name: kenburns-1;
+    animation-name: kenburns-1;
+    z-index: 3;
+}
+
+.slideshow-image:nth-child(2) {
+    -webkit-animation-name: kenburns-2;
+    animation-name: kenburns-2;
+    z-index: 2;
+}
+
+.slideshow-image:nth-child(3) {
+    -webkit-animation-name: kenburns-3;
+    animation-name: kenburns-3;
+    z-index: 1;
+}
+
+.slideshow-image:nth-child(4) {
+    -webkit-animation-name: kenburns-4;
+    animation-name: kenburns-4;
+    z-index: 0;
+}
+
+@-webkit-keyframes kenburns-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    1.5625% {
+        opacity: 1;
+    }
+    23.4375% {
+        opacity: 1;
+    }
+    26.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    98.4375% {
+        opacity: 0;
+        -webkit-transform: scale(1.21176);
+        transform: scale(1.21176);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes kenburns-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    1.5625% {
+        opacity: 1;
+    }
+    23.4375% {
+        opacity: 1;
+    }
+    26.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    98.4375% {
+        opacity: 0;
+        -webkit-transform: scale(1.21176);
+        transform: scale(1.21176);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes kenburns-2 {
+    23.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    26.5625% {
+        opacity: 1;
+    }
+    48.4375% {
+        opacity: 1;
+    }
+    51.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+}
+
+@keyframes kenburns-2 {
+    23.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    26.5625% {
+        opacity: 1;
+    }
+    48.4375% {
+        opacity: 1;
+    }
+    51.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+}
+
+@-webkit-keyframes kenburns-3 {
+    48.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    51.5625% {
+        opacity: 1;
+    }
+    73.4375% {
+        opacity: 1;
+    }
+    76.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+}
+
+@keyframes kenburns-3 {
+    48.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    51.5625% {
+        opacity: 1;
+    }
+    73.4375% {
+        opacity: 1;
+    }
+    76.5625% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+}
+
+@-webkit-keyframes kenburns-4 {
+    73.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    76.5625% {
+        opacity: 1;
+    }
+    98.4375% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes kenburns-4 {
+    73.4375% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    76.5625% {
+        opacity: 1;
+    }
+    98.4375% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+h1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
+    z-index: 99;
+}
diff --git a/login/src/main/webapp/login/css/login_inputForm.css b/login/src/main/webapp/login/css/login_inputForm.css
new file mode 100644
index 00000000..681c774a
--- /dev/null
+++ b/login/src/main/webapp/login/css/login_inputForm.css
@@ -0,0 +1,345 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+#login_container {
+    text-align: left;
+    margin: 0;
+    padding: 0;
+    margin: 0 auto;
+    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
+}
+
+@font-face {
+    font-family: 'FontomasCustomRegular';
+    src: url('/openoui/thirdparty/fonts/fontomas-webfont.eot');
+    src: url('/openoui/thirdparty/fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/openoui/thirdparty/fonts/fontomas-webfont.woff') format('woff'),
+         url('/openoui/thirdparty/fonts/fontomas-webfont.ttf') format('truetype'),
+         url('/openoui/thirdparty/fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'FranchiseRegular';
+    src: url('/openoui/thirdparty/fonts/franchise-bold-webfont.eot');
+    src: url('/openoui/thirdparty/fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/openoui/thirdparty/fonts/franchise-bold-webfont.woff') format('woff'),
+         url('/openoui/thirdparty/fonts/franchise-bold-webfont.ttf') format('truetype'),
+         url('/openoui/thirdparty/fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+a.hiddenanchor {
+    display: none;
+}
+
+#wrapper {
+    right: 0px;
+    min-height: 560px;
+    margin: 0px auto;
+    width: 500px;
+    position: relative;
+}
+
+#wrapper a {
+    color: rgb(95, 155, 198);
+    text-decoration: underline;
+}
+
+#wrapper p {
+    margin-bottom: 15px;
+}
+
+#wrapper p:first-child {
+    margin: 0px;
+}
+
+#wrapper label {
+    color: rgb(64, 92, 96);
+    position: relative;
+}
+
+::-webkit-input-placeholder {
+    color: rgb(190, 188, 188);
+    font-style: italic;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+    color: rgb(190, 188, 188);
+    font-style: italic;
+}
+
+input {
+    outline: none;
+}
+
+#wrapper input:not([type="checkbox"]) {
+    width: 92%;
+    margin-top: 4px;
+    padding: 10px 5px 10px 32px;
+    border: 1px solid rgb(178, 178, 178);
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing : content-box;
+    box-sizing : content-box;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
+    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
+    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
+    -webkit-transition: all 0.2s linear;
+    -moz-transition: all 0.2s linear;
+    -o-transition: all 0.2s linear;
+    transition: all 0.2s linear;
+}
+
+#wrapper input:not([type="checkbox"]):active,
+#wrapper input:not([type="checkbox"]):focus {
+    border: 1px solid rgba(91, 90, 90, 0.7);
+    background: rgba(238, 236, 240, 0.2);
+    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
+    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
+    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
+}
+
+[data-icon]:after {
+    content: attr(data-icon);
+    font-family: 'FontomasCustomRegular';
+    color: rgb(106, 159, 171);
+    position: absolute;
+    left: 10px;
+    top: 35px;
+    width: 30px;
+}
+
+#wrapper p.button input {
+    width: 30%;
+    cursor: pointer;
+    background: rgb(61, 157, 179);
+    padding: 8px 5px;
+    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
+    color: #fff;
+    font-size: 24px;
+    border: 1px solid rgb(28, 108, 122);
+    margin-bottom: 10px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
+        0px 0px 0px 3px rgb(254, 254, 254),
+        0px 5px 3px 3px rgb(210, 210, 210);
+    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
+        0px 0px 0px 3px rgb(254, 254, 254),
+        0px 5px 3px 3px rgb(210, 210, 210);
+    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
+        0px 0px 0px 3px rgb(254, 254, 254),
+        0px 5px 3px 3px rgb(210, 210, 210);
+    -webkit-transition: all 0.2s linear;
+    -moz-transition: all 0.2s linear;
+    -o-transition: all 0.2s linear;
+    transition: all 0.2s linear;
+}
+
+#wrapper p.button input:hover {
+    background: rgb(74, 179, 198);
+}
+
+#wrapper p.button input:active,
+#wrapper p.button input:focus {
+    background: rgb(40, 137, 154);
+    position: relative;
+    top: 1px;
+    border: 1px solid rgb(12, 76, 87);
+    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
+    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
+    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
+}
+
+p.login.button,
+p.signin.button {
+    text-align: right;
+    margin: 5px 0;
+}
+
+.keeplogin {
+    margin-top: -5px;
+}
+
+.keeplogin input,
+.keeplogin label {
+    display: inline-block;
+    font-size: 12px;
+    font-style: italic;
+}
+
+.keeplogin input#loginkeeping {
+    margin-right: 5px;
+}
+
+.keeplogin label {
+    width: 80%;
+}
+
+p.change_link {
+    position: absolute;
+    color: rgb(127, 124, 124);
+    left: 0px;
+    height: 20px;
+    width: 440px;
+    padding: 17px 30px 20px 30px;
+    font-size: 16px;
+    text-align: right;
+    border-top: 1px solid rgb(219, 229, 232);
+    -webkit-border-radius: 0 0 5px 5px;
+    -moz-border-radius: 0 0 5px 5px;
+    border-radius: 0 0 5px 5px;
+    background: rgb(225, 234, 235);
+}
+
+#wrapper p.change_link a {
+    display: inline-block;
+    font-weight: bold;
+    background: rgb(247, 248, 241);
+    padding: 2px 6px;
+    color: rgb(29, 162, 193);
+    margin-left: 10px;
+    text-decoration: none;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid rgb(203, 213, 214);
+    -webkit-transition: all 0.4s linear;
+    -moz-transition: all 0.4s linear;
+    -o-transition: all 0.4s linear;
+    -ms-transition: all 0.4s linear;
+    transition: all 0.4s linear;
+}
+
+#wrapper p.change_link a:hover {
+    color: rgb(57, 191, 215);
+    background: rgb(247, 247, 247);
+    border: 1px solid rgb(74, 179, 198);
+}
+
+#wrapper p.change_link a:active {
+    position: relative;
+    top: 1px;
+}
+
+#register,
+#login {
+    position: absolute;
+    top: 0px;
+    width: 88%;
+    padding: 18px 6% 10px 6%;
+    margin: 0 0 35px 0;
+    background: rgb(247, 247, 247);
+    border: 1px solid rgba(147, 184, 189, 0.8);
+    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
+    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
+    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
+    -webkit-box-shadow: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    filter: alpha(opacity=85);
+    opacity: 0.85;
+}
+
+#register {
+    z-index: 21;
+    opacity: 0;
+}
+
+#login {
+    z-index: 22;
+}
+
+#toregister:target ~ #wrapper #register,
+#tologin:target ~ #wrapper #login {
+    z-index: 22;
+    -webkit-animation-delay: .6s;
+    -webkit-animation-timing-function: ease-in;
+    -moz-animation-delay: .6s;
+    -moz-animation-timing-function: ease-in;
+    -o-animation-delay: .6s;
+    -o-animation-timing-function: ease-in;
+    -ms-animation-delay: .6s;
+    -ms-animation-timing-function: ease-in;
+    animation-delay: .6s;
+    animation-timing-function: ease-in;
+    -webkit-animation-name: scaleIn;
+    -moz-animation-name: scaleIn;
+    -ms-animation-name: scaleIn;
+    -o-animation-name: scaleIn;
+    animation-name: scaleIn;
+}
+
+#toregister:target ~ #wrapper #login,
+#tologin:target ~ #wrapper #register {
+    -webkit-animation-timing-function: ease-out;
+    -moz-animation-timing-function: ease-out;
+    -o-animation-timing-function: ease-out;
+    -ms-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+    -webkit-animation-name: scaleOut;
+    -moz-animation-name: scaleOut;
+    -ms-animation-name: scaleOut;
+    -o-animation-name: scaleOut;
+    animation-name: scaleOut;
+}
+
+.animate {
+    -webkit-animation-duration: 0.5s;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-duration: 0.5s;
+    -moz-animation-fill-mode: both;
+    -o-animation-duration: 0.5s;
+    -o-animation-fill-mode: both;
+    -ms-animation-duration: 0.5s;
+    -ms-animation-fill-mode: both;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+}
+
+.lt8 #wrapper input {
+    padding: 10px 5px 10px 32px;
+    width: 92%;
+}
+
+.lt8 #wrapper input[type=checkbox] {
+    width: 10px;
+    padding: 0;
+}
+
+.lt8 #wrapper h1 {
+    color: #066A75;
+}
+
+.lt8 #register {
+    display: none;
+}
+
+.lt8 p.change_link,
+.ie9 p.change_link {
+    position: absolute;
+    height: 90px;
+    background: transparent;
+}
diff --git a/login/src/main/webapp/login/css/login_mainStyle.css b/login/src/main/webapp/login/css/login_mainStyle.css
new file mode 100644
index 00000000..e2c65040
--- /dev/null
+++ b/login/src/main/webapp/login/css/login_mainStyle.css
@@ -0,0 +1,192 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+@font-face {
+    font-family: 'BebasNeueRegular';
+    src: url('/openoui/thirdparty/fonts/BebasNeue-webfont.eot');
+    src: url('/openoui/thirdparty/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+        url('/openoui/thirdparty/fonts/BebasNeue-webfont.woff') format('woff'),
+        url('/openoui/thirdparty/fonts/BebasNeue-webfont.ttf') format('truetype'),
+        url('/openoui/thirdparty/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset,img {
+    border: 0;
+}
+
+address,caption,cite,code,dfn,th,var {
+    font-style: normal;
+    font-weight: normal;
+}
+
+ol,ul {
+    list-style: none;
+}
+
+caption,th {
+    text-align: left;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+q:before,q:after {
+    content: '';
+}
+
+abbr,acronym {
+    border: 0;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
+    font-weight: 400;
+    font-size: 15px;
+    color: #1d3c41;
+    overflow-y: scroll;
+}
+
+a {
+    color: #333;
+    text-decoration: none;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    text-align: center;
+}
+
+.clr {
+    clear: both;
+}
+
+.container > header {
+    padding: 20px 30px 10px 30px;
+    margin: 0px 20px 10px 20px;
+    position: relative;
+    display: block;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+    text-align: center;
+}
+
+.container > header h1 {
+    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
+    font-size: 35px;
+    line-height: 35px;
+    position: relative;
+    font-weight: 400;
+    color: rgba(26,89,120,0.9);
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+    padding: 0px 0px 5px 0px;
+}
+
+.container > header h1 span {
+    color: #7cbcd6;
+    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
+}
+
+.container > header h2 {
+    font-size: 16px;
+    font-style: italic;
+    color: #2d6277;
+    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
+}
+
+.codrops-top {
+    line-height: 24px;
+    font-size: 11px;
+    background: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    z-index: 9999;
+    position: relative;
+    box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
+}
+
+.codrops-top a {
+    padding: 0px 10px;
+    letter-spacing: 1px;
+    color: #333;
+    text-shadow: 0px 1px 1px #fff;
+    display: block;
+    float: left;
+}
+
+.codrops-top a:hover {
+    background: #fff;
+}
+
+.codrops-top span.right {
+    float: right;
+}
+
+.codrops-top span.right a {
+    float: left;
+    display: block;
+}
+
+.codrops-demos {
+    text-align: center;
+    display: block;
+    padding: 14px;
+}
+
+.codrops-demos span {
+    display: inline-block;
+    padding-right: 15px;
+    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
+}
+
+.codrops-demos a,
+.codrops-demos a.current-demo,
+.codrops-demos a.current-demo:hover {
+    display: inline-block;
+    font-style: italic;
+    font-size: 12px;
+    padding: 3px 5px;
+    margin: 0px 3px;
+    font-weight: 800;
+    box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
+    color: #fff;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+    background: rgba(104,171,194,0.5);
+}
+
+.codrops-demos a:hover {
+    background: #4fa2c4;
+}
+
+.codrops-demos a.current-demo,
+.codrops-demos a.current-demo:hover {
+    color: rgba(104,171,194,1);
+    background: rgba(255,255,255,0.9);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+}
diff --git a/login/src/main/webapp/login/css/menu_mainStyle.css b/login/src/main/webapp/login/css/menu_mainStyle.css
new file mode 100644
index 00000000..848609a3
--- /dev/null
+++ b/login/src/main/webapp/login/css/menu_mainStyle.css
@@ -0,0 +1,282 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+#page-wrapper, body, html {
+    height: 100%;
+}
+
+#page-wrapper {
+    position: relative;
+}
+
+.fixed-sidebar #page-sidebar {
+    position: fixed;
+    top: 0;
+}
+
+.fixed-sidebar #page-main {
+    margin-left: 0;
+}
+
+/* Sidebar */
+#page-sidebar {
+    width: 240px;
+    position: relative;
+    z-index: 90;
+    background: #e4e9f0;
+    border: #c1cad5 solid 1px;
+    border-width: 0 1px 0 0;
+}
+
+.fixed-sidebar #page-sidebar {
+    position: fixed;
+    top: 0;
+}
+
+.close-sidebar #page-sidebar {
+    margin-left: -240px;
+}
+
+.close-sidebar.fixed-header #page-sidebar {
+    position: fixed;
+    top: 0;
+}
+
+.fixed-header.fixed-footer #page-sidebar {
+    padding-bottom: 50px;
+}
+
+#header-logo {
+    width: 240px;
+    background: #2b394a;
+    text-transform: uppercase;
+    font-weight: normal;
+    height: 52px;
+    line-height: 52px;
+    color: #fff;
+}
+
+#sidebar-menu {
+    width: 240px;
+    background: #e4e9f0;
+    overflow: hidden;
+    height: auto !important;
+    position: absolute;
+    left: 0;
+    border: #c1cad5 solid 1px;
+    border-width: 0 1px 2px 0;
+}
+
+ul {
+    list-style-type: none;
+}
+
+a {
+    color: #b63b4d;
+    text-decoration: none;
+}
+
+.accordion {
+    width: 240px;
+    background: #FFF;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-padding-start: 0px;
+    margin-bottom: 0px;
+}
+
+.accordion .link {
+    cursor: pointer;
+    display: block;
+    padding: 15px 15px 15px 42px;
+    color: #4D4D4D;
+    font-size: 14px;
+    font-weight: 700;
+    border-bottom: 1px solid #CCC;
+    position: relative;
+    -webkit-transition: all 0.4s ease;
+    -o-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+
+.accordion li:last-child .link {
+    border-bottom: 0;
+}
+
+.accordion li i {
+    position: absolute;
+    top: 16px;
+    left: 12px;
+    font-size: 18px;
+    color: #595959;
+    -webkit-transition: all 0.4s ease;
+    -o-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+
+.accordion li i.fa-chevron-down {
+    right: 12px;
+    left: auto;
+    font-size: 16px;
+}
+
+.accordion li.open .link {
+    color: #b63b4d;
+}
+
+.accordion li.open i {
+    color: #b63b4d;
+}
+
+.accordion li.open i.fa-chevron-down {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.submenu {
+    display: none;
+    background: #444359;
+    font-size: 14px;
+    -webkit-padding-start: 0px;
+}
+
+.submenu li {
+    border-bottom: 1px solid #4b4a5e;
+}
+
+.submenu a {
+    display: block;
+    text-decoration: none;
+    color: #d9d9d9;
+    padding: 12px;
+    padding-left: 42px;
+    -webkit-transition: all 0.25s ease;
+    -o-transition: all 0.25s ease;
+    transition: all 0.25s ease;
+}
+
+.submenu a:hover {
+    background: #b63b4d;
+    color: #FFF;
+}
+
+#page-main-wrapper {
+    margin-left: 240px;
+}
+
+#page-header {
+    background: #37485d;
+    padding: 0;
+}
+
+#page-header a,
+#header-logo a {
+    color: rgba(255,255,255,0.5);
+}
+
+#page-header .button-group > a:hover,
+#page-header .top-icon-bar > a:hover, 
+#page-header .top-icon-bar a.user-ico:hover {
+    color: #fff !important;
+}
+
+#page-header .dropdown-menu a {
+    color: #000;
+}
+
+#page-header .top-icon-bar {
+    border-right: rgba(255,255,255,0.1) solid 1px;
+    float: right;
+}
+
+#page-header .top-icon-bar .dropdown {
+    float: left;
+    display: block;
+}
+
+#page-header .top-icon-bar > a {
+    display: block;
+    height: 52px;
+    line-height: 52px;
+    text-align: center;
+    float: left;
+    position: relative;
+    font-size: 24px;
+    width: 60px;
+    border-left: rgba(255,255,255,0.1) solid 1px;
+}
+
+#page-header .top-icon-bar > a .glyph-icon {
+    display: block;
+}
+
+#page-header .top-icon-bar > a:hover {
+    background: rgba(255,255,255,0.05);
+}
+
+#page-header .top-icon-bar > a .badge-absolute {
+    top: 6px;
+    right: 6px;
+    left: auto;
+    border: 0;
+    height: 16px;
+    line-height: 16px;
+    padding: 0 3px !important;
+    border-radius: 2px;
+}
+
+#page-header .top-icon-bar a.user-ico {
+    line-height: 36px;
+    font-size: 14px;
+    width: auto;
+}
+
+#page-header .top-icon-bar a.user-ico img {
+    margin: 8px 0 0 8px;
+    float: left;
+}
+
+#page-header .top-icon-bar a.user-ico span {
+    display: block;
+    float: left;
+    height: 44px;
+    line-height: 36px;
+    margin: 8px 8px 0;
+}
+
+#page-header .top-icon-bar.dropdown .dropdown-menu.float-right {
+    min-width: 100px;
+    right: 0;
+}
+
+#page-header .top-icon-bar a.user-ico i {
+    margin: 8px 8px 0 0;
+    font-size: 10px;
+    display: block;
+    float: left;
+    height: 36px;
+    line-height: 36px;
+}
+
+.submenu_active {
+    font-style: italic;
+    color: #191970 !important;
+    background:#d9d9d9;
+    border-left: 3px solid #4ac9ff;
+}
diff --git a/login/src/main/webapp/login/html/login.html b/login/src/main/webapp/login/html/login.html
index fefdfdd5..ee20f5ec 100644
--- a/login/src/main/webapp/login/html/login.html
+++ b/login/src/main/webapp/login/html/login.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright 2016, CMCC Technologies Co., Ltd.
+    Copyright 2016-2017, China Mobile Co., Ltd.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -13,19 +13,37 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<!DOCTYPE html>
-<html>
-	<head>
-		<title id="openo_login_title" name_i18n="openo_login_i18n_login"></title>
-		<meta charset="utf-8"/>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta http-equiv="pragma" content="no-cache"/>
-		<meta http-equiv="cache-control" content="no-cache, no-store, max-age=0, must-revalidate"/>
-		<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-		<meta content="" name="description"/>
-		<meta content="" name="author"/>
-	</head>
-	<body>
-demo
-	</body>
-</html>
+
+<h1>
+    <div id="login_container">
+        <div id="wrapper">
+            <div id="login" class="animate form">
+                <form ng-init="loginFormInit()" ng-submit="loginFormSubmit()">
+                    <img src="/openoui/login/image/openo_logo_pantone.png" width="100%" style="display:inline"/>
+                    <br/><br/><span style="color:red">{{error}}</span><br/><br/>
+                    <p>
+                        <label for="username" class="uname" data-icon="u">Your username</label>
+                        <input id="username" name="username" required="required" type="text" ng-model="user.username" placeholder="open-o user"/>
+                    </p>
+                    <p>
+                        <label for="password" class="youpasswd" data-icon="p">Your password</label>
+                        <input id="password" name="password" required="required" type="password" ng-model="user.password" placeholder="eg. X8df!90EO"/>
+                    </p>
+                    <p class="keeplogin">
+                        <input type="checkbox" name="loginkeeping" id="loginkeeping" ng-model="user.loginkeeping" ng-true-value="true" ng-false-value="false"/>
+                        <label for="loginkeeping">Keep me logged in</label>
+                    </p>
+                    <p class="login button">
+                        <input type="submit" value="Login"/>
+                    </p>
+                </form>
+            </div>
+        </div>
+    </div>
+</h1>
+<div class="slideshow">
+    <div class="slideshow-image" style="background-image: url('/openoui/login/image/loginBackground01.jpg')"></div>
+    <div class="slideshow-image" style="background-image: url('/openoui/login/image/loginBackground02.jpg')"></div>
+    <div class="slideshow-image" style="background-image: url('/openoui/login/image/loginBackground03.jpg')"></div>
+    <div class="slideshow-image" style="background-image: url('/openoui/login/image/loginBackground04.jpg')"></div>
+</div>
diff --git a/login/src/main/webapp/login/html/menu.html b/login/src/main/webapp/login/html/menu.html
new file mode 100644
index 00000000..59bc30a7
--- /dev/null
+++ b/login/src/main/webapp/login/html/menu.html
@@ -0,0 +1,113 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+
+<div id="page-wrapper" class="main-menu fixed-sidebar fixed-header">
+    <div id="page-sidebar">
+        <div id="header-logo">
+            <img src="/openoui/login/image/openo_logo_white.png" width="75%" style="display:block; margin:0 auto;"/>
+        </div>
+        <div id="sidebar-menu">
+            <ul id="accordion" class="accordion">
+                <li>
+                    <div class="link">
+                        <i class="fa fa-globe"></i>Service<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".serviceManagement" ui-sref-active="submenu_active">Service Management</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <div class="link">
+                        <i class="fa fa-search-minus"></i>Resource Mgr<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".resourceSdno" ui-sref-active="submenu_active">Resource Mgr sdno</a></li>
+                        <li><a ui-sref=".resourceNfvo" ui-sref-active="submenu_active">Resource Mgr Nfvo</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <div class="link">
+                        <i class="fa fa-puzzle-piece"></i>Orchestrator<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".modelDesign" ui-sref-active="submenu_active">Model Design</a></li>
+                        <li><a ui-sref=".package" ui-sref-active="submenu_active">Package</a></li>
+                        <li><a ui-sref=".serviceTemplate" ui-sref-active="submenu_active">Service Template</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <div class="link">
+                        <i class="fa fa-cogs"></i>Manage View<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".vimManage" ui-sref-active="submenu_active">VIM Manage</a></li>
+                        <li><a ui-sref=".vnfm" ui-sref-active="submenu_active">VNFM</a></li>
+                        <li><a ui-sref=".sdbController" ui-sref-active="submenu_active">SDN Controller</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <div class="link">
+                        <i class="fa fa-line-chart"></i>Performance<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".performanceQuery" ui-sref-active="submenu_active">Performance Query</a></li>
+                        <li><a ui-sref=".alarmQuery" ui-sref-active="submenu_active">Alarm Query</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <div class="link">
+                        <i class="fa fa-eye"></i>Monitor<i class="fa fa-chevron-down"></i>
+                    </div>
+                    <ul class="submenu">
+                        <li><a ui-sref=".parameterSetting" ui-sref-active="submenu_active">Parameter Setting</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div id="page-main-wrapper">
+        <div id="page-header">
+            <div id="page-header-wrapper" class="clearfix">
+                <div class="top-icon-bar dropdown">
+                    <a href="javascript:;" title="" class="user-ico clearfix" data-toggle="dropdown">
+                        <img width="36" src="/openoui/login/image/user.png" alt="">
+                        <span>User Name</span>
+                        <i class="fa fa-chevron-down"></i>
+                    </a>
+                    <ul class="dropdown-menu float-right">
+                        <li>
+                            <a href="javascript:;" title="">
+                                <span class="font-bold">Logout</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="top-icon-bar">
+                    <a href="javascript:;" class="popover-button" data-placement="bottom" title="Messages Widget" data-id="#msg-box">
+                        <i class="fa fa-envelope-o" style="color: green;"></i>
+                    </a>
+                    <a href="javascript:;" class="popover-button" data-placement="bottom" title="" data-id="#notif-box">
+                        <i class="fa fa-bell-o" style="color: red;"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div id="rightContainer" class="col-sm-8 col-md-9 col-lg-9">
+            <ui-view></ui-view>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/login/src/main/webapp/login/html/temp/alarmQuery.html b/login/src/main/webapp/login/html/temp/alarmQuery.html
new file mode 100644
index 00000000..e4f23650
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/alarmQuery.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>alarmQuery test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/modelDesign.html b/login/src/main/webapp/login/html/temp/modelDesign.html
new file mode 100644
index 00000000..dcc37303
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/modelDesign.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>modelDesign test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/package.html b/login/src/main/webapp/login/html/temp/package.html
new file mode 100644
index 00000000..88b6c551
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/package.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>package test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/parameterSetting.html b/login/src/main/webapp/login/html/temp/parameterSetting.html
new file mode 100644
index 00000000..395fff33
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/parameterSetting.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>parameterSetting test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/performanceQuery.html b/login/src/main/webapp/login/html/temp/performanceQuery.html
new file mode 100644
index 00000000..7a050ace
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/performanceQuery.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>performanceQuery test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/resourceNfvo.html b/login/src/main/webapp/login/html/temp/resourceNfvo.html
new file mode 100644
index 00000000..52e583bd
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/resourceNfvo.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>resourceNfvo test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/resourceSdno.html b/login/src/main/webapp/login/html/temp/resourceSdno.html
new file mode 100644
index 00000000..76ff13e1
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/resourceSdno.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>resourceSdno test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/sdbController.html b/login/src/main/webapp/login/html/temp/sdbController.html
new file mode 100644
index 00000000..a561ba3e
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/sdbController.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>sdbController test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/serviceManagement.html b/login/src/main/webapp/login/html/temp/serviceManagement.html
new file mode 100644
index 00000000..8a7caaa0
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/serviceManagement.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>serviceManagement test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/serviceTemplate.html b/login/src/main/webapp/login/html/temp/serviceTemplate.html
new file mode 100644
index 00000000..b368cd75
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/serviceTemplate.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>serviceTemplate test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/vimManage.html b/login/src/main/webapp/login/html/temp/vimManage.html
new file mode 100644
index 00000000..79335012
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/vimManage.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>vimManage test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/html/temp/vnfm.html b/login/src/main/webapp/login/html/temp/vnfm.html
new file mode 100644
index 00000000..38975f4d
--- /dev/null
+++ b/login/src/main/webapp/login/html/temp/vnfm.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright 2016-2017, China Mobile Co., Ltd.
+
+    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.
+-->
+<div>
+    <h4>vnfm test page</h4>
+</div>
diff --git a/login/src/main/webapp/login/image/favicon.ico b/login/src/main/webapp/login/image/favicon.ico
new file mode 100644
index 00000000..fd2c63fb
--- /dev/null
+++ b/login/src/main/webapp/login/image/favicon.ico
diff --git a/login/src/main/webapp/login/image/loginBackground01.jpg b/login/src/main/webapp/login/image/loginBackground01.jpg
new file mode 100644
index 00000000..0bfb01dd
--- /dev/null
+++ b/login/src/main/webapp/login/image/loginBackground01.jpg
diff --git a/login/src/main/webapp/login/image/loginBackground02.jpg b/login/src/main/webapp/login/image/loginBackground02.jpg
new file mode 100644
index 00000000..8183ffae
--- /dev/null
+++ b/login/src/main/webapp/login/image/loginBackground02.jpg
diff --git a/login/src/main/webapp/login/image/loginBackground03.jpg b/login/src/main/webapp/login/image/loginBackground03.jpg
new file mode 100644
index 00000000..fa9c6d65
--- /dev/null
+++ b/login/src/main/webapp/login/image/loginBackground03.jpg
diff --git a/login/src/main/webapp/login/image/loginBackground04.jpg b/login/src/main/webapp/login/image/loginBackground04.jpg
new file mode 100644
index 00000000..ff065934
--- /dev/null
+++ b/login/src/main/webapp/login/image/loginBackground04.jpg
diff --git a/login/src/main/webapp/login/image/openo_logo_black.png b/login/src/main/webapp/login/image/openo_logo_black.png
new file mode 100644
index 00000000..f320af35
--- /dev/null
+++ b/login/src/main/webapp/login/image/openo_logo_black.png
diff --git a/login/src/main/webapp/login/image/openo_logo_pantone.png b/login/src/main/webapp/login/image/openo_logo_pantone.png
new file mode 100644
index 00000000..14135042
--- /dev/null
+++ b/login/src/main/webapp/login/image/openo_logo_pantone.png
diff --git a/login/src/main/webapp/login/image/openo_logo_white.png b/login/src/main/webapp/login/image/openo_logo_white.png
new file mode 100644
index 00000000..7adc4ac3
--- /dev/null
+++ b/login/src/main/webapp/login/image/openo_logo_white.png
diff --git a/login/src/main/webapp/login/image/user.png b/login/src/main/webapp/login/image/user.png
new file mode 100644
index 00000000..08a68b6d
--- /dev/null
+++ b/login/src/main/webapp/login/image/user.png
diff --git a/login/src/main/webapp/login/index.html b/login/src/main/webapp/login/index.html
new file mode 100644
index 00000000..57cc88dc
--- /dev/null
+++ b/login/src/main/webapp/login/index.html
@@ -0,0 +1,55 @@
+<!--
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+-->
+
+<!DOCTYPE html>
+<html>
+    <head lang="en">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>OPEN-O</title>
+        <link rel="shortcut icon" type="image/x-icon" href="/openoui/login/image/favicon.ico"/>
+
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/bootstrap.min.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/font-awesome.min.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/zTreeStyle.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/magic-check.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/ng-table.min.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/thirdparty/css/animate-custom.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/framework/css/open-ostyle.css"/>
+
+        <link rel="stylesheet" type="text/css" href="/openoui/login/css/login_mainStyle.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/login/css/login_background.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/login/css/login_inputForm.css"/>
+        <link rel="stylesheet" type="text/css" href="/openoui/login/css/menu_mainStyle.css"/>
+
+        <script type="text/javascript" src="/openoui/thirdparty/js/angular.min.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/angular-ui-router.min.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/ng-table.min.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/jquery_1.12.4.min.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/jquery-ui.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/bootstrap.min.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/mustache.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/jquery.ztree.core-3.5.js"></script>
+        <script type="text/javascript" src="/openoui/thirdparty/js/jquery.cookie.js"></script>
+
+        <script type="text/javascript" src="/openoui/login/js/app.js"></script>
+        <script type="text/javascript" src="/openoui/login/js/rest.js"></script>
+    </head>
+    <body ng-app="POCApp" onload="loadTemplate()">
+        <ui-view></ui-view>
+    </body>
+</html>
diff --git a/login/src/main/webapp/login/js/app.js b/login/src/main/webapp/login/js/app.js
new file mode 100644
index 00000000..2b983a8e
--- /dev/null
+++ b/login/src/main/webapp/login/js/app.js
@@ -0,0 +1,268 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+var app = angular.module("POCApp", ["ui.router", "ngTable"])
+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
+        $urlMatcherFactoryProvider.caseInsensitive(true);
+        $urlRouterProvider.otherwise('/login');
+        $stateProvider
+            .state('login', {
+                url : '/login',
+                templateUrl : '/openoui/login/html/login.html',
+                controller : 'loginCtrl',
+                authenticate: false
+            })
+            .state("menu", {
+                url: "/menu",
+                templateUrl : "/openoui/login/html/menu.html",
+                controller : "menuCtrl",
+                authenticate: true
+            })
+            .state("menu.serviceManagement", {
+                url: "/serviceManagement",
+                templateUrl : "/openoui/login/html/temp/serviceManagement.html",
+                controller : "serviceManagementCtrl",
+                authenticate: true
+            })
+            .state("menu.resourceSdno", {
+                url: "/resourceSdno",
+                templateUrl : "/openoui/login/html/temp/resourceSdno.html",
+                controller : "resourceSdnoCtrl",
+                authenticate: true
+            })
+            .state("menu.resourceNfvo", {
+                url: "/resourceNfvo",
+                templateUrl : "/openoui/login/html/temp/resourceNfvo.html",
+                controller : "resourceNfvoCtrl",
+                authenticate: true
+            })
+            .state("menu.modelDesign", {
+                url: "/modelDesign",
+                templateUrl : "/openoui/login/html/temp/modelDesign.html",
+                controller : "modelDesignCtrl",
+                authenticate: true
+            })
+            .state("menu.package", {
+                url: "/package",
+                templateUrl : "/openoui/login/html/temp/package.html",
+                controller : "packageCtrl",
+                authenticate: true
+            })
+            .state("menu.serviceTemplate", {
+                url: "/serviceTemplate",
+                templateUrl : "/openoui/login/html/temp/serviceTemplate.html",
+                controller : "serviceTemplateCtrl",
+                authenticate: true
+            })
+            .state("menu.vimManage", {
+                url: "/vimManage",
+                templateUrl : "/openoui/login/html/temp/vimManage.html",
+                controller : "vimManageCtrl",
+                authenticate: true
+            })
+            .state("menu.vnfm", {
+                url: "/vnfm",
+                templateUrl : "/openoui/login/html/temp/vnfm.html",
+                controller : "vnfmCtrl",
+                authenticate: true
+            })
+            .state("menu.sdbController", {
+                url: "/sdbController",
+                templateUrl : "/openoui/login/html/temp/sdbController.html",
+                controller : "sdbControllerCtrl",
+                authenticate: true
+            })
+            .state("menu.performanceQuery", {
+                url: "/performanceQuery",
+                templateUrl : "/openoui/login/html/temp/performanceQuery.html",
+                controller : "performanceQueryCtrl",
+                authenticate: true
+            })
+            .state("menu.alarmQuery", {
+                url: "/alarmQuery",
+                templateUrl : "/openoui/login/html/temp/alarmQuery.html",
+                controller : "alarmQueryCtrl",
+                authenticate: true
+            })
+            .state("menu.parameterSetting", {
+                url: "/parameterSetting",
+                templateUrl : "/openoui/login/html/temp/parameterSetting.html",
+                controller : "parameterSettingCtrl",
+                authenticate: true
+            })
+    })
+
+    /*Login Controller*/
+    .controller('loginCtrl', function($scope, $rootScope, $stateParams, $state, LoginService) {
+        $scope.loginFormInit = function() {
+            $scope.error = "";
+            if ($.cookie("loginkeeping") == "true") {
+                $scope.user = {
+                    'username': $.cookie("username"),
+                    'password': $.cookie("password"),
+                    'loginkeeping': true,
+                };
+            } else {
+                $scope.user = {
+                    'username': $.cookie("username"),
+                    'password': $.cookie("password"),
+                    'loginkeeping': false,
+                };
+            }
+        };
+        $scope.loginFormSubmit = function() {
+            LoginService.login($scope.user)
+                .then(function (response){
+                    if ($scope.user.loginkeeping) {
+                        $.cookie("loginkeeping", "true", {expires: 7});
+                        $.cookie("username", $scope.user.username, {expires: 7});
+                        $.cookie("password", $scope.user.password, {expires: 7});
+                    } else {
+                        $.cookie("loginkeeping", "false", {expire: -1});
+                        $.cookie("username", "", {expires: -1});
+                        $.cookie("password", "", {expires: -1});
+                    }
+
+                    $scope.error = "";
+                    $state.transitionTo('menu');
+                    //if (response.status == -1) {
+                    //    $scope.error = "Incorrect username/password !";
+                    //} else {
+                    //    $scope.error = "";
+                    //    $state.transitionTo('menu');
+                    //}
+                });
+        };
+    })
+
+    /*Menu Controller*/
+    .controller("menuCtrl", function($scope, $state, DataService){
+        $scope.message = "Menu";
+        init_menu();
+    })
+
+    /*Service Management Controller*/
+    .controller("serviceManagementCtrl", function($scope, DataService, $log){
+        $scope.message = "Service Management";
+    })
+
+    /*Resource Sdno Controller*/
+    .controller("resourceSdnoCtrl", function($scope, DataService, $log){
+        $scope.message = "Resource Sdno";
+    })
+
+    /*Resource Nfvo Controller*/
+    .controller("resourceNfvoCtrl", function($scope, DataService, $log){
+        $scope.message = "Resource Nfvo";
+    })
+
+    /*Model Design Controller*/
+    .controller("modelDesignCtrl", function($scope, DataService, $log){
+        $scope.message = "Model Design";
+    })
+
+    /*Package Controller*/
+    .controller("packageCtrl", function($scope, DataService, $log){
+        $scope.message = "Package";
+    })
+
+    /*Service Template Controller*/
+    .controller("serviceTemplateCtrl", function($scope, DataService, $log){
+        $scope.message = "Service Template";
+    })
+
+    /*Vim Manage Controller*/
+    .controller("vimManageCtrl", function($scope, DataService, $log){
+        $scope.message = "Vim Manage";
+    })
+
+    /*VNFM Controller*/
+    .controller("vnfmCtrl", function($scope, DataService, $log){
+        $scope.message = "VNFM";
+    })
+
+    /*Sdn Controller Controller*/
+    .controller("sdnControllerCtrl", function($scope, DataService, $log){
+        $scope.message = "Sdn Controller";
+    })
+
+    /*Performance Query Controller*/
+    .controller("performanceQueryCtrl", function($scope, DataService, $log){
+        $scope.message = "Performance Query";
+    })
+
+    /*Alarm Query Controller*/
+    .controller("alarmQueryCtrl", function($scope, DataService, $log){
+        $scope.message = "Alarm Query";
+    })
+
+    /*Parameter Setting Controller*/
+    .controller("parameterSettingCtrl", function($scope, DataService, $log){
+        $scope.message = "Parameter Setting";
+    })
+
+var modelTemplate = "";
+function loadTemplate() {
+    $.get('/openoui/framework/template.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateContainer.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateWidget.html', function (template) {
+        //console.log("Template is : "+template);
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateNotification.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/openoui/framework/templateFunctional.html', function (template) {
+        modelTemplate += template;
+    });
+}
+
+function init_menu() {
+    var windowH = $(window).height();
+    var headerH = $('#header-logo').height();
+    var menuHeight = windowH - headerH;
+    $('#page-sidebar').height(windowH);
+    $("#sidebar-menu").height(menuHeight);
+
+    var Accordion = function(el, multiple) {
+        this.el = el || {};
+        this.multiple = multiple || false;
+
+        // Variables privadas
+        var links = this.el.find('.link');
+        // Evento
+        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
+    }
+
+    Accordion.prototype.dropdown = function(e) {
+        var $el = e.data.el;
+            $this = $(this),
+            $next = $this.next();
+
+        $next.slideToggle();
+        $this.parent().toggleClass('open');
+
+        if (!e.data.multiple) {
+            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
+        };
+    }
+
+    var accordion = new Accordion($('#accordion'), false);
+}
diff --git a/login/src/main/webapp/login/js/rest.js b/login/src/main/webapp/login/js/rest.js
new file mode 100644
index 00000000..020c6899
--- /dev/null
+++ b/login/src/main/webapp/login/js/rest.js
@@ -0,0 +1,58 @@
+/*
+    Copyright 2017, China Mobile Co., Ltd.
+
+    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.
+*/
+
+app.factory("DataService", function($http, $log){
+    return {
+        /*getAllData: function (value) {
+            //var value = $scope.param;
+            return $http({
+                url: 'http://localhost:8080/POC_NodeToServletPorting_Server/?widgetType=' + value,
+                headers: {'Content-Type': 'application/json'},
+                method: 'GET'
+            }).then(function (response) {
+                $log.info(response.data);
+                return response.data;
+            })
+        },*/
+    }
+});
+
+app.factory('LoginService', function($http, $log) {
+    return {
+        login: function(user) {
+            return $http({
+                // TODO
+                url: 'http://localhost:8080/api/signin',
+                method: 'POST',
+                data: {'name':user.username, 'pswd':user.password},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                if(response.status == 200) {
+                    // TODO
+                    // login succeeded
+                } else {
+                    // TODO
+                    // login failed
+                }
+                // TODO
+                return response;
+            }, function(error){
+                // TODO
+                return error;
+            });
+        }
+    };
+});