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

Create a profile page that displays the username and e-mail

This commit is contained in:
Felix Hamme 2019-06-06 14:39:39 +02:00
parent 4d1e9682ae
commit 9ff387cced
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
pages/profile.js Normal file
View File

@ -0,0 +1,54 @@
import Head from 'next/head';
import React from 'react';
import {Container, Table} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/css/everypage.css';
import '../static/css/profile.css';
import {connect} from 'react-redux';
function Main() {
return (<div className="main">
<Container className="pb-5">
<UserData/>
</Container>
</div>);
}
export default class ProfilePage extends React.Component {
render() {
return (<div>
<Head>
<title>Profil: turnie.re</title>
</Head>
<TurniereNavigation/>
<BigImage text="turnie.re-Account"/>
<Main/>
<Footer/>
</div>);
}
}
const UserData = connect(state => {
return {email: state.userinfo.uid, name: state.userinfo.username};
})(UserDataTable);
function UserDataTable(props) {
return (<Table>
<tbody>
<tr>
<th className='w-small'>Name</th>
<td className='w-100'>{props.name}</td>
</tr>
<tr>
<th className='w-small'>E-Mail-Adresse</th>
<td className='mw-100'>{props.email}</td>
</tr>
</tbody>
</Table>);
}

3
static/css/profile.css Normal file
View File

@ -0,0 +1,3 @@
.w-small {
min-width: 10em;
}