turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Design the register page and set links to it on the login page

This commit is contained in:
Felix Hamme 2018-11-11 13:33:34 +01:00
parent 923fef795c
commit 7091d735c2
3 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/login.js
View File

@ -26,8 +26,8 @@ function Login() {
<h1 className="custom-font">Login</h1> <h1 className="custom-font">Login</h1>
<LoginForm/> <LoginForm/>
<div className="mt-3"> <div className="mt-3">
<a href="#" className="mr-3">Account anlegen</a> <a href="/register" className="mr-3">Account anlegen</a>
<a href="#">Warum ist ein Account nötig?</a> <a href="/register#account-requirement">Warum ist ein Account nötig?</a>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
@ -46,7 +46,7 @@ function LoginForm() {
<Label for="password">Passwort</Label> <Label for="password">Passwort</Label>
<Input type="password" name="password"/> <Input type="password" name="password"/>
</FormGroup> </FormGroup>
<Button color="success" size="lg" className="w-100">Anmelden</Button> <Button color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
</Form> </Form>
); );
} }

71
pages/register.js
View File

@ -1,10 +1,75 @@
import Head from 'next/head' import Head from 'next/head'
import '../static/everypage.css'
import '../static/css/login.css'
import {Footer, TurniereNavigation} from "../js/CommonComponents";
import React from "react";
import {Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label} from "reactstrap";
export default () => ( export default () => (
<div> <div className="main stadium-bg">
<Head> <Head>
<title>Turnie.re - Registrierung</title> <title>Registrieren: turnie.re</title>
</Head> </Head>
<p>Registrierung</p> <TurniereNavigation/>
<div>
<Register/>
<AccountRequirementMarketing/>
</div>
<Footer/>
</div> </div>
) )
function Register() {
return (
<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Account anlegen</h1>
<RegisterForm/>
<div className="mt-3">
<a href="/login" className="mr-3">Ich habe bereits einen Account!</a>
</div>
</CardBody>
</Card>
</Container>
);
}
function RegisterForm() {
return (
<Form>
<FormGroup>
<Label for="username">Benutzername</Label>
<Input name="username"/>
<FormText>Wenn du anderen dein Turnier zeigst, können sie deinen Benutzernamen sehen.</FormText>
</FormGroup>
<FormGroup>
<Label for="email">E-Mail-Adresse</Label>
<Input type="email" name="email"/>
<FormText>Deine E-Mail-Adresse kann nur von dir gesehen werden.</FormText>
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password"/>
<FormText>Dein Passwort muss mindestens 12 Zeichen lang sein. Alle Zeichen sind erlaubt.</FormText>
</FormGroup>
<FormText className="mb-2 mt-4">
Du akzeptierst die <a href="/privacy">Datenschutzbestimmungen</a>, wenn du auf Registrieren klickst.
</FormText>
<Button color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
</Form>
);
}
function AccountRequirementMarketing() {
return (
<Container>
<Card id="account-requirement">
<CardBody>
<h3 className="custom-font">Warum ein Account nötig ist</h3>
<p>Du benötigst deinen Account, damit nur du dein Turnier bearbeiten kannst.</p>
</CardBody>
</Card>
</Container>
);
}

2
static/css/login.css
View File

@ -1,5 +1,5 @@
.stadium-bg { .stadium-bg {
background: url("/static/images/landingpage-background.jpg") no-repeat center; background: url("/static/images/tennis-blurred.jpg") no-repeat center;
background-size: cover; background-size: cover;
min-height: 100vh; min-height: 100vh;
} }