Fix login and register form (#183)

* Insert form tag in register and login pages By using this tag, spaces between each inputbase were removed so I decided to use <br />s to make the design cleaner. Also, there were some changes made to the db and to the prettier packages, but I'm not sure if they should be kept or not. * Add Enter feature for registration form and autoComplete types specified for better recognition by personal information storing software * Data removed and added to gitignore * Correct gitignore issue
HackerSchool · May 27, 2022 · c676b3e · c676b3e
1 parent 9acc8bc
commit c676b3e
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 70 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -20,4 +20,4 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -14,4 +14,4 @@
 	"trailingComma": "es5",
 	"useTabs": true,
 	"endOfLine":"auto"
-}
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,12 +22,10 @@
 		"@testing-library/user-event": "^12.8.3",
 		"axios": "^0.21.1",
 		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-react": "^7.29.4",
 		"jquery": "^3.6.0",
 		"md5": "^2.3.0",
 		"notistack": "^2.0.3",
-		"prettier": "^2.6.2",
 		"react": "^17.0.2",
 		"react-countdown": "^2.3.2",
 		"react-dom": "^17.0.2",
@@ -60,6 +58,8 @@
 		]
 	},
 	"devDependencies": {
-		"eslint-plugin-prettier": "^4.0.0"
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"prettier": "2.6.2"
 	}
 }
diff --git a/frontend/src/components/login/LoginInput.js b/frontend/src/components/login/LoginInput.js
@@ -71,28 +71,34 @@ const LoginInput = () => {
 				direction='column'
 				justifyContent='center'
 			>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						margin='dense'
-						variant='outlined'
-						placeholder='Nome de utilizador'
-						onChange={handleChangeUsername}
-						onKeyUp={handleKeyPress}
-					/>
-				</Grid>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						variant='outlined'
-						placeholder='Password'
-						type='password'
-						onChange={handleChangePassword}
-						onKeyUp={handleKeyPress}
-					/>
-				</Grid>
+				<form>
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							margin='dense'
+							variant='outlined'
+							placeholder='Nome de utilizador'
+							autoComplete='username'
+							onChange={handleChangeUsername}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+					<br />
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							variant='outlined'
+							placeholder='Password'
+							type='password'
+							autoComplete='password'
+							onChange={handleChangePassword}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+					<br />
+				</form>
 				<Grid item style={{ marginTop: '4rem' }}>
 					<NormalButton fontSize={45} text='Entrar' onClick={handleClick} />
 				</Grid>

diff --git a/frontend/src/components/register/RegisterInput.js b/frontend/src/components/register/RegisterInput.js
@@ -129,6 +129,12 @@ const RegisterInput = () => {
 		}
 	};
 
+	const handleKeyPress = (e) => {
+		if (e.keyCode === 13) {
+			handleClick();
+		}
+	};
+
 	if (codePhase) return <CodeInput username={username} password={pass1} />;
 
 	return (
@@ -143,45 +149,58 @@ const RegisterInput = () => {
 				<Logo className={classes.logo} />
 			</Grid>
 			<Grid className={classes.containerForm} container spacing={4} direction='column'>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						margin='dense'
-						variant='outlined'
-						placeholder='Nome de utilizador'
-						onChange={handleChangeUsername}
-					/>
-				</Grid>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						variant='outlined'
-						placeholder='E-mail'
-						onChange={handleChangeEmail}
-					/>
-				</Grid>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						variant='outlined'
-						placeholder='Password'
-						type='password'
-						onChange={handleChangePass1}
-					/>
-				</Grid>
-				<Grid item>
-					<InputBase
-						className={classes.input}
-						inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
-						variant='outlined'
-						placeholder='Repete a password'
-						type='password'
-						onChange={handleChangePass2}
-					/>
-				</Grid>
+				<form>
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							margin='dense'
+							variant='outlined'
+							placeholder='Nome de utilizador'
+							autoComplete='username'
+							onChange={handleChangeUsername}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+					<br />
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							variant='outlined'
+							placeholder='E-mail'
+							autoComplete='email'
+							onChange={handleChangeEmail}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+					<br />
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							variant='outlined'
+							placeholder='Password'
+							type='password'
+							autoComplete='password'
+							onChange={handleChangePass1}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+					<br />
+					<Grid item>
+						<InputBase
+							className={classes.input}
+							inputProps={{ style: { margin: '0 1rem 0 1rem', fontSize: 26 } }}
+							variant='outlined'
+							placeholder='Repete a password'
+							type='password'
+							autoComplete='password'
+							onChange={handleChangePass2}
+							onKeyUp={handleKeyPress}
+						/>
+					</Grid>
+				</form>
 				<Grid item style={{ marginTop: '4rem' }}>
 					<NormalButton fontSize={45} text='Registar' onClick={handleClick} />
 				</Grid>