sync

UI/src/components/add-server/index.js

@@ -1,9 +1,39 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import TypingDemo from '../demos/typing'
+import RoleypolyDemo from '../demos/roleypoly'
+import * as Actions from '../../actions'
+import './styles.sass'
+import discordLogo from '../../pages/images/discord-logo.svg'
 
 export default class AddServer extends Component {
+  polling = null
+  
+  componentDidMount () {
+    this.pollingStop = Actions.startServerPolling(this.props.dispatch)
+  }
+
+  componentWillUnmount () {
+    if (this.pollingStop != null) {
+      this.pollingStop()
+    }
+  }
+  
   render () {
-    return <div className="inner">
-      
+    return <div className="inner add-server">
+      <h2>What is Roleypoly?</h2>
+      <p className="add-server__header">
+        Roleypoly is a helper bot to help server members assign themselves roles on Discord.
+      </p>
+      <div className="add-server__grid">
+        <div><TypingDemo /></div>
+        <div className="text">Could you easily remember 250 role names? You'd use images or bot commands to tell everyone what they can assign. This kinda limits how <i>many</i> roles you can reasonably have. And don't even start with emojis. <span alt="" role="img">💢</span></div>
+        <div className="text right">Just click. <span role="img">🌈 💖</span></div>
+        <div className="add-server__darkbg"><RoleypolyDemo /></div>
+      </div>
+      <div className="add-server__header">
+        <a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo" alt=""/> Authorize via Discord</a> 
+      </div>
     </div>
   }
 }

UI/src/components/add-server/styles.sass

@@ -0,0 +1,29 @@
+.add-server
+  text-align: center
+  .paper
+    background-color: hsla(0,0%,100%,0.05)
+    padding: 30px
+
+  .text
+    font-size: 0.9rem
+    text-align: left
+
+    &.right
+      text-align: right
+      font-size: 1.1em
+
+  &__header
+    margin: 45px 0
+
+  &__grid
+    display: grid
+    grid-template-columns: 1fr 1fr
+    grid-template-rows: 1fr 1fr
+    grid-gap: 10px
+    
+    >div
+      align-self: center
+
+  &__darkbg
+    background-color: var(--c-1)
+    padding: 20px

UI/src/components/demos/roleypoly.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import RoleDemo from '../role/demo'
+
+const RoleypolyDemo = () => <div className="demo__roleypoly">
+  <RoleDemo name="a cute role ♡" color="#3EC1BF" />
+  <RoleDemo name="a vanity role ♡" color="#F7335B" />
+  <RoleDemo name="a brave role ♡" color="#A8D0B8" />
+  <RoleDemo name="a proud role ♡" color="#5C8B88" />
+  <RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
+</div>
+
+export default RoleypolyDemo

UI/src/components/demos/typing.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import moment from 'moment'
+import Typist from 'react-typist'
+import './typing.sass'
+
+const Typing = () => <div className="demo__discord rp-discord">
+  <div className="discord__chat">
+    <span className="timestamp">{moment().format('LT')}</span>
+    <span className="username">Kata カタ</span>
+    <span className="text">Hey, I want some roles!</span>
+  </div>
+  <div className="discord__textarea">
+    <Typist cursor={{ blink: true }}>
+      <span>.iam a cute role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a vanity role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a brave role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a proud role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>.iam a wonderful role ♡</span>
+      <Typist.Backspace count={30} delay={1500} />
+      <span>i have too many roles.</span>
+    </Typist>
+  </div>
+</div>
+
+export default Typing

UI/src/components/demos/typing.sass

