thread page in progress

client/app/components/content-container/content-container.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import './content-container.scss';
 
-interface Props {}
+interface Props {
+  className?: string;
+}
 
 interface State {}
 
@@ -13,7 +15,7 @@ export class ContentContainer extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className="content-container">
+      <div className={`content-container ${this.props.className}`}>
         <div className="border-container">
           <div className="border border__left"/>
           <div className="border border__right"/>

client/app/components/footer/footer.tsx

@@ -9,9 +9,6 @@ interface Props {}
 interface State {}
 
 export class Footer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
 
   render() {
     return (
@@ -20,5 +17,4 @@ export class Footer extends React.Component<Props, State> {
       </div>
     );
   }
-
 }

client/app/components/header/header.tsx

@@ -10,9 +10,6 @@ interface Props {}
 interface State {}
 
 export class Header extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
 
   render() {
     return (

client/app/components/index.ts

@@ -1,3 +1,4 @@
+export * from './content-container/content-container';
 export * from './footer/footer';
 export * from './header/header';
-export * from './content-container/content-container';
+export * from './login-button/login-button';

client/app/components/login-button/login-button.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+}
+
+interface State {}
+
+// TODO: add prod url
+const oauthUrl: string =
+  process.env.NODE_ENV === 'production'
+    ? ''
+    : 'https://us.battle.net/oauth/authorize?redirect_uri=https://localhost/oauth&scope=wow.profile&client_id=2pfsnmd57svcpr5c93k7zb5zrug29xvp&response_type=code';
+
+export class LoginButton extends React.Component<Props, State> {
+  login() {
+    window.open(oauthUrl, '_blank', 'resizeable=yes, height=900, width=1200');
+  }
+
+  render() {
+    console.log(process.env);
+
+    return (
+      <div {...this.props}>
+        <img src={require('../../assets/login-bot-left.gif')} />
+        <img src={require('../../assets/login-bot-login.gif')} style={{ cursor: 'pointer' }} onClick={this.login.bind(this)} />
+        <img src={require('../../assets/login-bot-right.gif')} />
+      </div>
+    );
+  }
+}