From 2de7a09759ced6666150d9b61b895d7ad9da488f Mon Sep 17 00:00:00 2001
From: harry <harry@fangmingyi.com>
Date: Wed, 18 Mar 2020 16:57:57 +0800
Subject: [PATCH] dialogbox

---
 public/react/src/components/dialog/index.jsx  |  13 +
 public/react/src/components/dialog/index.less |  21 ++
 public/react/src/modules/login/LoginDialog.js | 276 ++++++++----------
 public/react/src/modules/tpm/TPMIndexHOC.js   |   2 +-
 4 files changed, 161 insertions(+), 151 deletions(-)
 create mode 100644 public/react/src/components/dialog/index.jsx
 create mode 100644 public/react/src/components/dialog/index.less

diff --git a/public/react/src/components/dialog/index.jsx b/public/react/src/components/dialog/index.jsx
new file mode 100644
index 000000000..ba8ff6d15
--- /dev/null
+++ b/public/react/src/components/dialog/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import './index.less'
+
+export default ({ children, style = {} }) => {
+
+  return (
+    <div className="dialog-container-wrapper">
+      <div className="dialog-body" style={style}>
+        {children}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/public/react/src/components/dialog/index.less b/public/react/src/components/dialog/index.less
new file mode 100644
index 000000000..2bccf6aa7
--- /dev/null
+++ b/public/react/src/components/dialog/index.less
@@ -0,0 +1,21 @@
+.dialog-container-wrapper {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  z-index: 300;
+  background: rgba(0, 0, 0, .7);
+
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-body {
+  width: 405px;
+  height: auto;
+  background: #fff;
+  position: relative;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/login/LoginDialog.js b/public/react/src/modules/login/LoginDialog.js
index 9821f0483..2308fe20c 100644
--- a/public/react/src/modules/login/LoginDialog.js
+++ b/public/react/src/modules/login/LoginDialog.js
@@ -1,10 +1,11 @@
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { notification } from 'antd';
 
 import axios from 'axios';
 import './LoginDialog.css';
 import { Modal } from 'antd'
+import Dialog from '../../components/dialog'
 import { broadcastChannelPostMessage } from 'educoder'
 import Notcompletedysl from "../user/Notcompletedysl";
 
@@ -457,9 +458,7 @@ class LoginDialog extends Component {
     this.setState({
       qqlogin: true
     })
-    //window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2f${window.location.host}%2otherloginqq&response_type=code`
     window.location.href = `https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
-    // window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginstart&tp=qq&response_type=code`
   }
 
   openphoneqqlogin = () => {
@@ -485,172 +484,149 @@ class LoginDialog extends Component {
       isRender = false
     }
     return (
-      <Modal visible={isRender} id="DialogID"
-        className="zindextest"
-        onCancel={() => this.handleDialogClose()}
-        footer={null}
-      >
-        <Notcompletedysl
-          modalsType={this.state.MyEduCoderModals}
-          setNotcompleteds={() => { this.setNotcompleteds() }}
-        />
-
-        <style>
-          {
-            `
-						  #DialogID .dialogBox {
-									width: 405px !important;
-							}
-							.dialogBox {
-									height: 290px !important;
-							}
-						`
-          }
-        </style>
-        {isRender === true ?
-          <div className={dialogBox}>
-            <div id="closeIcon" className={"logincloseIcon"} onClick={() => { this.handleDialogClose() }}>
-              <i className="iconfont icon-shanchudiao"></i>
-            </div>
-
-            <div id="log_reg_content" >
-              {weixinlogin === true ? "" : <ul className="log_nav clearfix">
-                <li className={login == 0 ? 'active' : ''} onClick={() => { this.enter(0) }}>登录</li>
-              </ul>}
-
-
-              <div className="login-panel" id="login-panel-1" style={{ display: login == 0 ? 'block' : 'none' }}>
-                {weixinlogin === true ? "" : <form acceptCharset="UTF-8" action="/login" id="main_login_form" method="post">
-
-                  <div style={{ "display": "inline", "padding": "0", "margin": "0" }}>
-                    <input name="utf8" type="hidden" value="✓"></input>
-                    <input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>
-                  </div>
-
-                  <input name="back_url" type="hidden" value={this.back_url}></input>
-                  <input
-                    type="text"
-                    className="input-100-45 mt20"
-                    id="name_loggin_input"
-                    ref="loginPassText"
-                    onInput={this.loginChange}
-                    onBlur={(e) => this.inputOnBlur(e, 1)}
-                    onPressEnter={disabled === false ?
-                      this.loginEDU : () => {
-                      }
-                      // console.log(1)
-                    }
-                    value={this.state.loginValue}
-                    name="username"
-                    placeholder="请输入有效的手机号/邮箱号" ></input>
-
-                  <div style={{ height: '25px' }}><p className="color-orange edu-txt-left none" id="username_error_notice"
-                    style={{ display: Phonenumberisnotco === undefined ? 'none' : 'block' }}>{Phonenumberisnotco}</p></div>
-
-                  <div>
-                    <input type="password" id="password_loggin_input"
-                      name="password"
-                      ref="passwordText"
-                      onInput={this.passwordChange}
-                      onKeyDown={this.onKeydowns}
-                      className="input-100-45 mt5"
+      <Fragment>
+        {
+          isRender ? <Dialog>
+
+            < Notcompletedysl
+              modalsType={this.state.MyEduCoderModals}
+              setNotcompleteds={() => { this.setNotcompleteds() }
+              }
+            />
+            < div className={dialogBox} >
+
+              <div id="closeIcon" className={"logincloseIcon"} onClick={() => { this.handleDialogClose() }}>
+                <i className="iconfont icon-shanchudiao"></i>
+              </div>
+
+              <div id="log_reg_content" >
+                {weixinlogin === true ? "" : <ul className="log_nav clearfix">
+                  <li className={login == 0 ? 'active' : ''} onClick={() => { this.enter(0) }}>登录</li>
+                </ul>}
+
+
+                <div className="login-panel" id="login-panel-1" style={{ display: login == 0 ? 'block' : 'none' }}>
+                  {weixinlogin === true ? "" : <form acceptCharset="UTF-8" action="/login" id="main_login_form" method="post">
+
+                    <div style={{ "display": "inline", "padding": "0", "margin": "0" }}>
+                      <input name="utf8" type="hidden" value="✓"></input>
+                      <input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>
+                    </div>
+
+                    <input name="back_url" type="hidden" value={this.back_url}></input>
+                    <input
+                      type="text"
+                      className="input-100-45 mt20"
+                      id="name_loggin_input"
+                      ref="loginPassText"
+                      onInput={this.loginChange}
+                      onBlur={(e) => this.inputOnBlur(e, 1)}
                       onPressEnter={disabled === false ?
-                        this.loginEDU : () => {
-                        }
-                        // console.log(1)
+                        this.loginEDU : () => { }
                       }
-                      placeholder="密码" >
-                    </input>
-                    <div style={{ height: '25px' }}>
-                      <p className="color-orange edu-txt-left none" id="password_error_notice">
-                        请输入密码
+                      value={this.state.loginValue}
+                      name="username"
+                      placeholder="请输入有效的手机号/邮箱号" ></input>
+
+                    <div style={{ height: '25px' }}><p className="color-orange edu-txt-left none" id="username_error_notice"
+                      style={{ display: Phonenumberisnotco === undefined ? 'none' : 'block' }}>{Phonenumberisnotco}</p></div>
+
+                    <div>
+                      <input type="password" id="password_loggin_input"
+                        name="password"
+                        ref="passwordText"
+                        onInput={this.passwordChange}
+                        onKeyDown={this.onKeydowns}
+                        className="input-100-45 mt5"
+                        onPressEnter={disabled === false ?
+                          this.loginEDU : () => {
+                          }
+                          // console.log(1)
+                        }
+                        placeholder="密码" >
+                      </input>
+                      <div style={{ height: '25px' }}>
+                        <p className="color-orange edu-txt-left none" id="password_error_notice">
+                          请输入密码
                               </p>
+                      </div>
                     </div>
-                  </div>
-
-
-                  {/*<button className={bottonclass} id="psd_login_btn"  onClick={this.loginEDU} disabled={disabled}>*/}
-
-                  {/*</button>*/}
-
-                  <div className={disabled === false ? "bluebutton  edu-back-blue" : "bluebutton"}
-                    onClick={disabled === false ?
-                      this.loginEDU : () => { }
-                      // console.log(1)
-                    }
-                  >
-                    登录
-                            </div>
-
-                  <p className="clearfix mt20">
-
-                    <span className="fl">
-                      <input type="checkbox"
-                        className="mr5 magic-checkbox"
-                        checked={isGoing}
-                        onChange={this.handleInputChange}
-                        value={isGoingValue}
-                        name="isGoing"
-                        id="p_autolog"></input>
-                      <label htmlFor="p_autolog" style={{ top: '0px' }}>下次自动登录</label>
-                    </span>
-
-                    <span className="fr">
-                      <a onClick={(url) => this.getloginurl("/changepassword")}
-                        className="mr3 color-grey-9">找回密码</a><em className="vertical-line"></em>
-                      <a onClick={(url) => this.getloginurl("/register")} className="color-grey-9">注册</a>
-                    </span>
-
-                  </p>
-
-                  {this.props.user && this.props.user.main_site === true ? this.state.isphone === true ? <p className="clearfix mt20">
-
-                    <span className={"startlogin"}>————————  快速登录  ————————</span>
-                    <div className={"mt10"}>
-                      <a onClick={() => this.openweixinlogin()}>
-                        <img src={require('./WeChat.png')} alt="微信登录" />
-                      </a>
-                      <a onClick={() => this.openqqlogin()} className={"ml10"}>
-                        <img src={require('./qq.png')} alt="qq登录" />
-                      </a>
-                    </div>
-                  </p> : <p className="clearfix mt20">
+
+                    <div className={disabled === false ? "bluebutton  edu-back-blue" : "bluebutton"}
+                      onClick={disabled === false ?
+                        this.loginEDU : () => { }
+                      }
+                    > 登录 </div>
+
+                    <p className="clearfix mt20">
+
+                      <span className="fl">
+                        <input type="checkbox"
+                          className="mr5 magic-checkbox"
+                          checked={isGoing}
+                          onChange={this.handleInputChange}
+                          value={isGoingValue}
+                          name="isGoing"
+                          id="p_autolog"></input>
+                        <label htmlFor="p_autolog" style={{ top: '0px' }}>下次自动登录</label>
+                      </span>
+
+                      <span className="fr">
+                        <a onClick={(url) => this.getloginurl("/changepassword")}
+                          className="mr3 color-grey-9">找回密码</a><em className="vertical-line"></em>
+                        <a onClick={(url) => this.getloginurl("/register")} className="color-grey-9">注册</a>
+                      </span>
+
+                    </p>
+
+                    {this.props.user && this.props.user.main_site === true ? this.state.isphone === true ? <p className="clearfix mt20">
 
                       <span className={"startlogin"}>————————  快速登录  ————————</span>
                       <div className={"mt10"}>
-                        {/*<a onClick={()=>this.openweixinlogin()}>*/}
-                        {/*<img src={require('./WeChat.png')}  alt="微信登录"/>*/}
-                        {/*</a>*/}
-                        <a onClick={() => this.openphoneqqlogin()} className={"ml10"}>
+                        <a onClick={() => this.openweixinlogin()}>
+                          <img src={require('./WeChat.png')} alt="微信登录" />
+                        </a>
+                        <a onClick={() => this.openqqlogin()} className={"ml10"}>
                           <img src={require('./qq.png')} alt="qq登录" />
                         </a>
                       </div>
-                    </p> : ""}
+                    </p> : <p className="clearfix mt20">
 
+                        <span className={"startlogin"}>————————  快速登录  ————————</span>
+                        <div className={"mt10"}>
+                          <a onClick={() => this.openphoneqqlogin()} className={"ml10"}>
+                            <img src={require('./qq.png')} alt="qq登录" />
+                          </a>
+                        </div>
+                      </p> : ""}
 
 
-                </form>}
-                {weixinlogin === true ? <iframe
-                  className={"weixinheight390"}
-                  frameBorder="0"
-                  sandbox="allow-scripts allow-same-origin allow-top-navigation"
-                  scrolling="no"
-                  src={`https://open.weixin.qq.com/connect/qrconnect?appid=wx6b119e2d829c13fa&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginstart&response_type=code&scope=snsapi_login&state=null,${window.location.host}#wechat_redirect`}></iframe> : ""}
 
+                  </form>}
+                  {weixinlogin === true ? <iframe
+                    className={"weixinheight390"}
+                    frameBorder="0"
+                    sandbox="allow-scripts allow-same-origin allow-top-navigation"
+                    scrolling="no"
+                    src={`https://open.weixin.qq.com/connect/qrconnect?appid=wx6b119e2d829c13fa&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginstart&response_type=code&scope=snsapi_login&state=null,${window.location.host}#wechat_redirect`}></iframe> : ""}
 
-                {weixinlogin === true ? <p className="clearfix ">
-                  <a className={"startlogin color-blue"} onClick={() => this.hideweixinlogin()}>返回账号登录</a>
-                </p> : ""}
-              </div>
 
-              {/*快捷登录*/}
+                  {weixinlogin === true ? <p className="clearfix ">
+                    <a className={"startlogin color-blue"} onClick={() => this.hideweixinlogin()}>返回账号登录</a>
+                  </p> : ""}
+                </div>
+
+                {/*快捷登录*/}
+
 
 
+              </div>
+
+            </div >
+          </Dialog > : null
+        }
+      </Fragment>
 
-            </div>
-          </div>
-          : ""}
-      </Modal>
 
     );
   }
diff --git a/public/react/src/modules/tpm/TPMIndexHOC.js b/public/react/src/modules/tpm/TPMIndexHOC.js
index 6eb1aaeab..83cc28fed 100644
--- a/public/react/src/modules/tpm/TPMIndexHOC.js
+++ b/public/react/src/modules/tpm/TPMIndexHOC.js
@@ -49,7 +49,7 @@ export default function TPMIndexHOC(WrappedComponent) {
 				Footerdown: undefined,
 				coursedata: {},
 
-				isRender: true,
+				isRender: false,
 				AccountProfiletype: false,
 				AccountPhoneemailtype: false,
 				globalLoading: false,