add login and logout

i18n.json

@@ -7,6 +7,7 @@
     "OperationSystem": "Operation System",
     "Home": "Home",
     "BBS": "Community",
+    "DataBase": "DataBase",
     "Download": "Download",
     "CardTitle1": "Enter the Doujin World",
     "CardTitle2": "For all Doujin Believers",

src/App.js

@@ -286,13 +286,13 @@ export default class App extends Component {
 
         <h2>代表作品</h2>
         <div id="apps">
-          <div class="row">
+          <div className="row">
             <a target="_blank" href="ygopro.html"><img alt="ygopro" src={require('../public/ygopro_1.jpg')} /></a>
             <a target="_blank" href="ozns.html"><img alt="OZ大乱斗NS" src={require('../public/ozns_1.jpg')} /></a>
             <a target="_blank" href="eddyviolet.html"><img alt="Eddy紫" src={require('../public/eddyviolet_1.jpg')} /></a>
             <a target="_blank" href="df02.html"><img alt="东方龙隐谈" src={require('../public/df02_1.jpg')} /></a>
           </div>
-          <div class="row">
+          <div className="row">
             <a target="_blank" href="ygopro.html"><img alt="ygopro" src={require('../public/ygopro_2.jpg')} /></a>
             <a target="_blank" href="ozns.html"><img alt="OZ大乱斗NS" src={require('../public/ozns_2.jpg')} /></a>
             <a target="_blank" href="eddyviolet.html"><img alt="Eddy紫" src={require('../public/eddyviolet_2.jpg')} /></a>

src/Nav.js

 import React from 'react'
 import { Menu, Icon } from 'antd'
 import { FormattedMessage } from 'react-intl'
-
+import querystring from 'querystring';
+import crypto from 'crypto';
 export default class Nav_Mobile extends React.Component {
 
   constructor(props) {
     super(props);
+
+    var isLogin = false;
+    var userName = "";
+    var user;
+
+    var token = querystring.parse(location.search.slice(1)).sso;
+    if (token) {
+      localStorage.setItem('token', token);
+      user = querystring.parse(new Buffer(token, 'base64').toString());
+      isLogin = true;
+      userName = user.username;
+    } else {
+      token = localStorage.getItem('token');
+      if (token) {
+        user = querystring.parse(new Buffer(token, 'base64').toString());
+        isLogin = true;
+        userName = user.username;
+      }
+    }
+
     this.state = {
       classMenu: false,
+      isLogin: isLogin,
+      userName: userName
     };
+
+  }
+
+  login() {
+    var payload = new Buffer(querystring.stringify({
+      return_sso_url: location.href
+    })).toString('base64');
+
+    var request = querystring.stringify({
+      'sso': payload,
+      'sig': crypto.createHmac('sha256', 'zsZv6LXHDwwtUAGa').update(payload).digest('hex')
+    });
+    location.href = "https://ygobbs.com/session/sso_provider?" + request;
+  }
+
+  logout() {
+    localStorage.removeItem('token');
+
+    // var redirectUrl = "http://localhost:3001/#";
+    var redirectUrl = "https://mycard.moe/";
+    this.setState({ isLogin: false });
+    var request = querystring.stringify({
+      'redirect': redirectUrl
+    });
+    location.href = "https://ygobbs.com/logout?" + request;
   }
+
   menu = () => {
     this.setState({ classMenu: !this.state.classMenu });
   }
   render() {
+    const {  isLogin } = this.state
     var classMenu = this.state.classMenu;
     if (!this.props.isMobile) {
       return (
@@ -45,31 +95,26 @@ export default class Nav_Mobile extends React.Component {
                 用户中心
               </a>
             </Menu.Item>
-            {/*<Menu.Item key="#">
-              <a href="#">
-                客服中心
-              </a>
-            </Menu.Item>
-            <Menu.Item key="5">
-              <a href="#">
-                最新资讯
-              </a>
-            </Menu.Item>
-            <Menu.Item key="6">
-              <a href="#">
-                创意分享
-              </a>
-            </Menu.Item>
-            <Menu.Item key="7">
-              <a href="#">
-                最新科技
-              </a>
-            </Menu.Item>
-            <Menu.Item key="8">
-              <a href="#">
-                学习天地
-              </a>
-            </Menu.Item>*/}
+
+            {isLogin ?
+              (<Menu.Item key="5" style={{ float: 'right' }}>
+                <a onClick={() => this.logout()} >
+                  退出
+                  </a>
+              </Menu.Item>) : ("")}
+
+            {!isLogin ?
+              (<Menu.Item key="4" style={{ float: 'right' }}>
+                <a onClick={() => this.login()} >
+                  注册 | 登录
+                  </a>
+              </Menu.Item>) :
+              (<Menu.Item key="4" style={{ float: 'right' }}>
+                <a href="#" >
+                  Jc1991
+                  </a>
+              </Menu.Item>)}
+
           </Menu>
         </div>
       );