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 @@ ...@@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.6", "@emotion/react": "^11.10.6",
"@emotion/styled": "^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", "@mui/material": "^5.12.0",
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.3",
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
...@@ -925,6 +927,131 @@ ...@@ -925,6 +927,131 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true "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": { "node_modules/@mui/base": {
"version": "5.0.0-alpha.125", "version": "5.0.0-alpha.125",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
...@@ -966,6 +1093,31 @@ ...@@ -966,6 +1093,31 @@
"url": "https://opencollective.com/mui" "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": { "node_modules/@mui/material": {
"version": "5.12.0", "version": "5.12.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz",
...@@ -2185,6 +2337,11 @@ ...@@ -2185,6 +2337,11 @@
"node": ">=4" "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": { "node_modules/typescript": {
"version": "4.9.5", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
...@@ -2872,6 +3029,131 @@ ...@@ -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": { "@mui/base": {
"version": "5.0.0-alpha.125", "version": "5.0.0-alpha.125",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
...@@ -2892,6 +3174,14 @@ ...@@ -2892,6 +3174,14 @@
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.0.tgz", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.0.tgz",
"integrity": "sha512-1hoFIdlLI0sG+mkJgm70FjgIVpfLcE1vxPtNolg1tLFXrvbXGUYp9NHy3d6c41nDkg2OajuVS+Mn6A8UirFuMw==" "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": { "@mui/material": {
"version": "5.12.0", "version": "5.12.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.0.tgz",
...@@ -3708,6 +3998,11 @@ ...@@ -3708,6 +3998,11 @@
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" "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": { "typescript": {
"version": "4.9.5", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
......
frontend/package.json
View file @ eb0ff9cc
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.6", "@emotion/react": "^11.10.6",
"@emotion/styled": "^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", "@mui/material": "^5.12.0",
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.3",
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
......
frontend/src/containers/AuthorizeForm/AuthorizeForm.module.css
View file @ eb0ff9cc
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 100px; margin-top: 100px;
color: black;
} }
.AuthorizeForm p { .AuthorizeForm p {
...@@ -18,12 +19,13 @@ ...@@ -18,12 +19,13 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
background: rgba(83, 26, 136, 0.659); background: rgb(255, 255, 255);
border-radius: 5px; border-radius: 5px;
} }
.login_input{ .login_input{
width: 80%; width: 80%;
color: white;
height: 40px; height: 40px;
padding: 5px; padding: 5px;
border-radius: 7px; border-radius: 7px;
...@@ -88,7 +90,7 @@ ...@@ -88,7 +90,7 @@
} }
.login_btn{ .login_btn{
margin: 0 auto; margin: 0 auto;
margin-top: 30px; margin-top: 10px;
width: 170px; width: 170px;
height: 50px; height: 50px;
} }
......
frontend/src/containers/AuthorizeForm/AuthorizeForm.tsx
View file @ eb0ff9cc
...@@ -7,6 +7,9 @@ import { shallowEqual, useSelector } from 'react-redux' ...@@ -7,6 +7,9 @@ import { shallowEqual, useSelector } from 'react-redux'
import Preloader from '../../components/UI/Preloader/Preloader' import Preloader from '../../components/UI/Preloader/Preloader'
import { createUser, hideMessage, loginUser } from '../../store/user/user.slice' import { createUser, hideMessage, loginUser } from '../../store/user/user.slice'
import Alert from '@mui/material/Alert'; 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 AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
const navigate = useNavigate() const navigate = useNavigate()
...@@ -23,6 +26,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => { ...@@ -23,6 +26,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
const [isLoginUser, setIsLoginUser] = useState<boolean>(true) const [isLoginUser, setIsLoginUser] = useState<boolean>(true)
const [showPassword, setShowPassword] = useState<boolean>(false);
const handleClickShowPassword = () => setShowPassword((show) => !show);
const inputHandler = (e: React.ChangeEvent<HTMLInputElement>): void => { const inputHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {
setUserValues(prevState => { setUserValues(prevState => {
return {...prevState, [e.target.name]: e.target.value} return {...prevState, [e.target.name]: e.target.value}
...@@ -42,6 +49,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => { ...@@ -42,6 +49,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
} }
} }
const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
};
useEffect(() => { useEffect(() => {
checkButton() checkButton()
},[userValues]) },[userValues])
...@@ -77,35 +88,73 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => { ...@@ -77,35 +88,73 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
</Alert> : null </Alert> : null
} }
<p>{isLoginUser ? 'Login user' : 'Authorize user'}</p> <p>{isLoginUser ? 'Login user' : 'Authorize user'}</p>
<p>Username:</p> {/* <OutlinedInput
<input label="Username"
className={styles.login_input} name={'username'}
placeholder='username...'
name={'username'}
autoComplete='off' autoComplete='off'
value={userValues.username} value={userValues.username}
onChange={inputHandler} 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> </FormControl>
<input
className={styles.login_input}
placeholder='password...' <FormControl sx={{ m: 1, width: '80%' }} variant="outlined">
name={'password'} <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
type='password' <OutlinedInput
autoComplete='off' id="outlined-adornment-password"
value={userValues.password} type={showPassword ? 'text' : 'password'}
onChange={inputHandler} 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'}}> </FormControl>
<input <FormControlLabel
className={styles.toggleCheckbox} control={<Switch
type="checkbox"
checked={isLoginUser} checked={isLoginUser}
onChange={toggleChangeHandler} onChange={toggleChangeHandler}
/> inputProps={{ 'aria-label': 'controlled' }}
<div className={styles.toggleSwitch}></div> />}
<span className={styles.toggleLabel}>New user?</span> label={<p style={{color: 'black'}}>Add new user</p>}
</label> />
<button <button
className={styles.login_btn} className={styles.login_btn}
disabled={buttonDisabled} 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