配合重新設計調整登入頁

TEAMModelOS/ClientApp/src/components/public/frontEndMain/Index.less

@@ -6,37 +6,44 @@
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
-    &-mark{
-        position: fixed;
-        left:30px;
-        top:30px;
-    }
-    &-schoolName{
-        position: fixed;
-        left: calc(50% - 300px);
-        top: 40px;
+    &-sky{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 30px;
         width: 100%;
-        max-width: 600px;
-        color: white;
-        font-size: 45px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        text-align: center;        
-    }
-    &-server{
         position: fixed;
-        right:30px;
-        top:30px;
-        h5 {
-            font-weight: 100;
-            margin-bottom: 5px;
-            color: #ffffff;
+        top: 0;
+        z-index: 100;
+        left: 0;
+        &-mark{
+            display: flex;
+            align-items: center;
+            .schoolName{
+                text-align: left;
+                color: #e0e0e0;
+                font-size: 17px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-left: 20px;
+                letter-spacing: 1px;
+            }
         }
-    }
+        &-server{
+            display: flex;
+            flex-direction: column;
+            h5 {
+                font-weight: 100;
+                margin-bottom: 5px;
+                color: #ffffff;
+                letter-spacing: 1px;
+            }
+        }
+    }    
     &-body{
-        padding-top: 100px;
-        height: 95%;
+        height: 100%;
         display: -webkit-flex;
         display:         flex;
         -webkit-align-items: center;
@@ -45,7 +52,11 @@
                 justify-content: center;
     }
     &-footer{
-        height: 5%;
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        z-index: 100;
+        left: 0;
         display: flex;
         justify-content: center;
         align-items: center;

TEAMModelOS/ClientApp/src/components/public/frontEndMain/Index.vue

@@ -12,7 +12,7 @@
         to   { transform: rotate(360deg);}
     }
 .login{
-  &-server{
+  &-sky-server{
     .ivu-select-selection, .ivu-btn{
       border-radius: 0;
       background-color: #0d253f;
@@ -46,32 +46,33 @@
 
 <template>
   <div id="login" class="login">
-    <div class="login-mark">
-      <img width="125" src="@/assets/ies5_logo.svg">    
-    </div>
-    <div calss="login-schoolName">
-      {{ schoolName }}
-    </div>
-    <div class="login-server">
-      <h5>{{ $t('login.title.ser') }}</h5>
-      <Dropdown trigger="click" @on-click="chgSerType">
-          <a href="javascript:void(0)">
-            <Button style="width:120px;">
-              
-              <span>
-                {{ $t('login.serAdress.' + config.srvAdr) }}
-              </span>
+    <div class="login-sky">
+      <div class="login-sky-mark">
+        <img width="100" src="@/assets/ies5_logo.svg">        
+        <div class="schoolName">          
+          {{ schoolName ? schoolName : $t('login.title.ies5') }}
+        </div>
+      </div>      
+      <div class="login-sky-server">
+        <h5>{{ $t('login.title.ser') }}</h5>
+        <Dropdown trigger="click" @on-click="chgSerType">
+            <a href="javascript:void(0)">
+              <Button style="width:120px;">
+                
+                <span>
+                  {{ $t('login.serAdress.' + config.srvAdr) }}
+                </span>
 
-              <Icon type="ios-arrow-down"></Icon>
-          </Button>
-          </a>
-          <DropdownMenu slot="list" style="width:120px">
-              <DropdownItem name="China" >{{ $t('login.serAdress.China') }}</DropdownItem>
-              <DropdownItem name="Global">{{ $t('login.serAdress.Global') }}</DropdownItem>
-          </DropdownMenu>
-      </Dropdown>
+                <Icon type="ios-arrow-down"></Icon>
+            </Button>
+            </a>
+            <DropdownMenu slot="list" style="width:120px">
+                <DropdownItem name="China" >{{ $t('login.serAdress.China') }}</DropdownItem>
+                <DropdownItem name="Global">{{ $t('login.serAdress.Global') }}</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+      </div>
     </div>
-
     <div class="login-body">
         <router-view/>
     </div>

TEAMModelOS/ClientApp/src/locale/lang/en-US/login.js

@@ -3,10 +3,11 @@ export default {
         ser: '數據中心位置',
         IDLogin: '醍摩豆帳號登入',
         QRLogin: 'QRCode 掃瑪登入',
-        schoolLogin: '校內帳號登入'
+        schoolLogin: '校內帳號登入',
+        ies5: '醍摩豆云平台'
     },
     subTitle: {
-        IDLogin: '系統管理者、教師、學生與家長登入口',
+        IDLogin: '登入IES智慧教學服務，即刻存取雲端服務',
         QRLogin: '使用HiTA或AClassONE掃描進行登入',
         schoolLogin: '由學校同一分配給學生使用的帳號登入口'
     },
@@ -28,11 +29,11 @@ export default {
     link: {
         QRLogin: 'QRCode登入',
         IDLogin: '帳號登入',
-        regist: '註冊帳號',
+        regist: '免费注册',
         forgetPsw: '忘記密碼'
     },
     communy:{
-        title: '或使用第三方平台登入',
+        title: '或下列方式登入',
         fb: 'Facebook',
         google: 'Google',
         wechat: 'WeChat',

TEAMModelOS/ClientApp/src/locale/lang/zh-CN/login.js

@@ -3,10 +3,11 @@ export default {
         ser: '数据中心位置',
         IDLogin: '醍摩豆账号登入',
         QRLogin: 'QRCode 扫玛登入',
-        schoolLogin: '校内账号登入'
+        schoolLogin: '校内帐号登入',
+        ies5: '醍摩豆云平台'
     },
     subTitle: {
-        IDLogin: '系统管理者、教师、学生与家长登入口',
+        IDLogin: '登入IES智慧教学服务，即刻存取云端服务',
         QRLogin: '使用HiTA或AClassONE扫描进行登入',
         schoolLogin: '由学校统一分配给学生使用的账号登入口'
     },
@@ -28,11 +29,11 @@ export default {
     link: {
         QRLogin: 'QRCode登入',
         IDLogin: '账号登入',
-        regist: '注册账号',
+        regist: '免费注册',
         forgetPsw: '忘记密码'
     },
     communy:{
-        title: '或使用第三方平台登入',
+        title: '或下列方式登入',
         fb: 'Facebook',
         google: 'Google',
         wechat: 'WeChat',

TEAMModelOS/ClientApp/src/locale/lang/zh-TW/login.js

@@ -3,10 +3,11 @@ export default {
         ser: '數據中心位置',
         IDLogin: '醍摩豆帳號登入',
         QRLogin: 'QRCode 掃瑪登入',
-        schoolLogin: '校內帳號登入'
+        schoolLogin: '校內帳號登入',
+        ies5: '醍摩豆雲平台'
     },
     subTitle: {
-        IDLogin: '系統管理者、教師、學生與家長登入口',
+        IDLogin: '登入IES智慧教學服務，即刻存取雲端服務',
         QRLogin: '使用HiTA5掃描進行登入',
         schoolLogin: '由學校统一分配給學生使用的帳號登入口'
     },
@@ -28,11 +29,11 @@ export default {
     link: {
         QRLogin: 'QRCode登入',
         IDLogin: '帳號登入',
-        regist: '註冊帳號',
+        regist: '免費註冊',
         forgetPsw: '忘記密碼'
     },
     communy:{
-        title: '或使用第三方平台登入',
+        title: '或下列方式登入',
         fb: 'Facebook',
         google: 'Google',
         wechat: 'WeChat',

TEAMModelOS/ClientApp/src/router/routes.js

@@ -43,7 +43,7 @@ export const routes = [
 				meta: {
 					middleware: ['login?']
 				},
-				component: resolve => require(['@/view/login/test.vue'], resolve)
+				component: resolve => require(['@/view/login/Index.vue'], resolve)
 			},
 			{
 				name: 'loginTeacher',

TEAMModelOS/ClientApp/src/view/login/Index.less

@@ -1,168 +1,129 @@
 .loginDiv{
-    height: 520px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    .iconFrame:before{
-        border-radius: 50%;
-        border: 1px solid #808695;
-    }
-    .schoolName{
-        letter-spacing: 7px;
-        height: 120px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img{
-            width: 63px;
-            height: 63px;
-            margin-right: 6px;
-        }
-        span{
-            color: white;
-            font-size: 45px;
-        }
-    }
-    .formDiv{
-        width: 800px;
-        display: flex;
-        justify-content: space-between;
-        .loginBox{
-            width: 300px;
-            height: 310px;
-            .title{
-                display: flex;
-                align-items: center;
-                // align-content: center !important;
-                margin-bottom: 5px;
-                .logo{
-                    margin-right: 5px;
-                    height: 15px;
-                }
-                .text{
-                    margin-right: 15px;
+    height: 100%;
+    width:100%;
+    &-block{        
+        height: 100%;
+        float:left;
+        &-left{
+            width: 55%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .marketing{
+                .title{
+                    font-size: 40px;
                     color: #ffffff;
-                    font-size: 16px;
-                }
-                .tooltip{
-                    height: 15px;
-                }
-            }
-            .subTitle{
-                font-size: 14px;
-                color: #d1d1d3;
-                margin-bottom: 25px;
-            }
-            .loginForm{
-                margin-bottom: 10px;
-                .formItem{
-                    margin: 0;
-                }
-                .errlable{
-                    text-align: right;
-                    color: #f22613;
-                    font-size: 12px;
-                    margin-top: 3px;
-                    height: 12px;
+                    line-height: 1.1;
+                    letter-spacing: 1px;
+                    font-weight: 600;
                 }
-            }
-            .extra{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-bottom: 30px;
-                .qrlogin{
-                    display: flex;
-                    align-items: center;
-                    .logo{
-                        margin-right: 5px;
-                        height: 15px;
+                .cont{
+                    margin-top: 30px;
+                    margin-left: 15px;
+                    &-title{
+                        font-size: 26px;
+                        color: #ffffff;
+                        line-height: 1.1;
+                        font-weight: 500;
+                        margin-bottom: 7px;
+                        letter-spacing: 1px;
                     }
-                    a{
-                        font-size: 12px;
-                        color: #668fbc;
-                        text-decoration: underline;
+                    &-text{
+                        font-size: 16px;
+                        margin-bottom: 3px;
+                        color: #9e9e9e;
+                        letter-spacing: 1px;
+                        &.border1:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(222,92,83);
+                        }
+                        &.border2:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(252,220,107);
+                        }
+                        &.border3:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(37,202,146);
+                        }
+                        &.border4:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(62,174,254);
+                        }
                     }
                 }
                 .link{
+                    margin-top: 50px;
                     a{
-                        font-size: 12px;
-                        color: #668fbc;
-                        text-decoration: underline;
+                        color: #2972a9;
                     }
                 }
-            }
-            .communyLoging{
-                .description{
-                    text-align: center;
-                    font-size: 12px;
-                    color: #d1d1d3;
-                    margin-bottom: 20px;
-                    letter-spacing: 1.5px;
+            }            
+        }
+        &-right{
+            width: 45%;
+            background-color: #08101b8c;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .logintype{
+                .title{
+                    display: block;
+                    margin-bottom: 17px;
+                    letter-spacing: 1px;
+                    color: #9e9e9e;
+                    font-size: 13px;
                 }
-                .links{
+                .login-box{
+                    min-width: 520px;
+                    background-color: #424551;
+                    width: 100%;
+                    height: 100px;
                     display: flex;
                     align-items: center;
-                    justify-content: space-around;
-                    .icon{
+                    border-left: 5px solid #3dadff;
+                    border-radius: 5px;
+                    border-right: 5px solid #3dadff;
+                    margin-bottom: 25px;
+                    cursor: pointer;
+                    &-icon{
+                        width: 20%;
+                        float: left;
                         display: flex;
                         align-items: center;
-                        flex-direction: column;
-                        cursor: pointer;
-                        img{
-                            width: 35px;
-                        }
-                        span{
-                            font-size: 12px;
-                            color: #d1d1d3;
-                        }
-                    }
-                }
-            }
-            .qrloginMode{
-                .qrcodeBox{
-                    width:240px;
-                    height:240px;
-                    margin:auto;
-                    margin-bottom: 10px;
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    .qrcode{
-                        padding:20px;
-                        background-color:white;
-                    }
-                    .expired{
-                        position: absolute;
-                        background-color: #ffffffde;
-                        width: 200px;
-                        height: 200px;
-                        display: flex;
                         justify-content: center;
-                        align-items: center;
-                        .ivu-icon{
-                            cursor: pointer;
-                        }
+                        height: 100%;
+                        border-right: 1px solid #616161;
                     }
-                }            
-                .links{
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    .icon-a{
+                    &-cont{
+                        width: 80%;
+                        float: left;
                         display: flex;
+                        flex-direction: row;
                         align-items: center;
-                        img{
-                            margin-right: 3px;
-                            width: 15px;
-                            height: 15px;
+                        justify-content: space-between;
+                        padding: 0 17px;
+                        .main{
+                            color: #bdbdbd;
+                            font-size: 12px;
+                            .subtitle{
+                                display: block;
+                                font-size: 30px;
+                                color: #fff;
+                                font-weight: 600;
+                                margin-bottom: 6px;
+                            }
                         }
                     }
-                    a{
-                        font-size: 12px;
-                        color: #668fbc;
-                    }
                 }
             }
         }

TEAMModelOS/ClientApp/src/view/login/Index.vue

@@ -3,33 +3,6 @@
 </style>
 
 <style lang="less">
-.loginBox{
-  .loginForm{
-    .formItem{
-        input, select{
-            border-radius: 0;
-            font-size: 12px;
-        }
-        .ivu-select-selection{
-          border-radius: 0;
-        }
-    }
-    .schoolAutoComplete{
-      height: 170px;
-      .schoolsBox{
-        border-bottom: 1px solid #e9e9e9;
-        padding: 5px 5px 5px 15px;
-        .area{
-          font-size: 12px;
-          padding: 5px;
-        }
-      }
-    }
-    .ivu-select-dropdown{
-      border-radius: 0;
-    }
-  }
-}
 .identityModal{
   .ivu-modal{
     .ivu-modal-content{
@@ -71,139 +44,61 @@
 
 <template>
   <div class="loginDiv">
-    <div class="schoolName">
-      <!-- 保留 可能以後有校徽 <img src=""> -->
-      <span>{{ defaultSchool.name }}</span>
-    </div>
-    <div class="formDiv">
-      <div class="loginBox">
+    <div class="loginDiv-block loginDiv-block-left">
+      <div class="marketing">
         <div class="title">
-          <div class="logo">
-            <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
-          </div>
-          <h4 class="text">
-            {{ qrloginFlag ? $t('login.title.QRLogin'): $t('login.title.IDLogin') }}
-          </h4>
-          <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
-            <img src="@/assets/icon/icon_info.svg" width="15" height="15">
-            <div slot="content">
-              <p style="font-size: 12px;">{{ $t('login.tooltip.text1') }}</p>
-            </div>
-          </Tooltip>
+          歡迎來到醍摩豆 5<br/>
+          新時代智慧教育之旅 就此展開
         </div>
-        <h4 class="subTitle">
-          {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('login.subTitle.IDLogin')}}
-        </h4>
-
-        <div v-show="!qrloginFlag">
-          <Form class="loginForm" ref="loginForm" :model="loginForm" :rules="loginRule" :show-message="false" @keydown.enter.native="loginSubmit('loginForm')">
-            <FormItem class="formItem" prop="id" >
-              <Input element-id = "tmdID" v-model="loginForm.id" :placeholder="$t('login.placeholder.id')"/>
-            </FormItem>
-            <FormItem class="formItem"  prop="pass">
-              <Input element-id = "tmdpw" type="password" v-model="loginForm.pass" :placeholder="$t('login.placeholder.psw')" >
-                <Icon size="24" v-show="!loading && loginFormEnter" @click="loginSubmit('loginForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
-                <div v-show="loading" class="demo-spin-col" slot="suffix">
-                  <Spin>
-                    <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
-                  </Spin>
-                </div>
-              </Input>
-            </FormItem>
-            <div class="errlable">{{ loginErrText }}</div>
-          </Form>
-
-          <div class="extra">
-            <div class="qrlogin">
-              <div class="logo">
-                <img  width="15" height="15" src="@/assets/icon/icon_qrcode.svg">
-              </div>
-              <a @click="chgLoginType()">{{ $t('login.link.QRLogin') }}</a>
-            </div>
-            <div class="link">
-              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link> | <router-link to="/forgotpw">{{ $t('login.link.forgetPsw') }}</router-link>
-            </div>
+        <div class="cont">
+          <div class="cont-title">Hiteach 5 智慧教育系統</div>
+          <p class="cont-text border1" >實際差異化教學，現代化因材施教</p>
+          <p class="cont-text border2" >線上線下，混和式教學系統首選</p>
+          <p class="cont-text border3" >合作學習，素養導向教學的全面應用</p>
+          <p class="cont-text border4" >看見每個學生思考</p>
+        </div>
+        <div class="cont">
+          <div class="cont-title">醍摩豆雲平台 IES 5</div>
+          <p class="cont-text border1" >新架構與新技術，速度升級更有感</p>
+          <p class="cont-text border2" >兼容各式媒體與檔案，雲端資源庫隨取即用</p>
+          <p class="cont-text border3" >題庫組卷、閱卷系統，評量應用更多元</p>
+          <p class="cont-text border4" >柏拉圖學情分析，學生成績精準提升</p>
+        </div>
+        <div class="link">
+          <a target="_block" :href="tmdurl">了解更多關於醍摩豆 5 <Icon size="19" type="ios-arrow-forward" /></a>
+        </div>
+      </div>
+    </div>
+    <div class="loginDiv-block loginDiv-block-right">
+      <div class="logintype">
+        <span class="title">請選擇您的身分進行登入</span>
+        <div class="login-box" @click="loginTo('teacher')">
+          <div class="login-box-icon">
+            <img width="40" src="@/assets/icon_teacher.svg">
           </div>
-
-          <div class="communyLoging">
-            <div class="description">{{ $t('login.communy.title')}}</div>
-            <div class="links">
-              <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('facebook')">
-                <img  src="@/assets/icon/icon_fb.svg">
-                <span>{{ $t('login.communy.fb')}}</span>
-              </div>
-              <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('google')">
-                <img  src="@/assets/icon/icon_google.svg">
-                <span>{{ $t('login.communy.google')}}</span>
-              </div>
-              <div v-if="!(srvAdr == 'Global')" class="icon" @click="oauthLogin('wechat')">
-                <img  src="@/assets/icon/icon_wechat.svg">
-                <span>{{ $t('login.communy.wechat')}}</span>
-              </div>
+          <div class="login-box-cont">
+            <div class="main">
+              <span class="subtitle">教師身分</span>
+              以教師身分登入IES 5智慧教學服務，即刻存取雲端服務
             </div>
+            <Icon color="#bdbdbd" size="35" type="ios-arrow-forward" />
           </div>
         </div>
-        <div v-show="qrloginFlag">
-          <div class="qrloginMode">
-            <div class="qrcodeBox">
-              <div id="qrcode" :class="{'qrcode': joinQRcode != undefined}" ref="qrcode"></div>
-              <div class="expired" v-if="joinQRcode != undefined && !sseSurvive">
-                <Icon size="40" type="md-refresh-circle" @click="SEELink()" />
-              </div>
-            </div>              
-            <div class="links">
-              <div class="icon-a">
-                <img src="@/assets/icon/icon_account.svg">
-                <a @click="chgLoginType()">{{ $t('login.link.IDLogin') }}</a>
-              </div>
-              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link>
+        <div class="login-box" @click="loginTo('student')">
+          <div class="login-box-icon">
+            <img width="40" src="@/assets/icon_student.svg">
+          </div>
+          <div class="login-box-cont">
+            <div class="main">
+              <span class="subtitle">學生身分</span>
+              以學生身分登入Aclass ONE智慧學伴服務，完成學習任務與測驗
             </div>
+            <Icon color="#bdbdbd" size="35" type="ios-arrow-forward" />
           </div>
         </div>
-      </div>
-
-      <div class="loginBox">
-      <div class="title">
-        <div class="logo">
-          <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
+        <div class="link" style="text-align: right; letter-spacing: 1px;">
+          <span style="margin-right: 20px;">還沒有帳號嗎?</span>點此<router-link style="text-decoration: underline;color:#2972a9;" to="/regist">{{ $t('login.link.regist') }}</router-link>
         </div>
-        <h4 class="text">{{ $t('login.title.schoolLogin') }}</h4>
-        <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
-            <img src="@/assets/icon/icon_info.svg" width="15" height="15">
-            <div slot="content">
-              <p style="font-size: 12px;">{{ $t('login.tooltip.text2') }}</p>
-            </div>
-        </Tooltip>
-      </div>
-      <h4 class="subTitle">{{ $t('login.subTitle.schoolLogin') }}</h4>
-      <Form class="loginForm" ref="studForm" :model="studForm" :rules="studRule" :show-message="false" @keydown.enter.native="loginSubmit('studForm')">
-        <FormItem class="formItem" style="margin-bottom: 15px;" prop="schoolCode">
-          <Select v-show="!defaultSchool.code" v-model="studForm.schoolCode" :placeholder="$t('login.placeholder.schoolMenu')" filterable clearable >
-            <template v-for="(item, index) in schoolList" >
-              <OptionGroup :label="item.province" :key="index">
-                <Option v-for="school in item.schools" :key="school.id" :value="school.id">{{ school.name }}</Option>
-              </OptionGroup>
-            </template>
-          </Select>
-        </FormItem>
-        <FormItem class="formItem" prop="id" >
-          <Input element-id = "studId" v-model="studForm.id" :placeholder="$t('login.placeholder.schoolID')"/>
-          <input type="text" style="position:fixed;z-index:-10000;width:0;border:none"/>
-        </FormItem>
-        <FormItem class="formItem"  prop="pass">
-          <input type="password" style="position:fixed;z-index:-10000;width:0;border:none"/>
-          <Input element-id="studpw"  type="password" v-model="studForm.pass" :placeholder="$t('login.placeholder.schoolPsw')" >
-            <!-- <Icon v-show="studFormEnter" @click="loginSubmit('studForm')" type="md-arrow-forward" slot="suffix" /> -->
-            <Icon size="24" v-show="!loading && studFormEnter" @click="loginSubmit('studForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
-            <div v-show="loading" class="demo-spin-col" slot="suffix">
-              <Spin>
-                <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
-              </Spin>
-            </div>
-          </Input>
-        </FormItem>
-        <div class="errlable">{{ schoolErrText }}</div>
-      </Form>
       </div>
     </div>
     <!-- 提示視窗 -->
@@ -218,246 +113,59 @@
   </div>
 </template>
 <script>
-import { EventSourcePolyfill } from 'event-source-polyfill';
-import QRCode from 'qrcodejs2'
 import { User } from '@/service/User'
-import { mapState, mapGetters } from 'vuex'
+import { Teacher } from './page/Teacher'
 
 export default {
   data() {
-    const validateID = (rule, value, callback) => {
-      if (value === '') {
-          callback(new Error());
-          this.loginErrText = this.$t('error.required')
-      } else if (value.search(/^\+/) == 0) {
-          callback(new Error());
-          this.loginErrText = this.$t('error.format.default')
-      } else {
-        if(value.indexOf('@') >=0){ //是否為Email
-          var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
-          if(value.search(emailRule)!= -1){
-              callback();
-              this.loginErrText = ''
-          } else {
-              callback(new Error());
-              this.loginErrText = this.$t('error.format.email')
-          }
-        } else {
-          callback();
-          this.loginErrText = ''
-        }
-      }
-    };
-    const validatePW = (rule, value, callback) => {
-      if (value === '') {
-          callback(new Error());
-          this.loginErrText = this.$t('error.required')
-      }
-      else {
-          callback();
-          this.loginErrText = ''
-      }
-    };
-    const validateStudID = (rule, value, callback) => {
-      if (value === '') {
-          callback(new Error());
-          this.schoolErrText = this.$t('error.required')
-      } else if (value.search(/^\+/) == 0) {
-          callback(new Error());
-          this.schoolErrText = this.$t('error.format.default')
-      } else {
-        if(value.indexOf('@') >=0){ //是否為Email
-          var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
-          if(value.search(emailRule)!= -1){
-              callback();
-              this.schoolErrText = ''
-          } else {
-              callback(new Error());
-              this.schoolErrText = this.$t('error.format.email')
-          }
-        } else {
-          callback();
-          this.schoolErrText = ''
-        }
-      }
-    };
-    const validateStudPW = (rule, value, callback) => {
-      if (value === '') {
-          callback(new Error());
-          this.schoolErrText = this.$t('error.required')
-      }
-      else {
-          callback();
-          this.schoolErrText = ''
-      }
-    };
-    const validateStudSchoolCode = (rule, value, callback) => {
-      if (value === '') {
-          callback(new Error());
-          this.schoolErrText = this.$t('error.required')
-      }
-      else {
-          callback();
-          this.schoolErrText = ''
-      }
-    };
     return {
-      qrloginFlag: false,
-      loginForm: {
-          id: '',
-          pass: '',
-      },
-      loginRule: {
-          id: [
-              { validator: validateID, trigger: 'blur' },
-          ],
-          pass: [
-              { validator: validatePW, trigger: 'blur' },
-          ]
-      },
-      studForm: {
-        schoolCode: '',
-        id: '',
-        pass: ''
-      },
-      studRule: {
-          schoolCode: [
-            { validator: validateStudSchoolCode, trigger: 'blur' },
-          ],
-          id: [
-            { validator: validateStudID, trigger: 'blur' },
-          ],
-          pass: [
-            { validator: validateStudPW, trigger: 'blur' },
-          ]
-      },
-      loginErrText: '',
-      schoolErrText: '',
-      userOauth: {        // 社群帳號
-          code: '',
-          state: ''
-      },
-      schoolList: [],
-      loading: false,
-      sseSurvive: false,
-      joinQRcode: undefined,
       defaultSchool: {
         name: '',
         code: ''
       },
-      identityFlag: false
+      userOauth:{
+        code: '',
+        state: ''
+      },
+      identityFlag: false,
+      lang: localStorage.getItem('local'),
     }
   },
-  computed: {
-    ...mapState({
-      config: state => state.config
-    }),
-    ...mapGetters({
-        srvAdr: 'config/getSrvAdr'
-    }),
-    loginFormEnter: function(){
-      let flag = false
-      if(this.loginForm.id && this.loginForm.pass) flag = true
-      return flag
-    },
-    studFormEnter: function(){
-      let flag = false
-      if(this.studForm.schoolCode && this.studForm.id && this.studForm.pass) flag = true
-      return flag
-    }
+  components: {
+    Teacher
   },
   created() {
-    // 建立學校LIST清單
-    this.getSchools()
-
     // 取得學校設定簡碼
-    this.setLoginSchoolCode()
-   
+    this.setDefSchool()
+
     //TEAMModelID 社群登入資訊
     this.userOauth.code = this.$route.query.code == undefined ? '' : this.$route.query.code;
     this.userOauth.state = this.$route.query.state == undefined ? '' : this.$route.query.state;
 
     // 社群帳號登入
     if(this.userOauth.code != '' & this.userOauth.state !='' ) {
-      this.putUserCode(this.userOauth.state)
-    } // 大雲快速登入
-    else if(this.userOauth.code != ''){
+      this.putUserCode()
+    } else if(this.userOauth.code != ''){ // 大雲快速登入
       this.SSOLogin(this.userOauth.code)
     }
   },
+  computed:{
+    tmdurl: function(){
+      let twUrl = 'https://www.habook.com/zh-tw/news.php?act=view&id=408'
+      let cnUrl = ' https://www.habook.com.cn/news.php?act=view&id=331'
+      let enUrl = 'https://www.habook.com/en/news.php?act=view&id=408'
+      
+      return this.lang === 'zh-tw' ? twUrl : this.lang === 'zh-cn' ? cnUrl : enUrl
+    }
+  },
   methods: {
-    chgLoginType: function(){ // 變更登入類型
-      this.qrloginFlag = !this.qrloginFlag
-      if(this.qrloginFlag && !this.sseSurvive) {
-        // SSE 連線
-        this.SEELink()
-      }
-    },
-    loginSubmit: function(name){  // 登入
-      this.$refs[name].validate( async(valid) => {        
-        if (valid) {
-          this.loading = true // 登入中動畫
-          let result; // 輸出暫存
-          let isFail = false // 失敗flag
-
-          switch (name) {
-            case 'loginForm':
-              
-              // 詢問帳號是否有效
-              await this.$api.login.verification({id: this.loginForm.id, pass: this.loginForm.pass}).then(res => {
-                result = res
-              }).catch(err=>{
-                isFail = true
-              })
-              console.log('res***',result)
-              if(isFail){
-                this.loginErrText = this.$t('login.apiError.text1')
-                this.loading = false
-              } else {
-                this.loginProcess(result, this.defaultSchool.code)
-              }              
-              break;
-            case 'studForm':
-
-              // 學生登入大雲
-              await this.$api.login.studLogin({schoolCode: this.studForm.schoolCode, id: this.studForm.id, pw: this.studForm.pass}).then( res => {
-                  result = res
-              }).catch(err=>{
-                isFail = true
-              })
-
-
-              if(isFail){
-                this.schoolErrText = this.$t('login.apiError.text1')
-                this.loading = false
-              } else {
-                //設定權限並登入
-                User.login(result).then(res => {
-                  if(res) {
-                    localStorage.setItem('identity', 'student')
-                    this.$router.push({ path: '/studentWeb' })
-                  }
-                })
-              }              
-              break;
-          }          
-          return false;
-        }
-      })
-    },
-    oauthLogin: function(provider){ // 第三方登入
-      let redirect_uri = window.location.origin + '/login';
-      this.$api.BuildOauthUrl(provider, redirect_uri).then(res=>{
-          window.location.href  = res
-      })
-    },
-    putUserCode: function(provider){ //如果第三方登入會啟動的function
-        this.$Spin.show(); //開啟加載畫面
-        let redirect_uri = window.location.origin + '/login';
-        this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res=>{
-          this.$Spin.hide(); //關閉加載畫面
-          this.loginProcess(res, this.defaultSchool.code)
-        })
+    putUserCode: function(){ //如果第三方登入會啟動的function
+      this.$Spin.show(); //開啟加載畫面
+      let redirect_uri = window.location.origin + '/login'
+      this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res=>{
+        this.$Spin.hide(); //關閉加載畫面
+        this.loginProcess(res, this.defaultSchool.code)
+      })  
     },
     SSOLogin: function(code){ // 快速登入
       this.$Spin.show(); //開啟加載畫面
@@ -473,66 +181,6 @@ export default {
           this.$router.push({ name: 'login' })
       })
     },
-    SEELink: function() { // 開啟SSE連結
-      if(!this.sseSurvive){
-        let url = this.config[this.srvAdr].coreAPIUrl
-
-        let es = new EventSourcePolyfill(url+'/service/sse',{headers: {'X-Auth-Name': 'IES5'}});
-        let _this = this;
-
-        var closeSSE = function(){
-          if(_this.sseSurvive) {
-            es.close();
-            _this.sseSurvive = false
-          }
-        }
-
-        es.addEventListener('open', function (e) {
-          _this.sseSurvive = true
-        }, false);
-
-        //取得登入網址
-        es.addEventListener('message', function (e) {
-          if (e.data) {
-            let data = JSON.parse(e.data)
-            
-            if(data.sid) {
-              let qrcodeURL = url + '/qrcode/login?sid=' + encodeURIComponent(data.sid, "utf-8") + '&info=' + encodeURIComponent(_this.$t('login.sse.text1'),"utf-8")
-              _this.crtQrcode(qrcodeURL)
-            } else if(data.code){
-              closeSSE()
-              _this.SSOLogin(data.code)
-            }
-
-          }
-        }, false);
-
-        // 錯誤
-        es.addEventListener('error', function (e) {
-          closeSSE()
-        }, false);
-
-        // 設定五分鐘後關閉連接
-        setTimeout(() => {
-          closeSSE()
-        }, 300000);
-      }
-    },
-    crtQrcode: function(url) { // 開啟QRCODE
-      this.$nextTick(() => {
-        if(this.joinQRcode == undefined){
-          let qrcode = new QRCode('qrcode', {
-            width: 200, // 设置宽度，单位像素
-            height: 200, // 设置高度，单位像素
-            text: url, // 设置二维码内容或跳转地址
-          })
-          this.joinQRcode = qrcode
-        } else {
-          this.joinQRcode.clear()
-          this.joinQRcode.makeCode(url)
-        }
-      })
-    },
     loginProcess: async function(item, schoolCode){ // 登入用function
       let result;
 
@@ -557,57 +205,24 @@ export default {
       })
     },
     saveUserCodes: function (res) {
-		  this.$store.commit('setUserInfo',res)
+  		this.$store.commit('setUserInfo',res)
 	  },
-    getSchools: function(){ // 取得學校清單
-      let _this = this
-      this.$api.getSchoolList().then( res =>{
-        if(Array.isArray(res.schools) && res.schools.length > 0){
-          res.schools.forEach(function(item){
-
-            let isProvinceSame = _this.schoolList.find(function( val ){
-              return val.province == item.province
-            })
-
-            if(isProvinceSame){
-
-              let index = _this.schoolList.indexOf(isProvinceSame)
-              _this.schoolList[index].schools.push({
-                id: item.id,
-                name: item.name,
-              })
-            } else {
-              let data = {
-                province: item.province,
-                schools: [
-                  {
-                    id: item.id,
-                    name: item.name,
-                  }
-                ]
-              }
-
-              _this.schoolList.push(data)
-
-            }
-          })
-        }
-      })
-    },
-    setLoginSchoolCode: function(){ // 設定預設的學校簡碼
-      let schoolCode = this.$route.query.schoolcode == undefined ? '' : this.$route.query.schoolcode;
-      if(schoolCode){
-        this.$api.login.getSchoolName({schoolCode: schoolCode}).then( res => {
-          this.defaultSchool.code = res.code
-          this.defaultSchool.name = res.name
-          this.studForm.schoolCode = this.defaultSchool.code
-        })
-      }
+    setDefSchool: function(){
+      let defschool = sessionStorage.defaultSchool
+      if(defschool){
+        defschool = JSON.parse(decodeURIComponent(defschool), "utf-8")
+        this.defaultSchool.code = defSchool.code
+        this.defaultSchool.name = defSchool.name
+      }      
     },
     goWhere: function(identity){
       localStorage.setItem('identity', identity)
       let path = identity == 'student' ? '/studentWeb' : '/home'
       this.$router.push({ path: path })
+    },
+    loginTo: function(identity) {
+      let pathname = identity == 'student' ? 'loginStudent' : 'loginTeacher'
+      this.$router.push({ name: pathname })
     }
   }
 }

TEAMModelOS/ClientApp/src/view/login/olderIndex.vue

@@ -0,0 +1,614 @@
+<style lang="less" scoped>
+  @import './Index.less';
+</style>
+
+<style lang="less">
+.loginBox{
+  .loginForm{
+    .formItem{
+        input, select{
+            border-radius: 0;
+            font-size: 12px;
+        }
+        .ivu-select-selection{
+          border-radius: 0;
+        }
+    }
+    .schoolAutoComplete{
+      height: 170px;
+      .schoolsBox{
+        border-bottom: 1px solid #e9e9e9;
+        padding: 5px 5px 5px 15px;
+        .area{
+          font-size: 12px;
+          padding: 5px;
+        }
+      }
+    }
+    .ivu-select-dropdown{
+      border-radius: 0;
+    }
+  }
+}
+.identityModal{
+  .ivu-modal{
+    .ivu-modal-content{
+      background-color: #2a292e;
+      padding: 12px;
+      border: 1px solid #ccc;
+      .ivu-modal-header, .ivu-modal-footer{
+        border: 0;
+      }
+      .ivu-modal-footer{
+        padding: 0;
+      }
+      .ivu-modal-header{
+        padding: 5px 16px;
+        p{
+          color: whitesmoke;
+        }
+      }
+      .identity-body{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .ivu-btn{
+          background-color: #1cc0f2;
+          color: white;
+          font-weight: bold;
+          border: 0;
+          padding: 0 22px;
+        }
+      }
+    }        
+  }
+}
+.demo-spin-col .ivu-spin-main{
+	background-color: transparent;
+	padding: 0;
+}
+</style>
+
+<template>
+  <div class="loginDiv">
+    <div class="schoolName">
+      <!-- 保留 可能以後有校徽 <img src=""> -->
+      <span>{{ defaultSchool.name }}</span>
+    </div>
+    <div class="formDiv">
+      <div class="loginBox">
+        <div class="title">
+          <div class="logo">
+            <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
+          </div>
+          <h4 class="text">
+            {{ qrloginFlag ? $t('login.title.QRLogin'): $t('login.title.IDLogin') }}
+          </h4>
+          <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
+            <img src="@/assets/icon/icon_info.svg" width="15" height="15">
+            <div slot="content">
+              <p style="font-size: 12px;">{{ $t('login.tooltip.text1') }}</p>
+            </div>
+          </Tooltip>
+        </div>
+        <h4 class="subTitle">
+          {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('login.subTitle.IDLogin')}}
+        </h4>
+
+        <div v-show="!qrloginFlag">
+          <Form class="loginForm" ref="loginForm" :model="loginForm" :rules="loginRule" :show-message="false" @keydown.enter.native="loginSubmit('loginForm')">
+            <FormItem class="formItem" prop="id" >
+              <Input element-id = "tmdID" v-model="loginForm.id" :placeholder="$t('login.placeholder.id')"/>
+            </FormItem>
+            <FormItem class="formItem"  prop="pass">
+              <Input element-id = "tmdpw" type="password" v-model="loginForm.pass" :placeholder="$t('login.placeholder.psw')" >
+                <Icon size="24" v-show="!loading && loginFormEnter" @click="loginSubmit('loginForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
+                <div v-show="loading" class="demo-spin-col" slot="suffix">
+                  <Spin>
+                    <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+                  </Spin>
+                </div>
+              </Input>
+            </FormItem>
+            <div class="errlable">{{ loginErrText }}</div>
+          </Form>
+
+          <div class="extra">
+            <div class="qrlogin">
+              <div class="logo">
+                <img  width="15" height="15" src="@/assets/icon/icon_qrcode.svg">
+              </div>
+              <a @click="chgLoginType()">{{ $t('login.link.QRLogin') }}</a>
+            </div>
+            <div class="link">
+              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link> | <router-link to="/forgotpw">{{ $t('login.link.forgetPsw') }}</router-link>
+            </div>
+          </div>
+
+          <div class="communyLoging">
+            <div class="description">{{ $t('login.communy.title')}}</div>
+            <div class="links">
+              <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('facebook')">
+                <img  src="@/assets/icon/icon_fb.svg">
+                <span>{{ $t('login.communy.fb')}}</span>
+              </div>
+              <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('google')">
+                <img  src="@/assets/icon/icon_google.svg">
+                <span>{{ $t('login.communy.google')}}</span>
+              </div>
+              <div v-if="!(srvAdr == 'Global')" class="icon" @click="oauthLogin('wechat')">
+                <img  src="@/assets/icon/icon_wechat.svg">
+                <span>{{ $t('login.communy.wechat')}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-show="qrloginFlag">
+          <div class="qrloginMode">
+            <div class="qrcodeBox">
+              <div id="qrcode" :class="{'qrcode': joinQRcode != undefined}" ref="qrcode"></div>
+              <div class="expired" v-if="joinQRcode != undefined && !sseSurvive">
+                <Icon size="40" type="md-refresh-circle" @click="SEELink()" />
+              </div>
+            </div>              
+            <div class="links">
+              <div class="icon-a">
+                <img src="@/assets/icon/icon_account.svg">
+                <a @click="chgLoginType()">{{ $t('login.link.IDLogin') }}</a>
+              </div>
+              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="loginBox">
+      <div class="title">
+        <div class="logo">
+          <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
+        </div>
+        <h4 class="text">{{ $t('login.title.schoolLogin') }}</h4>
+        <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
+            <img src="@/assets/icon/icon_info.svg" width="15" height="15">
+            <div slot="content">
+              <p style="font-size: 12px;">{{ $t('login.tooltip.text2') }}</p>
+            </div>
+        </Tooltip>
+      </div>
+      <h4 class="subTitle">{{ $t('login.subTitle.schoolLogin') }}</h4>
+      <Form class="loginForm" ref="studForm" :model="studForm" :rules="studRule" :show-message="false" @keydown.enter.native="loginSubmit('studForm')">
+        <FormItem class="formItem" style="margin-bottom: 15px;" prop="schoolCode">
+          <Select v-show="!defaultSchool.code" v-model="studForm.schoolCode" :placeholder="$t('login.placeholder.schoolMenu')" filterable clearable >
+            <template v-for="(item, index) in schoolList" >
+              <OptionGroup :label="item.province" :key="index">
+                <Option v-for="school in item.schools" :key="school.id" :value="school.id">{{ school.name }}</Option>
+              </OptionGroup>
+            </template>
+          </Select>
+        </FormItem>
+        <FormItem class="formItem" prop="id" >
+          <Input element-id = "studId" v-model="studForm.id" :placeholder="$t('login.placeholder.schoolID')"/>
+          <input type="text" style="position:fixed;z-index:-10000;width:0;border:none"/>
+        </FormItem>
+        <FormItem class="formItem"  prop="pass">
+          <input type="password" style="position:fixed;z-index:-10000;width:0;border:none"/>
+          <Input element-id="studpw"  type="password" v-model="studForm.pass" :placeholder="$t('login.placeholder.schoolPsw')" >
+            <!-- <Icon v-show="studFormEnter" @click="loginSubmit('studForm')" type="md-arrow-forward" slot="suffix" /> -->
+            <Icon size="24" v-show="!loading && studFormEnter" @click="loginSubmit('studForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
+            <div v-show="loading" class="demo-spin-col" slot="suffix">
+              <Spin>
+                <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+              </Spin>
+            </div>
+          </Input>
+        </FormItem>
+        <div class="errlable">{{ schoolErrText }}</div>
+      </Form>
+      </div>
+    </div>
+    <!-- 提示視窗 -->
+    <Modal v-model="identityFlag" width="360" :mask-closable="false" :closable="false" class-name="identityModal">
+        <p slot="header">{{ $t('login.modal.title') }}</p>
+        <div class="identity-body">
+            <Button size="large" @click="goWhere('teacher')">{{ $t('login.modal.btn1') }}</Button>
+            <Button size="large" @click="goWhere('student')">{{ $t('login.modal.btn2') }}</Button>
+        </div>
+        <div slot="footer"></div>
+    </Modal>
+  </div>
+</template>
+<script>
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import QRCode from 'qrcodejs2'
+import { User } from '@/service/User'
+import { mapState, mapGetters } from 'vuex'
+
+export default {
+  data() {
+    const validateID = (rule, value, callback) => {
+      if (value === '') {
+          callback(new Error());
+          this.loginErrText = this.$t('error.required')
+      } else if (value.search(/^\+/) == 0) {
+          callback(new Error());
+          this.loginErrText = this.$t('error.format.default')
+      } else {
+        if(value.indexOf('@') >=0){ //是否為Email
+          var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
+          if(value.search(emailRule)!= -1){
+              callback();
+              this.loginErrText = ''
+          } else {
+              callback(new Error());
+              this.loginErrText = this.$t('error.format.email')
+          }
+        } else {
+          callback();
+          this.loginErrText = ''
+        }
+      }
+    };
+    const validatePW = (rule, value, callback) => {
+      if (value === '') {
+          callback(new Error());
+          this.loginErrText = this.$t('error.required')
+      }
+      else {
+          callback();
+          this.loginErrText = ''
+      }
+    };
+    const validateStudID = (rule, value, callback) => {
+      if (value === '') {
+          callback(new Error());
+          this.schoolErrText = this.$t('error.required')
+      } else if (value.search(/^\+/) == 0) {
+          callback(new Error());
+          this.schoolErrText = this.$t('error.format.default')
+      } else {
+        if(value.indexOf('@') >=0){ //是否為Email
+          var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
+          if(value.search(emailRule)!= -1){
+              callback();
+              this.schoolErrText = ''
+          } else {
+              callback(new Error());
+              this.schoolErrText = this.$t('error.format.email')
+          }
+        } else {
+          callback();
+          this.schoolErrText = ''
+        }
+      }
+    };
+    const validateStudPW = (rule, value, callback) => {
+      if (value === '') {
+          callback(new Error());
+          this.schoolErrText = this.$t('error.required')
+      }
+      else {
+          callback();
+          this.schoolErrText = ''
+      }
+    };
+    const validateStudSchoolCode = (rule, value, callback) => {
+      if (value === '') {
+          callback(new Error());
+          this.schoolErrText = this.$t('error.required')
+      }
+      else {
+          callback();
+          this.schoolErrText = ''
+      }
+    };
+    return {
+      qrloginFlag: false,
+      loginForm: {
+          id: '',
+          pass: '',
+      },
+      loginRule: {
+          id: [
+              { validator: validateID, trigger: 'blur' },
+          ],
+          pass: [
+              { validator: validatePW, trigger: 'blur' },
+          ]
+      },
+      studForm: {
+        schoolCode: '',
+        id: '',
+        pass: ''
+      },
+      studRule: {
+          schoolCode: [
+            { validator: validateStudSchoolCode, trigger: 'blur' },
+          ],
+          id: [
+            { validator: validateStudID, trigger: 'blur' },
+          ],
+          pass: [
+            { validator: validateStudPW, trigger: 'blur' },
+          ]
+      },
+      loginErrText: '',
+      schoolErrText: '',
+      userOauth: {        // 社群帳號
+          code: '',
+          state: ''
+      },
+      schoolList: [],
+      loading: false,
+      sseSurvive: false,
+      joinQRcode: undefined,
+      defaultSchool: {
+        name: '',
+        code: ''
+      },
+      identityFlag: false
+    }
+  },
+  computed: {
+    ...mapState({
+      config: state => state.config
+    }),
+    ...mapGetters({
+        srvAdr: 'config/getSrvAdr'
+    }),
+    loginFormEnter: function(){
+      let flag = false
+      if(this.loginForm.id && this.loginForm.pass) flag = true
+      return flag
+    },
+    studFormEnter: function(){
+      let flag = false
+      if(this.studForm.schoolCode && this.studForm.id && this.studForm.pass) flag = true
+      return flag
+    }
+  },
+  created() {
+    // 建立學校LIST清單
+    this.getSchools()
+
+    // 取得學校設定簡碼
+    this.setLoginSchoolCode()
+   
+    //TEAMModelID 社群登入資訊
+    this.userOauth.code = this.$route.query.code == undefined ? '' : this.$route.query.code;
+    this.userOauth.state = this.$route.query.state == undefined ? '' : this.$route.query.state;
+
+    // 社群帳號登入
+    if(this.userOauth.code != '' & this.userOauth.state !='' ) {
+      this.putUserCode(this.userOauth.state)
+    } // 大雲快速登入
+    else if(this.userOauth.code != ''){
+      this.SSOLogin(this.userOauth.code)
+    }
+  },
+  methods: {
+    chgLoginType: function(){ // 變更登入類型
+      this.qrloginFlag = !this.qrloginFlag
+      if(this.qrloginFlag && !this.sseSurvive) {
+        // SSE 連線
+        this.SEELink()
+      }
+    },
+    loginSubmit: function(name){  // 登入
+      this.$refs[name].validate( async(valid) => {        
+        if (valid) {
+          this.loading = true // 登入中動畫
+          let result; // 輸出暫存
+          let isFail = false // 失敗flag
+
+          switch (name) {
+            case 'loginForm':
+              
+              // 詢問帳號是否有效
+              await this.$api.login.verification({id: this.loginForm.id, pass: this.loginForm.pass}).then(res => {
+                result = res
+              }).catch(err=>{
+                isFail = true
+              })
+              console.log('res***',result)
+              if(isFail){
+                this.loginErrText = this.$t('login.apiError.text1')
+                this.loading = false
+              } else {
+                this.loginProcess(result, this.defaultSchool.code)
+              }              
+              break;
+            case 'studForm':
+
+              // 學生登入大雲
+              await this.$api.login.studLogin({schoolCode: this.studForm.schoolCode, id: this.studForm.id, pw: this.studForm.pass}).then( res => {
+                  result = res
+              }).catch(err=>{
+                isFail = true
+              })
+
+
+              if(isFail){
+                this.schoolErrText = this.$t('login.apiError.text1')
+                this.loading = false
+              } else {
+                //設定權限並登入
+                User.login(result).then(res => {
+                  if(res) {
+                    localStorage.setItem('identity', 'student')
+                    this.$router.push({ path: '/studentWeb' })
+                  }
+                })
+              }              
+              break;
+          }          
+          return false;
+        }
+      })
+    },
+    oauthLogin: function(provider){ // 第三方登入
+      let redirect_uri = window.location.origin + '/login';
+      this.$api.BuildOauthUrl(provider, redirect_uri).then(res=>{
+          window.location.href  = res
+      })
+    },
+    putUserCode: function(provider){ //如果第三方登入會啟動的function
+        this.$Spin.show(); //開啟加載畫面
+        let redirect_uri = window.location.origin + '/login';
+        this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res=>{
+          this.$Spin.hide(); //關閉加載畫面
+          this.loginProcess(res, this.defaultSchool.code)
+        })
+    },
+    SSOLogin: function(code){ // 快速登入
+      this.$Spin.show(); //開啟加載畫面
+      this.$api.SSOLogin(code).then( async res=>{
+        this.$Spin.hide(); // 關閉加載畫面
+          if(!res.error){
+            // 登入大雲開始
+            this.loginProcess(res, this.defaultSchool.code)
+          } else {
+            this.$Message.warning(this.$t('login.sse.error.text1'));
+          }
+
+          this.$router.push({ name: 'login' })
+      })
+    },
+    SEELink: function() { // 開啟SSE連結
+      if(!this.sseSurvive){
+        let url = this.config[this.srvAdr].coreAPIUrl
+
+        let es = new EventSourcePolyfill(url+'/service/sse',{headers: {'X-Auth-Name': 'IES5'}});
+        let _this = this;
+
+        var closeSSE = function(){
+          if(_this.sseSurvive) {
+            es.close();
+            _this.sseSurvive = false
+          }
+        }
+
+        es.addEventListener('open', function (e) {
+          _this.sseSurvive = true
+        }, false);
+
+        //取得登入網址
+        es.addEventListener('message', function (e) {
+          if (e.data) {
+            let data = JSON.parse(e.data)
+            
+            if(data.sid) {
+              let qrcodeURL = url + '/qrcode/login?sid=' + encodeURIComponent(data.sid, "utf-8") + '&info=' + encodeURIComponent(_this.$t('login.sse.text1'),"utf-8")
+              _this.crtQrcode(qrcodeURL)
+            } else if(data.code){
+              closeSSE()
+              _this.SSOLogin(data.code)
+            }
+
+          }
+        }, false);
+
+        // 錯誤
+        es.addEventListener('error', function (e) {
+          closeSSE()
+        }, false);
+
+        // 設定五分鐘後關閉連接
+        setTimeout(() => {
+          closeSSE()
+        }, 300000);
+      }
+    },
+    crtQrcode: function(url) { // 開啟QRCODE
+      this.$nextTick(() => {
+        if(this.joinQRcode == undefined){
+          let qrcode = new QRCode('qrcode', {
+            width: 200, // 设置宽度，单位像素
+            height: 200, // 设置高度，单位像素
+            text: url, // 设置二维码内容或跳转地址
+          })
+          this.joinQRcode = qrcode
+        } else {
+          this.joinQRcode.clear()
+          this.joinQRcode.makeCode(url)
+        }
+      })
+    },
+    loginProcess: async function(item, schoolCode){ // 登入用function
+      let result;
+
+      await this.$api.login.loginIES(item, schoolCode).then( res => {
+        result = res
+      })
+      console.log('////',result)
+      //設定權限並登入
+      let identity = localStorage.getItem('identity')
+      User.login(result).then(res => {
+        if(res && identity) {
+          this.saveUserCodes({
+            TEAMModelId: result.id,
+            name:result.name,
+            schoolCode: result.defaultschool
+          })
+          let path = identity == 'student' ? '/studentWeb' : '/home'
+          this.$router.push({ path: path })
+        } else {
+          this.identityFlag = true;
+        }
+      })
+    },
+    saveUserCodes: function (res) {
+		  this.$store.commit('setUserInfo',res)
+	  },
+    getSchools: function(){ // 取得學校清單
+      let _this = this
+      this.$api.getSchoolList().then( res =>{
+        if(Array.isArray(res.schools) && res.schools.length > 0){
+          res.schools.forEach(function(item){
+
+            let isProvinceSame = _this.schoolList.find(function( val ){
+              return val.province == item.province
+            })
+
+            if(isProvinceSame){
+
+              let index = _this.schoolList.indexOf(isProvinceSame)
+              _this.schoolList[index].schools.push({
+                id: item.id,
+                name: item.name,
+              })
+            } else {
+              let data = {
+                province: item.province,
+                schools: [
+                  {
+                    id: item.id,
+                    name: item.name,
+                  }
+                ]
+              }
+
+              _this.schoolList.push(data)
+
+            }
+          })
+        }
+      })
+    },
+    setLoginSchoolCode: function(){ // 設定預設的學校簡碼
+      let schoolCode = this.$route.query.schoolcode == undefined ? '' : this.$route.query.schoolcode;
+      if(schoolCode){
+        this.$api.login.getSchoolName({schoolCode: schoolCode}).then( res => {
+          this.defaultSchool.code = res.code
+          this.defaultSchool.name = res.name
+          this.studForm.schoolCode = this.defaultSchool.code
+        })
+      }
+    },
+    goWhere: function(identity){
+      localStorage.setItem('identity', identity)
+      let path = identity == 'student' ? '/studentWeb' : '/home'
+      this.$router.push({ path: path })
+    }
+  }
+}
+</script>

TEAMModelOS/ClientApp/src/view/login/page/Student.less

@@ -3,27 +3,11 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     .iconFrame:before{
         border-radius: 50%;
         border: 1px solid #808695;
     }
-    .schoolName{
-        letter-spacing: 7px;
-        height: 120px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img{
-            width: 63px;
-            height: 63px;
-            margin-right: 6px;
-        }
-        span{
-            color: white;
-            font-size: 45px;
-        }
-    }
     .formDiv{
         width: 800px;
         display: flex;
@@ -50,9 +34,12 @@
                 }
             }
             .subTitle{
-                font-size: 14px;
+                font-size: 12px;
                 color: #d1d1d3;
-                margin-bottom: 25px;
+                margin-bottom: 6px;
+                font-weight: 100;
+                padding-left: 2px;
+                letter-spacing: 1px;
             }
             .loginForm{
                 margin-bottom: 10px;

TEAMModelOS/ClientApp/src/view/login/page/Student.vue

@@ -71,11 +71,14 @@
 
 <template>
   <div class="loginDiv">
-    <div class="schoolName">
-        <div style="width: 100px;height: 100px;background-color: #69b0d0;border-radius: 4px;cursor: pointer;">
-          <img style="display: block;width: 100%;height: 100%;" src="@/assets/icon/studentIcon.png">
-        </div>
-    </div>
+    <h3 class="student-title" style="text-align: left;
+    width: 800px;
+    margin-bottom: 40px;
+    font-size: 25px;
+    color: #fff;
+    letter-spacing: 1px;">
+      學生身分登入
+    </h3>
     <div class="formDiv">
       <div class="loginBox">
         <div class="title">
@@ -93,7 +96,7 @@
           </Tooltip>
         </div>
         <h4 class="subTitle">
-          {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('login.subTitle.IDLogin')}}
+          {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('由學生自主申請的醍摩豆帳號登入口')}}
         </h4>
 
         <div v-show="!qrloginFlag">

TEAMModelOS/ClientApp/src/view/login/page/Teacher.less

@@ -1,166 +1,239 @@
 .loginDiv{
-    height: 520px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: space-around;
     .iconFrame:before{
         border-radius: 50%;
         border: 1px solid #808695;
     }
-    .schoolName{
-        letter-spacing: 7px;
-        height: 120px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img{
-            width: 63px;
-            height: 63px;
-        }
-    }
-    .formDiv{
-        width: 800px;
-        display: flex;
-        justify-content: center;
-        .loginBox{
-            width: 300px;
-            height: 310px;
-            .title{
-                display: flex;
-                align-items: center;
-                // align-content: center !important;
-                margin-bottom: 5px;
-                .logo{
-                    margin-right: 5px;
-                    height: 15px;
-                }
-                .text{
-                    margin-right: 15px;
+    height: 100%;
+    width:100%;
+    &-block{        
+        height: 100%;
+        float:left;
+        &-left{
+            width: 55%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .marketing{
+                .title{
+                    font-size: 40px;
                     color: #ffffff;
-                    font-size: 16px;
-                }
-                .tooltip{
-                    height: 15px;
+                    line-height: 1.1;
+                    letter-spacing: 1px;
+                    font-weight: 600;
                 }
-            }
-            .subTitle{
-                font-size: 14px;
-                color: #d1d1d3;
-                margin-bottom: 25px;
-            }
-            .loginForm{
-                margin-bottom: 10px;
-                .formItem{
-                    margin: 0;
-                }
-                .errlable{
-                    text-align: right;
-                    color: #f22613;
-                    font-size: 12px;
-                    margin-top: 3px;
-                    height: 12px;
-                }
-            }
-            .extra{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-bottom: 30px;
-                .qrlogin{
-                    display: flex;
-                    align-items: center;
-                    .logo{
-                        margin-right: 5px;
-                        height: 15px;
+                .cont{
+                    margin-top: 30px;
+                    margin-left: 15px;
+                    &-title{
+                        font-size: 26px;
+                        color: #ffffff;
+                        line-height: 1.1;
+                        font-weight: 500;
+                        margin-bottom: 7px;
+                        letter-spacing: 1px;
                     }
-                    a{
-                        font-size: 12px;
-                        color: #668fbc;
-                        text-decoration: underline;
+                    &-text{
+                        font-size: 16px;
+                        margin-bottom: 3px;
+                        color: #9e9e9e;
+                        letter-spacing: 1px;
+                        &.border1:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(222,92,83);
+                        }
+                        &.border2:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(252,220,107);
+                        }
+                        &.border3:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(37,202,146);
+                        }
+                        &.border4:before{
+                            content: '|';                            
+                            margin-right: 11px;
+                            font-weight: 900;
+                            color: rgb(62,174,254);
+                        }
                     }
                 }
                 .link{
+                    margin-top: 50px;
                     a{
-                        font-size: 12px;
-                        color: #668fbc;
-                        text-decoration: underline;
+                        color: #2972a9;;
                     }
                 }
+            }            
+        }
+        &-right{
+            width: 45%;
+            background-color: #08101b8c;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .teacher-title{
+                width: 300px;
+                margin-bottom: 35px;
+                font-size: 25px;
+                color: #fff;
+                letter-spacing: 1px;
             }
-            .communyLoging{
-                .description{
-                    text-align: center;
-                    font-size: 12px;
-                    color: #d1d1d3;
-                    margin-bottom: 20px;
-                    letter-spacing: 1.5px;
-                }
-                .links{
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-around;
-                    .icon{
+            .formDiv{
+                width: 800px;
+                display: flex;
+                justify-content: center;
+                .loginBox{
+                    width: 300px;
+                    height: 310px;
+                    .title{
                         display: flex;
                         align-items: center;
-                        flex-direction: column;
-                        cursor: pointer;
-                        img{
-                            width: 35px;
+                        // align-content: center !important;
+                        margin-bottom: 5px;
+                        .logo{
+                            margin-right: 5px;
+                            height: 15px;
                         }
-                        span{
-                            font-size: 12px;
-                            color: #d1d1d3;
+                        .text{
+                            margin-right: 15px;
+                            color: #ffffff;
+                            font-size: 16px;
+                        }
+                        .tooltip{
+                            height: 15px;
                         }
                     }
-                }
-            }
-            .qrloginMode{
-                .qrcodeBox{
-                    width:240px;
-                    height:240px;
-                    margin:auto;
-                    margin-bottom: 10px;
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    .qrcode{
-                        padding:20px;
-                        background-color:white;
+                    .subTitle{
+                        font-size: 12px;
+                        color: #d1d1d3;
+                        margin-bottom: 6px;
+                        font-weight: 100;
+                        padding-left: 2px;
+                        letter-spacing: 1px;
                     }
-                    .expired{
-                        position: absolute;
-                        background-color: #ffffffde;
-                        width: 200px;
-                        height: 200px;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        .ivu-icon{
-                            cursor: pointer;
+                    .loginForm{
+                        margin-bottom: 10px;
+                        .formItem{
+                            margin: 0;
+                        }
+                        .errlable{
+                            text-align: right;
+                            color: #f22613;
+                            font-size: 12px;
+                            margin-top: 3px;
+                            height: 12px;
                         }
                     }
-                }            
-                .links{
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    .icon-a{
+                    .extra{
                         display: flex;
                         align-items: center;
-                        img{
-                            margin-right: 3px;
-                            width: 15px;
-                            height: 15px;
+                        justify-content: space-between;
+                        margin-bottom: 30px;
+                        .qrlogin{
+                            display: flex;
+                            align-items: center;
+                            .logo{
+                                margin-right: 5px;
+                                height: 15px;
+                            }
+                            a{
+                                font-size: 12px;
+                                color: #668fbc;
+                                text-decoration: underline;
+                            }
+                        }
+                        .link{
+                            a{
+                                font-size: 12px;
+                                color: #668fbc;
+                                text-decoration: underline;
+                            }
                         }
                     }
-                    a{
-                        font-size: 12px;
-                        color: #668fbc;
+                    .communyLoging{
+                        .description{
+                            text-align: center;
+                            font-size: 12px;
+                            color: #d1d1d3;
+                            margin-bottom: 20px;
+                            letter-spacing: 1.5px;
+                        }
+                        .links{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-around;
+                            .icon{
+                                display: flex;
+                                align-items: center;
+                                flex-direction: column;
+                                cursor: pointer;
+                                img{
+                                    width: 35px;
+                                }
+                                span{
+                                    font-size: 12px;
+                                    color: #d1d1d3;
+                                }
+                            }
+                        }
+                    }
+                    .qrloginMode{
+                        .qrcodeBox{
+                            width:240px;
+                            height:240px;
+                            margin:auto;
+                            margin-bottom: 10px;
+                            position: relative;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            .qrcode{
+                                padding:20px;
+                                background-color:white;
+                            }
+                            .expired{
+                                position: absolute;
+                                background-color: #ffffffde;
+                                width: 200px;
+                                height: 200px;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                .ivu-icon{
+                                    cursor: pointer;
+                                }
+                            }
+                        }            
+                        .links{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            .icon-a{
+                                display: flex;
+                                align-items: center;
+                                img{
+                                    margin-right: 3px;
+                                    width: 15px;
+                                    height: 15px;
+                                }
+                            }
+                            a{
+                                font-size: 12px;
+                                color: #668fbc;
+                            }
+                        }
                     }
                 }
             }
         }
     }
+ 
 }

TEAMModelOS/ClientApp/src/view/login/page/Teacher.vue

@@ -71,95 +71,118 @@
 
 <template>
   <div class="loginDiv">
-    <div class="schoolName">
-      <div style="width: 100px;height: 100px;background-color: #69b0d0;border-radius: 4px;cursor: pointer;">
-        <img style="    display: block;
-          width: 100%;
-          height: 100%;" src="@/assets/icon/teacherIcon.png">
+    <div class="loginDiv-block loginDiv-block-left">
+      <div class="marketing">
+        <div class="title">
+          歡迎來到醍摩豆 5<br/>
+          新時代智慧教育之旅 就此展開
+        </div>
+        <div class="cont">
+          <div class="cont-title">Hiteach 5 智慧教育系統</div>
+          <p class="cont-text border1" >實際差異化教學，現代化因材施教</p>
+          <p class="cont-text border2" >線上線下，混和式教學系統首選</p>
+          <p class="cont-text border3" >合作學習，素養導向教學的全面應用</p>
+          <p class="cont-text border4" >看見每個學生思考</p>
+        </div>
+        <div class="cont">
+          <div class="cont-title">醍摩豆雲平台 IES 5</div>
+          <p class="cont-text border1" >新架構與新技術，速度升級更有感</p>
+          <p class="cont-text border2" >兼容各式媒體與檔案，雲端資源庫隨取即用</p>
+          <p class="cont-text border3" >題庫組卷、閱卷系統，評量應用更多元</p>
+          <p class="cont-text border4" >柏拉圖學情分析，學生成績精準提升</p>
+        </div>
+        <div class="link">
+          <a target="_block" :href="tmdurl">了解更多關於醍摩豆 5 <Icon size="19" type="ios-arrow-forward" /></a>
+        </div>
       </div>
     </div>
-    <div class="formDiv">
-      <div class="loginBox">
-        <div class="title">
-          <div class="logo">
-            <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
+    <div class="loginDiv-block loginDiv-block-right">
+      <h3 class="teacher-title">
+        教師身分登入
+      </h3>
+      <div class="formDiv">
+        <div class="loginBox">
+          <div class="title">
+            <div class="logo">
+              <img  width="15" height="15" src="@/assets/icon/tmd_account.svg">
+            </div>
+            <h4 class="text">
+              {{ qrloginFlag ? $t('login.title.QRLogin'): $t('login.title.IDLogin') }}
+            </h4>
+            <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
+              <img src="@/assets/icon/icon_info.svg" width="15" height="15">
+              <div slot="content">
+                <p style="font-size: 12px;">{{ $t('login.tooltip.text1') }}</p>
+              </div>
+            </Tooltip>
           </div>
-          <h4 class="text">
-            {{ qrloginFlag ? $t('login.title.QRLogin'): $t('login.title.IDLogin') }}
+          <h4 class="subTitle">
+            {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('login.subTitle.IDLogin')}}
           </h4>
-          <Tooltip class="tooltip" placement="right-end" :transfer="true" max-width="200">
-            <img src="@/assets/icon/icon_info.svg" width="15" height="15">
-            <div slot="content">
-              <p style="font-size: 12px;">{{ $t('login.tooltip.text1') }}</p>
-            </div>
-          </Tooltip>
-        </div>
-        <h4 class="subTitle">
-          {{ qrloginFlag ? $t('login.subTitle.QRLogin') : $t('login.subTitle.IDLogin')}}
-        </h4>
 
-        <div v-show="!qrloginFlag">
-          <Form class="loginForm" ref="loginForm" :model="loginForm" :rules="loginRule" :show-message="false" @keydown.enter.native="loginSubmit('loginForm')">
-            <FormItem class="formItem" prop="id" >
-              <Input element-id = "tmdID" v-model="loginForm.id" :placeholder="$t('login.placeholder.id')"/>
-            </FormItem>
-            <FormItem class="formItem"  prop="pass">
-              <Input element-id = "tmdpw" type="password" v-model="loginForm.pass" :placeholder="$t('login.placeholder.psw')" >
-                <Icon size="24" v-show="!loading && loginFormEnter" @click="loginSubmit('loginForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
-                <div v-show="loading" class="demo-spin-col" slot="suffix">
-                  <Spin>
-                    <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
-                  </Spin>
-                </div>
-              </Input>
-            </FormItem>
-            <div class="errlable">{{ loginErrText }}</div>
-          </Form>
+          <div v-show="!qrloginFlag">
+            <Form class="loginForm" ref="loginForm" :model="loginForm" :rules="loginRule" :show-message="false" @keydown.enter.native="loginSubmit('loginForm')">
+              <FormItem class="formItem" prop="id" >
+                <Input element-id = "tmdID" v-model="loginForm.id" :placeholder="$t('login.placeholder.id')"/>
+              </FormItem>
+              <FormItem class="formItem"  prop="pass">
+                <Input element-id = "tmdpw" type="password" v-model="loginForm.pass" :placeholder="$t('login.placeholder.psw')" >
+                  <Icon size="24" v-show="!loading && loginFormEnter" @click="loginSubmit('loginForm')" type="md-arrow-forward" slot="suffix" class="iconFrame" />
+                  <div v-show="loading" class="demo-spin-col" slot="suffix">
+                    <Spin>
+                      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+                    </Spin>
+                  </div>
+                </Input>
+              </FormItem>
+              <div class="errlable">{{ loginErrText }}</div>
+            </Form>
 
-          <div class="extra">
-            <div class="qrlogin">
-              <div class="logo">
-                <img  width="15" height="15" src="@/assets/icon/icon_qrcode.svg">
+            <div class="extra">
+              <div class="qrlogin">
+                <div class="logo">
+                  <img  width="15" height="15" src="@/assets/icon/icon_qrcode.svg">
+                </div>
+                <a @click="chgLoginType()">{{ $t('login.link.QRLogin') }}</a>
+              </div>
+              <div class="link">
+                <router-link to="/regist">{{ $t('login.link.regist') }}</router-link> | <router-link to="/forgotpw">{{ $t('login.link.forgetPsw') }}</router-link>
               </div>
-              <a @click="chgLoginType()">{{ $t('login.link.QRLogin') }}</a>
-            </div>
-            <div class="link">
-              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link> | <router-link to="/forgotpw">{{ $t('login.link.forgetPsw') }}</router-link>
             </div>
-          </div>
 
-          <div class="communyLoging">
-            <div class="description">{{ $t('login.communy.title')}}</div>
-            <div class="links">
-              <div  class="icon" @click="oauthLogin('facebook')">
-                <img v-if="!(srvAdr == 'China')" src="@/assets/icon/icon_fb.svg">
-                <span>{{ $t('login.communy.fb')}}</span>
-              </div>
-              <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('google')">
-                <img  src="@/assets/icon/icon_google.svg">
-                <span>{{ $t('login.communy.google')}}</span>
-              </div>
-              <div v-if="!(srvAdr == 'Global')" class="icon" @click="oauthLogin('wechat')">
-                <img  src="@/assets/icon/icon_wechat.svg">
-                <span>{{ $t('login.communy.wechat')}}</span>
+            <div class="communyLoging">
+              <div class="description">{{ $t('login.communy.title')}}</div>
+              <div class="links">
+                <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('facebook')">
+                  <img src="@/assets/icon/icon_fb.svg">
+                  <span>{{ $t('login.communy.fb')}}</span>
+                </div>
+                <div v-if="!(srvAdr == 'China')" class="icon" @click="oauthLogin('google')">
+                  <img  src="@/assets/icon/icon_google.svg">
+                  <span>{{ $t('login.communy.google')}}</span>
+                </div>
+                <div v-if="!(srvAdr == 'Global')" class="icon" @click="oauthLogin('wechat')">
+                  <img  src="@/assets/icon/icon_wechat.svg">
+                  <span>{{ $t('login.communy.wechat')}}</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div v-show="qrloginFlag">
-          <div class="qrloginMode">
-            <div class="qrcodeBox">
-              <div id="qrcode" :class="{'qrcode': joinQRcode != undefined}" ref="qrcode"></div>
-              <div class="expired" v-if="joinQRcode != undefined && !sseSurvive">
-                <Icon size="40" type="md-refresh-circle" @click="SEELink()" />
-              </div>
-            </div>              
-            <div class="links">
-              <div class="icon-a">
-                <img src="@/assets/icon/icon_account.svg">
-                <a @click="chgLoginType()">{{ $t('login.link.IDLogin') }}</a>
+          <div v-show="qrloginFlag">
+            <div class="qrloginMode">
+              <div class="qrcodeBox">
+                <div id="qrcode" :class="{'qrcode': joinQRcode != undefined}" ref="qrcode"></div>
+                <div class="expired" v-if="joinQRcode != undefined && !sseSurvive">
+                  <Icon size="40" type="md-refresh-circle" @click="SEELink()" />
+                </div>
+              </div>              
+              <div class="links">
+                <div class="icon-a">
+                  <img src="@/assets/icon/icon_account.svg">
+                  <a @click="chgLoginType()">{{ $t('login.link.IDLogin') }}</a>
+                </div>
+                <router-link to="/regist">{{ $t('login.link.regist') }}</router-link>
               </div>
-              <router-link to="/regist">{{ $t('login.link.regist') }}</router-link>
             </div>
           </div>
         </div>
@@ -249,6 +272,13 @@ export default {
       let flag = false
       if(this.loginForm.id && this.loginForm.pass) flag = true
       return flag
+    },
+    tmdurl: function(){
+      let twUrl = 'https://www.habook.com/zh-tw/news.php?act=view&id=408'
+      let cnUrl = ' https://www.habook.com.cn/news.php?act=view&id=331'
+      let enUrl = 'https://www.habook.com/en/news.php?act=view&id=408'
+      
+      return this.lang === 'zh-tw' ? twUrl : this.lang === 'zh-cn' ? cnUrl : enUrl
     }
   },
   created() {

TEAMModelOS/ClientApp/src/view/login/test.vue

@@ -1,222 +0,0 @@
-<style lang="less" scoped>
-  @import './Index.less';
-</style>
-
-<style lang="less">
-.loginBox{
-  .loginForm{
-    .formItem{
-        input, select{
-            border-radius: 0;
-            font-size: 12px;
-        }
-        .ivu-select-selection{
-          border-radius: 0;
-        }
-    }
-    .schoolAutoComplete{
-      height: 170px;
-      .schoolsBox{
-        border-bottom: 1px solid #e9e9e9;
-        padding: 5px 5px 5px 15px;
-        .area{
-          font-size: 12px;
-          padding: 5px;
-        }
-      }
-    }
-    .ivu-select-dropdown{
-      border-radius: 0;
-    }
-  }
-}
-.identityModal{
-  .ivu-modal{
-    .ivu-modal-content{
-      background-color: #2a292e;
-      padding: 12px;
-      border: 1px solid #ccc;
-      .ivu-modal-header, .ivu-modal-footer{
-        border: 0;
-      }
-      .ivu-modal-footer{
-        padding: 0;
-      }
-      .ivu-modal-header{
-        padding: 5px 16px;
-        p{
-          color: whitesmoke;
-        }
-      }
-      .identity-body{
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        .ivu-btn{
-          background-color: #1cc0f2;
-          color: white;
-          font-weight: bold;
-          border: 0;
-          padding: 0 22px;
-        }
-      }
-    }        
-  }
-}
-.demo-spin-col .ivu-spin-main{
-	background-color: transparent;
-	padding: 0;
-}
-</style>
-
-<template>
-  <div style="display: flex;
-    justify-content: space-evenly;
-    width: 100%;
-    height: 600px;
-    flex-direction: row;
-    align-items: center;">
-      <div style="width: 45%;
-        max-width: 600px;
-        height: 100%;padding: 12px;display: flex;
-    justify-content: center;
-    align-items: center;">
-        <div style="font-size:45px;
-            color: rgb(255, 255, 255);
-            font-weight: bolder;
-            letter-spacing: 2px;
-            word-break: break-all;
-            line-height: 1;
-            margin-bottom: 21px;">
-          Welcome to new IES5
-        </div>
-        <!-- <p style="color: #9e9e9e;font-size: 14px; margin-bottom: 15px;" v-text="'calc() 是一個 CSS function 作用於屬性設定是數值的時候可以進行加減乘除的運算，例如： <length> 長度、<frequency> 頻率、<angle> 角度、<time> 時間、<number> 數字或者是 <integer> 整數這幾個屬性值都可以使用 calc()。'"></p> -->
-        <!-- <img style="max-width: 400px;" src="https://dozen168.com/wp-content/uploads/2019/06/%E6%B7%A1%E6%B0%B4%E6%99%AF%E9%BB%9E%E6%B7%A1%E6%B0%B4%E9%A2%A8%E6%99%AF%E6%B7%A1%E6%B0%B4%E4%BB%8B%E7%B4%B9%E6%B7%A1%E6%B0%B4%E6%97%85%E9%81%8A%E6%B7%A1%E6%B0%B4%E5%B0%8F%E5%90%83%E6%B7%A1%E6%B0%B4%E7%BE%8E%E9%A3%9F%E6%B7%A1%E6%B0%B4%E6%97%85%E9%81%8A%E6%9B%9C%E8%BC%97%E6%B7%A1%E6%B0%B4%E4%BB%8B%E7%B4%B9%E6%9B%9C%E8%BC%97%E6%B7%A1%E6%B0%B4%E6%99%AF%E9%BB%9E%E4%BB%8B%E7%B4%B9-1168x737.jpg"/> -->
-      </div>
-      <div style="width: 45%;
-              max-width: 600px;
-              height: 100%;
-              display: flex;
-              flex-direction: row;
-              flex-wrap: nowrap;
-              justify-content: space-evenly;
-              align-items: center;">
-            <div style="width: 200px;height: 200px;background-color: #69b0d0;border-radius: 4px;cursor: pointer;" @click="loginTo('teacher')">
-              <img style="display: block;width: 100%;" src="@/assets/icon/teacherIcon.png">
-            </div>
-            <div style="width: 200px;;height: 200px;background-color: #94ca87;border-radius: 4px;cursor: pointer;" @click="loginTo('student')">
-              <img style="display: block;width: 100%;" src="@/assets/icon/studentIcon.png">
-            </div>
-      </div>
-    <!-- 提示視窗 -->
-    <Modal v-model="identityFlag" width="360" :mask-closable="false" :closable="false" class-name="identityModal">
-        <p slot="header">{{ $t('login.modal.title') }}</p>
-        <div class="identity-body">
-            <Button size="large" @click="goWhere('teacher')">{{ $t('login.modal.btn1') }}</Button>
-            <Button size="large" @click="goWhere('student')">{{ $t('login.modal.btn2') }}</Button>
-        </div>
-        <div slot="footer"></div>
-    </Modal>
-  </div>
-</template>
-<script>
-import { User } from '@/service/User'
-
-export default {
-  data() {
-    return {
-      defaultSchool: {
-        name: '',
-        code: ''
-      },
-      userOauth:{
-        code: '',
-        state: ''
-      },
-      identityFlag: false
-    }
-  },
-  created() {
-    // 取得學校設定簡碼
-    this.setDefSchool()
-
-    //TEAMModelID 社群登入資訊
-    this.userOauth.code = this.$route.query.code == undefined ? '' : this.$route.query.code;
-    this.userOauth.state = this.$route.query.state == undefined ? '' : this.$route.query.state;
-
-    // 社群帳號登入
-    if(this.userOauth.code != '' & this.userOauth.state !='' ) {
-      this.putUserCode()
-    } else if(this.userOauth.code != ''){ // 大雲快速登入
-      this.SSOLogin(this.userOauth.code)
-    }
-  },
-  methods: {
-    putUserCode: function(){ //如果第三方登入會啟動的function
-      this.$Spin.show(); //開啟加載畫面
-      let redirect_uri = window.location.origin + '/login'
-      this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res=>{
-        this.$Spin.hide(); //關閉加載畫面
-        this.loginProcess(res, this.defaultSchool.code)
-      })  
-    },
-    SSOLogin: function(code){ // 快速登入
-      this.$Spin.show(); //開啟加載畫面
-      this.$api.SSOLogin(code).then( async res=>{
-        this.$Spin.hide(); // 關閉加載畫面
-          if(!res.error){
-            // 登入大雲開始
-            this.loginProcess(res, this.defaultSchool.code)
-          } else {
-            this.$Message.warning(this.$t('login.sse.error.text1'));
-          }
-
-          this.$router.push({ name: 'login' })
-      })
-    },
-    loginProcess: async function(item, schoolCode){ // 登入用function
-      let result;
-
-      await this.$api.login.loginIES(item, schoolCode).then( res => {
-        result = res
-      })
-      console.log('////',result)
-      //設定權限並登入
-      let identity = localStorage.getItem('identity')
-      User.login(result).then(res => {
-        if(res && identity) {
-          this.saveUserCodes({
-            TEAMModelId: result.id,
-            name:result.name,
-            schoolCode: result.defaultschool
-          })
-          let path = identity == 'student' ? '/studentWeb' : '/home'
-          this.$router.push({ path: path })
-        } else {
-          this.identityFlag = true;
-        }
-      })
-    },
-    saveUserCodes: function (res) {
-  		this.$store.commit('setUserInfo',res)
-	  },
-    setDefSchool: function(){
-      let defschool = sessionStorage.defaultSchool
-      if(defschool){
-        defschool = JSON.parse(decodeURIComponent(defschool), "utf-8")
-        this.defaultSchool.code = defSchool.code
-        this.defaultSchool.name = defSchool.name
-      }      
-    },
-    goWhere: function(identity){
-      localStorage.setItem('identity', identity)
-      let path = identity == 'student' ? '/studentWeb' : '/home'
-      this.$router.push({ path: path })
-    },
-    loginTo: function(identity) {
-      let pathname = identity == 'student' ? 'loginStudent' : 'loginTeacher'
-      this.$router.push({ name: pathname })
-    }
-  }
-}
-</script>