Add Sign up form.

frontend/pages/auth.js

@@ -2,10 +2,34 @@ import React from 'react'
 import { Button, Container, Form, Grid, Header, Icon, Segment, Tab } from 'semantic-ui-react'
 import TitleBar from '../components/TitleBar'
 
+function ExternalProviders() {
+  return <>
+    <Header as='h3' textAlign='center'>Or with</Header>
+    <Grid columns={3} divied>
+      <Grid.Row>
+        <Grid.Column>
+          <Button color='twitter'>
+            <Icon name='twitter'/> Twitter
+          </Button>
+        </Grid.Column>
+        <Grid.Column>
+          <Button color='github'>
+            <Icon name='github'/> GitHub
+          </Button>
+        </Grid.Column>
+        <Grid.Column>
+          <Button color='blue'>
+            <Icon name='google'/> Google
+          </Button>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  </>
+}
 
 const panes = [
   {
-    menuItem: 'login',
+    menuItem: 'Login',
     render: () => {
       return <>
         <Header as='h2' color='teal' textAlign='center'>Login</Header>
@@ -26,30 +50,42 @@ const panes = [
             <Button color='green' fluid size='large'>Login</Button>
           </Segment>
         </Form>
-        <Header as='h3' textAlign='center'>Or with</Header>
-        <Grid columns={3} divied>
-          <Grid.Row>
-            <Grid.Column>
-              <Button color='twitter'>
-                <Icon name='twitter'/> Twitter
-              </Button>
-            </Grid.Column>
-             <Grid.Column>
-              <Button color='github'>
-                <Icon name='github'/> GitHub
-              </Button>
-            </Grid.Column>
-            <Grid.Column>
-              <Button color='blue'>
-                <Icon name='google'/> Google
-              </Button>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
+        <ExternalProviders />
+      </>
+    },
+  },
+  {
+    menuItem: 'Sign up',
+    render: () => {
+      return <>
+        <Header as='h2' color='teal' textAlign='center'>Create new account</Header>
+        <Form size="large">
+          <Segment stacked>
+            <Form.Input fluid
+                        icon='user'
+                        iconPosition='left'
+                        placeholder='username'
+                        style={{ marginBottom: 20 }}/>
+          </Segment>
+          <Segment stacked>
+            <Form.Input fluid
+                        icon='mail'
+                        iconPosition='left'
+                        placeholder='email'
+                        style={{ marginBottom: 20 }}/>
+            <Form.Input fluid
+                        icon='lock'
+                        iconPosition='left'
+                        placeholder='Password'
+                        type='password'
+                        style={{ marginBottom: 20 }}/>
+            <Button color='green' fluid size='large'>Sign up</Button>
+          </Segment>
+        <ExternalProviders />
+        </Form>
       </>
     },
   },
-  { menuItem: 'sign up', render: () => <Tab.Pane>sign up exists here</Tab.Pane> },
 ]