Skip to content

Commit

Permalink
Some layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpogr
mpogr committed Sep 3, 2024
1 parent 7582de7 commit b294f08
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 143 deletions.
53 changes: 30 additions & 23 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "1.0.0",
"description": "Frontend for NotesApp",
"main": "index.js",
"homepage": "http://10.5.130.1:8088/",
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
Expand Down
86 changes: 42 additions & 44 deletions frontend/src/components/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,50 +58,48 @@ function Login() {
<div>
<h1>Login to Your Notes</h1>
<Grid container alignItems="center" justifyContent="center">
<Grid container alignItems="center" justifyContent="center" direction="column">
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-username">Username</InputLabel>
<OutlinedInput
id="outlined-adornment-username"
type="text"
label="Username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</FormControl>
<Button sx={{ m: 1, width: '15ch' }} variant="contained"
onClick={handleLogin}
disabled={!username || !password}
>
Login
</Button>
</Grid>
<Grid container alignItems="center" justifyContent="center" direction="column">
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
<Button sx={{ m: 1, width: '15ch' }} variant="outlined" color="primary" onClick={handleRegister}>Register</Button>
</Grid>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-username">Username</InputLabel>
<OutlinedInput
id="outlined-adornment-username"
type="text"
label="Username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
</Grid>
<Grid container alignItems="center" spacing={12} justifyContent="center">
<Button sx={{ m: 1, width: '15ch' }} variant="contained"
onClick={handleLogin}
disabled={!username || !password}
>
Login
</Button>
<Button sx={{ m: 1, width: '15ch' }} variant="outlined" color="primary" onClick={handleRegister}>Register</Button>
</Grid>
{error && <div style={{ color: 'red' }}>{error}</div>}
</div>
Expand Down
150 changes: 75 additions & 75 deletions frontend/src/components/Register.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,81 +69,81 @@ function Register() {
<div>
<h1>Register to Your Notes</h1>
<Grid container alignItems="center" justifyContent="center">
<Grid container alignItems="center" justifyContent="center" direction="column">
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-username">Username</InputLabel>
<OutlinedInput
id="outlined-adornment-username"
type="text"
label="Username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color={ passwordScore > 2 ? 'success' : 'error' }>
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
<Button sx={{ m: 1, width: '15ch' }} variant="contained" color="success"
onClick={handleRegister} disabled={!username || !email || !password || password !== confirmPassword || passwordScore < 3 || !isEmailValid(email)}
>
Register
</Button>
</Grid>
<Grid container alignItems="center" justifyContent="center" direction="column">
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color= { isEmailValid(email) ? 'success' : 'error'}>
<InputLabel htmlFor="outlined-adornment-email">Email</InputLabel>
<OutlinedInput
id="outlined-adornment-email"
type="text"
label="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color={password === confirmPassword ? 'success' : 'error' }>
<InputLabel htmlFor="outlined-adornment-confpassword">Confirm</InputLabel>
<OutlinedInput
id="outlined-adornment-confpassword"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="ConfPassword"
value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} disabled={passwordScore < 3}
/>
</FormControl>
<Button sx={{ m: 1, width: '15ch' }} variant="contained" color="primary" onClick={goToLogin}>Login</Button>
</Grid>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-username">Username</InputLabel>
<OutlinedInput
id="outlined-adornment-username"
type="text"
label="Username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color={isEmailValid(email) ? 'success' : 'error'}>
<InputLabel htmlFor="outlined-adornment-email">Email</InputLabel>
<OutlinedInput
id="outlined-adornment-email"
type="text"
label="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
</FormControl>
</Grid>
<Grid container alignItems="center" justifyContent="center">
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color={passwordScore > 2 ? 'success' : 'error'}>
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" color={password === confirmPassword ? 'success' : 'error'}>
<InputLabel htmlFor="outlined-adornment-confpassword">Confirm</InputLabel>
<OutlinedInput
id="outlined-adornment-confpassword"
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="ConfPassword"
value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} disabled={passwordScore < 3}
/>
</FormControl>
</Grid>
<Grid container alignItems="center" spacing={12} justifyContent="center">
<Button sx={{ m: 1, width: '15ch' }} variant="contained" color="success"
onClick={handleRegister} disabled={!username || !email || !password || password !== confirmPassword || passwordScore < 3 || !isEmailValid(email)}
>
Register
</Button>
<Button sx={{ m: 1, width: '15ch' }} variant="contained" color="primary" onClick={goToLogin}>Login</Button>
</Grid>
</div>
);
Expand Down

0 comments on commit b294f08

Please sign in to comment.