UI: add auth flow and related errors

ui/pages/auth/expired.js

@@ -0,0 +1,3 @@
+import ErrorPage from '../_error'
+
+export default (props) => <ErrorPage {...props} statusCode={1001} />

ui/pages/auth/login.js

@@ -0,0 +1,125 @@
+// @flow
+import * as React from 'react'
+import styled from 'styled-components'
+import MediaQuery from '../../kit/media'
+import DiscordButton from '../../components/discord-button'
+import RPC from '../../config/rpc'
+import redirect from '../../lib/redirect'
+
+type AuthLoginState = {
+  humanCode: string,
+  waiting: boolean
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 3em;
+  ${() => MediaQuery({
+    md: `
+      padding-top: 0;
+      align-items: center;
+      min-height: 80vh;
+    `
+  })}
+`
+
+const Line = styled.div`
+  height: 1px;
+  background-color: var(--c-9);
+  margin: 1em 0.3em;
+`
+
+const SecretCode = styled.input`
+  background-color: transparent;
+  border: 0;
+  padding: 1em;
+  color: var(--c-9);
+  margin: 0.5rem 0;
+  width: 100%;
+  font-size: 0.9em;
+  appearance: none;
+  transition: all 0.3s ease-in-out;
+
+  &:focus, &:active, &:hover {
+    background-color: var(--c-3);
+  }
+
+  &:focus, &:active {
+    & ::placeholder {
+      color: transparent;
+    }
+  }
+
+  & ::placeholder {
+    transition: all 0.3s ease-in-out;
+    color: var(--c-7);
+    text-align: center;
+  }
+`
+
+const HiderButton = styled.button`
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  background-color: var(--c-3);
+  color: var(--c-white);
+  border: none;
+  padding: 1em;
+  font-size: 0.9em;
+  transition: all 0.3s ease-in-out;
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0;
+    pointer-events: none;
+  }
+`
+
+export default class AuthLogin extends React.Component<{}, AuthLoginState> {
+  state = {
+    humanCode: '',
+    waiting: false
+  }
+
+  static async getInitialProps (ctx, rpc) {
+    if (ctx.user != null) {
+      redirect(ctx, '/')
+    }
+  }
+
+  onChange = (event: any) => {
+    this.setState({ humanCode: event.target.value })
+  }
+
+  onSubmit = async () => {
+    this.setState({ waiting: true })
+    try {
+      const result = await RPC.checkAuthChallenge(this.state.humanCode)
+      if (result === true) {
+        redirect(null, '/')
+      }
+    } finally {
+      this.setState({ waiting: false })
+    }
+  }
+
+  render () {
+    return <Wrapper>
+      <div>
+        <DiscordButton href='/api/auth/redirect'>Sign in with Discord</DiscordButton>
+        <Line />
+        <div>
+          <i>Or, send a DM to <b>roleypoly</b>#3712 saying: login</i>
+        </div>
+        <div>
+          <SecretCode placeholder='click to enter super secret code' onChange={this.onChange} value={this.state.humanCode} />
+          <HiderButton onClick={this.onSubmit} disabled={this.state.humanCode === ''}>{
+            (this.state.waiting) ? 'One sec...' : 'Submit Code →'
+          }</HiderButton>
+        </div>
+      </div>
+    </Wrapper>
+  }
+}