[#72] login register views (#83)

client/package.json

@@ -12,10 +12,12 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
+    "@trejgun/material-ui-icons-google": "0.0.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.20.4",
     "@types/react-dom": "^17.0.1",
     "@types/react-router-dom": "^5.1.7",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -53,5 +55,6 @@
     "react-app-rewired": "^2.1.8",
     "@types/react-router-dom": "^5.1.7",
     "react-router-dom": "^5.2.0"
-  }
+  },
+  "proxy": "http://localhost:3001"
 }

client/src/components/Form/Form.tsx

@@ -0,0 +1,117 @@
+import { Checkbox, FormControlLabel, Icon, Theme } from '@material-ui/core';
+import {
+    StyledButtonGoogle,
+    StyledForm,
+    StyledTextField,
+    StyledLink,
+    StyledButton,
+    orParagraph,
+    StyledFormControlLabel
+} from './styles';
+import React, { FormEvent } from 'react';
+import { css } from '@emotion/react';
+import { Grid } from './styles';
+import { Search } from '@trejgun/material-ui-icons-google';
+import { Container } from '@material-ui/core';
+
+interface FormProps {
+    isregister?: boolean;
+    onUsernameChange?: (e: string) => void;
+    onEmailChange: (e: string) => void;
+    onPasswordChange: (e: string) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+}
+
+const handleGoogleRedirect = () => {
+    const requestOptions = {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+        mode: 'no-cors' as RequestMode
+    };
+
+    fetch(`/api/google`, requestOptions)
+        .then((response) => {
+            window.location.href = `/`;
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+};
+
+const Form = ({ isregister, onUsernameChange, onEmailChange, onPasswordChange, onSubmit }: FormProps) => {
+    return (
+        <>
+            <Container maxWidth="sm">
+                <Grid
+                    container
+                    direction="column"
+                    justify="center"
+                    alignItems="center"
+                    alignContent="center"
+                    spacing={1}
+                    mt={4}
+                >
+                    <Grid item xs={12}>
+                        <StyledButtonGoogle onClick={() => handleGoogleRedirect()} variant="outlined">
+                            <Search
+                                css={css`
+                                    margin-right: 10px;
+                                `}
+                            />
+                            Kontynuuj przez Google
+                        </StyledButtonGoogle>
+                        <p css={orParagraph}>LUB</p>
+                        <StyledForm onSubmit={(e) => onSubmit(e)} noValidate autoComplete="off">
+                            <StyledTextField
+                                isdisplay={isregister?.toString()}
+                                className="test"
+                                size="small"
+                                id="outlined-basic"
+                                variant="outlined"
+                                required
+                                placeholder="Nazwa użytkownika/użytkowniczki *"
+                                autoFocus
+                                onChange={(e) => onUsernameChange && onUsernameChange(e.target.value)}
+                            />
+                            <StyledTextField
+                                size="small"
+                                id="outlined-basic"
+                                variant="outlined"
+                                required
+                                placeholder="Email *"
+                                onChange={(e) => onEmailChange(e.target.value)}
+                            />
+                            <StyledTextField
+                                size="small"
+                                id="outlined-basic"
+                                variant="outlined"
+                                required
+                                placeholder="Hasło *"
+                                onChange={(e) => onPasswordChange(e.target.value)}
+                            />
+                            <StyledFormControlLabel
+                                isdisplay={isregister?.toString()}
+                                control={
+                                    <Checkbox
+                                        style={{
+                                            color: ' #2f2e41'
+                                        }}
+                                    />
+                                }
+                                label="Akceptuję warunki korzystania i politykę prywatności FiszQI"
+                            />
+                            <StyledButton type="submit" variant="contained">
+                                {isregister ? `ZAREJESTRUJ` : 'ZALOGUJ SIĘ'}
+                            </StyledButton>
+                        </StyledForm>
+                        <StyledLink to={isregister ? '/login' : '/register'}>
+                            {isregister ? `Masz już konto? Zaloguj się` : `Nie masz konta? Zarejestruj się`}
+                        </StyledLink>
+                    </Grid>
+                </Grid>
+            </Container>
+        </>
+    );
+};
+
+export default Form;

client/src/components/Form/styles.tsx

@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+import { Button, Checkbox, TextField, Icon, FormControlLabel } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+import MuiGrid from '@material-ui/core/Grid';
+import { spacing } from '@material-ui/system';
+import React from 'react';
+import { css } from '@emotion/react';
+
+interface FormStylesProps {
+    isdisplay?: string;
+}
+
+export const StyledTextField = styled(TextField)`
+    && {
+        width: 90%;
+        margin: 1vh;
+
+        input {
+            font-size: 16px;
+        }
+
+        &.test {
+            display: ${(props: FormStylesProps) =>
+                props.isdisplay && props.isdisplay === 'true' ? 'inline-flex' : 'none'};
+        }
+    }
+`;
+
+export const StyledFormControlLabel = styled(FormControlLabel)`
+    && {
+        ${(props: FormStylesProps) => (props.isdisplay === 'true' ? '' : 'display: none')};
+        width: 80%;
+        text-align: center;
+        padding: 5px;
+    }
+`;
+
+export const StyledForm = styled.form`
+    text-align: center;
+    width: 100%;
+`;
+
+export const StyledButton = styled(Button)`
+    && {
+        width: 90%;
+        margin: 1vh;
+        background-color: #2f2e41;
+        text-transform: uppercase;
+        color: #ffff;
+        padding: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+        font-family: Roboto;
+    }
+`;
+
+export const StyledLink = styled(Link)`
+    && {
+        text-align: right;
+        float: right;
+        margin-right: 10%;
+        margin-top: 10px;
+        color: #1976d2;
+        text-decoration: none;
+    }
+`;
+
+export const StyledCheckbox = styled(Checkbox)`
+    && {
+        margin-left: 5%;
+    }
+`;
+
+export const StyledButtonGoogle = styled(Button)`
+    && {
+        margin-top: 1vh;
+        width: 90%;
+        margin: 1vh;
+        font-size: 16px;
+        text-align: center;
+        margin-left: 5%;
+        padding-top: 10.5px;
+        padding-bottom: 10.5px;
+        text-transform: none;
+    }
+`;
+
+export const orParagraph = css`
+    text-transform: uppercase;
+    margin: 2vh;
+    font-weight: 700;
+    font-weight: 16px;
+    text-align: center;
+`;
+
+export const Grid = styled(MuiGrid)(spacing);

client/src/views/App/App.tsx

@@ -5,8 +5,10 @@ import { Home } from '../../components/Home';
 import { TopNavBar } from '../../components/NavBars/TopNavBar';
 import { BottomNavBar } from '../../components/NavBars/BottomNavBar';
 import NotFound from '../../components/NotFound';
+import Login from '../Login/Login';
+import Register from '../Register/Register';
 
-export const App: FC = () => {
+const App = () => {
     return (
         <div>
             <header>
@@ -16,6 +18,8 @@ export const App: FC = () => {
                     <Switch>
                         <Route exact path="/about" component={About} />
                         <Route exact path="/" component={Home} />
+                        <Route exact path="/register" component={Register} />
+                        <Route exact path="/login" component={Login} />
                         <Route component={NotFound} />
                     </Switch>
 

client/src/views/Login/Login.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import Form from '../../components/Form/Form';
+import axios from 'axios';
+
+const Login = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        const user = {
+            email: email,
+            password: password
+        };
+
+        axios('/api/register', {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json'
+            },
+            data: user
+        })
+            .then((response) => (window.location.href = `/`))
+            .catch((error) => {
+                throw error;
+            });
+    };
+
+    return (
+        <>
+            <Form isregister={false} onEmailChange={setEmail} onPasswordChange={setPassword} onSubmit={handleSubmit} />
+        </>
+    );
+};
+
+export default Login;