@@ -0,0 +1,48 @@
+.demo__discord
+  --not-quite-black: #23272A
+  --dark-but-not-black: #2C2F33
+  --greyple: #99AAB5
+  --blurple: var(--c-discord)
+
+  background-color: var(--dark-but-not-black)
+  padding: 10px
+  text-align: left
+  color: var(--c-white)
+
+  .Typist .Cursor 
+    display: inline-block
+    color: transparent
+    border-left: 1px solid var(--c-white)
+    user-select: none
+
+    &--blinking 
+      opacity: 1
+      animation: blink 2s ease-in-out infinite
+
+      @keyframes blink 
+        0%
+          opacity: 1
+        50%
+          opacity: 0
+        100%
+          opacity: 1
+
+  .discord
+    &__chat
+      padding: 10px 0
+
+      span
+        display: inline-block
+        margin-left: 5px
+
+      .timestamp
+        font-size: 0.7em
+        color: hsla(0,0%,100%,.2)
+
+      .username
+        font-weight: bold
+
+    &__textarea
+      background-color: hsla(218,5%,47%,.3)
+      border-radius: 5px
+      padding: 10px

UI/src/components/oauth-bot-flow/index.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Redirect } from 'react-router-dom'
+import superagent from 'superagent'
+import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
+import { fetchServers } from '../../actions'
+
+@connect()
+class OauthCallback extends Component {
+  state = {
+    notReady: true,
+    message: 'chotto matte kudasai...',
+    url: null
+  }
+
+  async componentDidMount () {
+    const { body: { url } } = await superagent.get('/api/oauth/bot?url=✔️')
+    this.setState({ url, notReady: false })
+    window.location.href = url
+  }
+
+  render () {
+    return (this.state.notReady) ? this.state.message : <a style={{zIndex: 10000}} href={this.state.url}>Something oopsed, click me to get to where you meant.</a>
+  }
+}
+
+export default OauthCallback

UI/src/components/oauth-flow/index.js

@@ -12,7 +12,7 @@ class OauthCallback extends Component {
   }
 
   async componentDidMount () {
-    const { body: { url } } = await superagent.get('/api/auth/redirect')
+    const { body: { url } } = await superagent.get('/api/auth/redirect?url=✔️')
     try {
       const rsp = await superagent.get('/api/auth/user')
       this.props.dispatch({

UI/src/components/role-editor/index.js

@@ -113,7 +113,7 @@ class RoleEditor extends Component {
 
   render () {
     const { server } = this.props
-    if (server.getIn(['server', 'perms', 'canManageRoles']) !== true) {
+    if (server.getIn(['perms', 'canManageRoles']) !== true) {
       return <Redirect to={`/s/${server.get('id')}`} />
     }
 

UI/src/components/wrapper/index.js

@@ -3,11 +3,12 @@ import { Link } from 'react-router-dom'
 import Scrollbars from 'react-custom-scrollbars'
 import Logotype from '../logotype'
 import './wrapper.sass'
+import discordLogo from '../../pages/images/discord-logo.svg'
 
 class Wrapper extends Component {
   render () {
     return <div className='wrapper'>
-      <Scrollbars autoHeight autoHeightMax='100vh'>
+      <Scrollbars autoHeight autoHeightMax='calc(100vh + 2px)'>
         <div className='wrapper__background' />
         <div className='wrapper__container'>
           <nav uk-navbar='' className='uk-navbar-transparent wrapper__nav'>
@@ -18,7 +19,9 @@ class Wrapper extends Component {
             </div>
             <div className='uk-navbar-right'>
               <ul className='uk-navbar-nav'>
-                <li><Link to='/start'>Get Started</Link></li>
+                <li><div className='wrapper__nav__button'>
+                  <a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord-alt"><img src={discordLogo} className="rp-button-logo" alt=""/> Add Roleypoly</a>
+                </div></li>
                 <li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li>
               </ul>
             </div>

UI/src/components/wrapper/wrapper.sass

@@ -21,4 +21,15 @@
     padding: 0 20px
     z-index: 1000
 
+    &__button 
+      box-sizing: border-box
+      height: 82px
+      display: flex
+      align-items: center
+      justify-content: center
+      
+      &>.rp-button
+        padding-left: 15px
+        padding-right: 15px
+