) => 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 (
+ <>
+
+
+
+ handleGoogleRedirect()} variant="outlined">
+
+ Kontynuuj przez Google
+
+ LUB
+ onSubmit(e)} noValidate autoComplete="off">
+ onUsernameChange && onUsernameChange(e.target.value)}
+ />
+ onEmailChange(e.target.value)}
+ />
+ onPasswordChange(e.target.value)}
+ />
+
+ }
+ label="Akceptuję warunki korzystania i politykę prywatności FiszQI"
+ />
+
+ {isregister ? `ZAREJESTRUJ` : 'ZALOGUJ SIĘ'}
+
+
+
+ {isregister ? `Masz już konto? Zaloguj się` : `Nie masz konta? Zarejestruj się`}
+
+
+
+
+
+ );
+};
+
+export default Form;
diff --git a/client/src/components/Form/styles.tsx b/client/src/components/Form/styles.tsx
new file mode 100644
index 0000000..82f2134
--- /dev/null
+++ b/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);
diff --git a/client/src/views/App/App.tsx b/client/src/views/App/App.tsx
index 3b9f458..5cde3e0 100644
--- a/client/src/views/App/App.tsx
+++ b/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: FC = () => {
return (
@@ -16,6 +18,8 @@ export const App: FC = () => {
+
+
diff --git a/client/src/views/Login/Login.tsx b/client/src/views/Login/Login.tsx
new file mode 100644
index 0000000..2506e23
--- /dev/null
+++ b/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) => {
+ 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 (
+ <>
+
+
+ );
+};
+
+export default Login;
diff --git a/client/src/views/Register/Register.tsx b/client/src/views/Register/Register.tsx
new file mode 100644
index 0000000..db2fc19
--- /dev/null
+++ b/client/src/views/Register/Register.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import Form from '../../components/Form/Form';
+import axios from 'axios';
+
+const Register = () => {
+ const [username, setUsername] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ const user = {
+ username: username,
+ email: email,
+ password: password
+ };
+
+ axios('/api/register', {
+ method: 'POST',
+ headers: {
+ 'content-type': 'application/json'
+ },
+ data: user
+ })
+ .then((response) => (window.location.href = `/login`))
+ .catch((error) => {
+ throw error;
+ });
+ };
+
+ return (
+ <>
+
+
+ );
+};
+
+export default Register;
diff --git a/server/src/routes/register.ts b/server/src/routes/register.ts
index 0647b8d..e16969d 100644
--- a/server/src/routes/register.ts
+++ b/server/src/routes/register.ts
@@ -23,7 +23,7 @@ router.post('/', async (req: Request, res: Response, next: NextFunction) => {
});
await user.save();
- res.redirect('/api/login');
+ res.send(200);
} catch (error) {
next(error);
}
diff --git a/server/src/server.tsx b/server/src/server.tsx
index 284f89b..a142d0d 100644
--- a/server/src/server.tsx
+++ b/server/src/server.tsx
@@ -13,7 +13,7 @@ import './middleware/passport';
import swaggerDocument from './swaggerWrap';
const app = express();
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 3001;
const env = process.env.NODE_ENV || 'development';
let connection_uri = process.env.MONGODB_DEV_URI || 'mongodb://localhost/playground';