From 228ba4f64d7664364f810f1f62b37787adac23e4 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Fri, 19 Mar 2021 16:39:02 +0100
Subject: [PATCH] Sample login form
---
src/App.tsx | 17 +-------
src/components/TestForm/index.tsx | 67 +++++++++++++++++++++++++++++++
2 files changed, 69 insertions(+), 15 deletions(-)
create mode 100644 src/components/TestForm/index.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 94ec6af..48c99ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,10 @@
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Form } from './components/TestForm/index';
export const App: React.FC = () => (
<div className="App">
<header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
-
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
+ <Form />
</header>
</div>
);
diff --git a/src/components/TestForm/index.tsx b/src/components/TestForm/index.tsx
new file mode 100644
index 0000000..dc6abb2
--- /dev/null
+++ b/src/components/TestForm/index.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(0),
+ },
+ },
+ form: {
+ width: '100%', // Fix IE 11 issue.
+ marginTop: theme.spacing(1),
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2),
+ },
+ }),
+);
+
+export const Form: React.FC = () => {
+ const classes = useStyles();
+
+ return (
+ <form className={classes.form} noValidate>
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="email"
+ label="Email Address"
+ name="email"
+ autoComplete="email"
+ autoFocus
+ />
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ name="password"
+ label="Password"
+ type="password"
+ id="password"
+ autoComplete="current-password"
+ />
+ <FormControlLabel
+ control={<Checkbox value="remember" color="primary" />}
+ label="Remember me"
+ />
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ className={classes.submit}
+ >
+ Sign In
+ </Button>
+ </form>
+ );
+};
--
GitLab