Skip to content

E
exam_12_Tsoy_Danil
Commit eb0ff9cc authored by Цой Данил's avatar Цой Данил 💬
Browse files
Options

Rebuild authorize page. Now it has password that could be shown or hidden

parent e2fd31d3
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 25 deletions
frontend/package-lock.json
View file @ eb0ff9cc
......@@ -10,6 +10,8 @@
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@material/icon-button": "^14.0.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.0",
"@reduxjs/toolkit": "^1.9.3",
"@types/axios": "^0.14.0",
......@@ -925,6 +927,131 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true
},
"node_modules/@material/animation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0.tgz",
"integrity": "sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/base": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0.tgz",
"integrity": "sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/density": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/density/-/density-14.0.0.tgz",
"integrity": "sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/dom": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/dom/-/dom-14.0.0.tgz",
"integrity": "sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==",
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/elevation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-14.0.0.tgz",
"integrity": "sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==",
"dependencies": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/feature-targeting": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0.tgz",
"integrity": "sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/focus-ring": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-14.0.0.tgz",
"integrity": "sha512-fqqka6iSfQGJG3Le48RxPCtnOiaLGPDPikhktGbxlyW9srBVMgeCiONfHM7IT/1eu80O0Y67Lh/4ohu5+C+VAQ==",
"dependencies": {
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0"
}
},
"node_modules/@material/icon-button": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0.tgz",
"integrity": "sha512-wHMqzm7Q/UwbWLoWv32Li1r2iVYxadIrwTNxT0+p+7NdfI3lEwMN3NoB0CvoJnHTljjXDzce0KJ3nZloa0P0gA==",
"dependencies": {
"@material/base": "^14.0.0",
"@material/density": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/elevation": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/focus-ring": "^14.0.0",
"@material/ripple": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"@material/touch-target": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/ripple": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-14.0.0.tgz",
"integrity": "sha512-9XoGBFd5JhFgELgW7pqtiLy+CnCIcV2s9cQ2BWbOQeA8faX9UZIDUx/g76nHLZ7UzKFtsULJxZTwORmsEt2zvw==",
"dependencies": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/rtl": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0.tgz",
"integrity": "sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==",
"dependencies": {
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/theme": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0.tgz",
"integrity": "sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==",
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/touch-target": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-14.0.0.tgz",
"integrity": "sha512-o3kvxmS4HkmZoQTvtzLJrqSG+ezYXkyINm3Uiwio1PTg67pDgK5FRwInkz0VNaWPcw9+5jqjUQGjuZMtjQMq8w==",
"dependencies": {
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@mui/base": {
"version": "5.0.0-alpha.125",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
......@@ -966,6 +1093,31 @@
"url": "https://opencollective.com/mui"
}
},
"node_modules/@mui/icons-material": {
"version": "5.11.16",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.16.tgz",
"integrity": "sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material": {
"version": "5.12.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz",
......@@ -2185,6 +2337,11 @@
"node": ">=4"
}
},
"node_modules/tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
},
"node_modules/typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
......@@ -2872,6 +3029,131 @@
}
}
},
"@material/animation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0.tgz",
"integrity": "sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==",
"requires": {
"tslib": "^2.1.0"
}
},
"@material/base": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0.tgz",
"integrity": "sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==",
"requires": {
"tslib": "^2.1.0"
}
},
"@material/density": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/density/-/density-14.0.0.tgz",
"integrity": "sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==",
"requires": {
"tslib": "^2.1.0"
}
},
"@material/dom": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/dom/-/dom-14.0.0.tgz",
"integrity": "sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==",
"requires": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/elevation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-14.0.0.tgz",
"integrity": "sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==",
"requires": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/feature-targeting": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0.tgz",
"integrity": "sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==",
"requires": {
"tslib": "^2.1.0"
}
},
"@material/focus-ring": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-14.0.0.tgz",
"integrity": "sha512-fqqka6iSfQGJG3Le48RxPCtnOiaLGPDPikhktGbxlyW9srBVMgeCiONfHM7IT/1eu80O0Y67Lh/4ohu5+C+VAQ==",
"requires": {
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0"
}
},
"@material/icon-button": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0.tgz",
"integrity": "sha512-wHMqzm7Q/UwbWLoWv32Li1r2iVYxadIrwTNxT0+p+7NdfI3lEwMN3NoB0CvoJnHTljjXDzce0KJ3nZloa0P0gA==",
"requires": {
"@material/base": "^14.0.0",
"@material/density": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/elevation": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/focus-ring": "^14.0.0",
"@material/ripple": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"@material/touch-target": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/ripple": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-14.0.0.tgz",
"integrity": "sha512-9XoGBFd5JhFgELgW7pqtiLy+CnCIcV2s9cQ2BWbOQeA8faX9UZIDUx/g76nHLZ7UzKFtsULJxZTwORmsEt2zvw==",
"requires": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/rtl": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0.tgz",
"integrity": "sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==",
"requires": {
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/theme": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0.tgz",
"integrity": "sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==",
"requires": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@material/touch-target": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-14.0.0.tgz",
"integrity": "sha512-o3kvxmS4HkmZoQTvtzLJrqSG+ezYXkyINm3Uiwio1PTg67pDgK5FRwInkz0VNaWPcw9+5jqjUQGjuZMtjQMq8w==",
"requires": {
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"tslib": "^2.1.0"
}
},
"@mui/base": {
"version": "5.0.0-alpha.125",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
......@@ -2892,6 +3174,14 @@
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.0.tgz",
"integrity": "sha512-1hoFIdlLI0sG+mkJgm70FjgIVpfLcE1vxPtNolg1tLFXrvbXGUYp9NHy3d6c41nDkg2OajuVS+Mn6A8UirFuMw=="
},
"@mui/icons-material": {
"version": "5.11.16",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.16.tgz",
"integrity": "sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==",
"requires": {
"@babel/runtime": "^7.21.0"
}
},
"@mui/material": {
"version": "5.12.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz",
......@@ -3708,6 +3998,11 @@
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
},
"tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
},
"typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
......
frontend/package.json
View file @ eb0ff9cc
......@@ -11,6 +11,8 @@
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@material/icon-button": "^14.0.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.0",
"@reduxjs/toolkit": "^1.9.3",
"@types/axios": "^0.14.0",
......
frontend/src/containers/AuthorizeForm/AuthorizeForm.module.css
View file @ eb0ff9cc
......@@ -5,6 +5,7 @@
justify-content: center;
align-items: center;
margin-top: 100px;
color: black;
}
.AuthorizeForm p {
......@@ -18,12 +19,13 @@
flex-direction: column;
align-items: center;
padding: 20px;
background: rgba(83, 26, 136, 0.659);
background: rgb(255, 255, 255);
border-radius: 5px;
}
.login_input{
width: 80%;
color: white;
height: 40px;
padding: 5px;
border-radius: 7px;
......@@ -88,7 +90,7 @@
}
.login_btn{
margin: 0 auto;
margin-top: 30px;
margin-top: 10px;
width: 170px;
height: 50px;
}
......
frontend/src/containers/AuthorizeForm/AuthorizeForm.tsx
View file @ eb0ff9cc
......@@ -7,6 +7,9 @@ import { shallowEqual, useSelector } from 'react-redux'
import Preloader from '../../components/UI/Preloader/Preloader'
import { createUser, hideMessage, loginUser } from '../../store/user/user.slice'
import Alert from '@mui/material/Alert';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, OutlinedInput, Switch, TextField } from '@mui/material'
const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
const navigate = useNavigate()
......@@ -23,6 +26,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
const [isLoginUser, setIsLoginUser] = useState<boolean>(true)
const [showPassword, setShowPassword] = useState<boolean>(false);
const handleClickShowPassword = () => setShowPassword((show) => !show);
const inputHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {
setUserValues(prevState => {
return {...prevState, [e.target.name]: e.target.value}
......@@ -42,6 +49,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
}
}
const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
};
useEffect(() => {
checkButton()
},[userValues])
......@@ -77,35 +88,73 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
</Alert> : null
}
<p>{isLoginUser ? 'Login user' : 'Authorize user'}</p>
<p>Username:</p>
<input
className={styles.login_input}
placeholder='username...'
name={'username'}
{/* <OutlinedInput
label="Username"
name={'username'}
autoComplete='off'
value={userValues.username}
onChange={inputHandler}
style={{
marginBottom: '20px'
}}
/> */}
<FormControl sx={{ m: 1, width: '80%' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Username</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={'text'}
label="Username"
name={'username'}
autoComplete='off'
value={userValues.username}
onChange={inputHandler}
style={{
marginBottom: '10px',
width: '100%'
}
}
/>
<p>Password:</p>
<input
className={styles.login_input}
placeholder='password...'
name={'password'}
type='password'
autoComplete='off'
value={userValues.password}
onChange={inputHandler}
</FormControl>
<FormControl sx={{ m: 1, width: '80%' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={showPassword ? 'text' : 'password'}
label="Password"
name={'password'}
autoComplete='off'
value={userValues.password}
onChange={inputHandler}
style={{
marginBottom: '10px',
width: '100%'
}}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
<label style={{display: 'flex', alignItems: 'center'}}>
<input
className={styles.toggleCheckbox}
type="checkbox"
</FormControl>
<FormControlLabel
control={<Switch
checked={isLoginUser}
onChange={toggleChangeHandler}
/>
<div className={styles.toggleSwitch}></div>
<span className={styles.toggleLabel}>New user?</span>
</label>
onChange={toggleChangeHandler}
inputProps={{ 'aria-label': 'controlled' }}
/>}
label={<p style={{color: 'black'}}>Add new user</p>}
/>
<button
className={styles.login_btn}
disabled={buttonDisabled}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment