aboutsummaryrefslogtreecommitdiff
path: root/src/pages/Profile/Registration/Registration.js
blob: b2d55031f18c4558326b2dc9d7a2e7d28ba0f395 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, {useState} from 'react';

import {
  TextField,
  Button,
  Checkbox,
  FormControlLabel,
  Grid,
} from '@material-ui/core';

import { ContentSection } from 'react-benzin';
import { get, post } from '../../../requests';


const Registration = ({ setUser }) => {

  const [username, setUsername] = useState('');
  const [isRememberMe, setIsRememberMe] = useState(false);

  const handleChange = (event) => {
    setUsername(event.target.value);
  };

  const handleCheck = (event) => {
    setIsRememberMe(event.target.checked);
  };

  const handleSubmit = () => {
    if (username !== '') {
      post('users/', { username })
        .then(response => {
          const user = response.data;
          setUser(user);
          if (isRememberMe) {
            localStorage.setItem('userId', user.id);
          }
        })
        .catch(err => {
          get('users/').then(response => {
            const user = response.data.filter(user => user.username === username)[0];
            setUser(user);
            if (isRememberMe) {
              localStorage.setItem('userId', user.id);
            }
          });
        });
    }
  };

  return (
    <ContentSection sectionName="Tell us who you are">
      <p> Choose yourself a username to track your progress and compete with others: </p>
      <Grid container direction="column">
        <Grid item>
          <TextField
            variant="outlined"
            color="secondary"
            label="Username"
            value={username}
            onChange={handleChange}
          />
        </Grid>
        <Grid item>
          <FormControlLabel
            control={<Checkbox color="secondary" onChange={handleCheck} />}
            label="Remember me"
          />
        </Grid>
        <Grid item>
          <Button variant="contained" color="secondary" onClick={handleSubmit}>
            Submit!
          </Button>
        </Grid>
      </Grid>
    </ContentSection>
  );
};


export default Registration;