diff options
Diffstat (limited to 'src/views/login/login.js')
-rw-r--r-- | src/views/login/login.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/src/views/login/login.js b/src/views/login/login.js new file mode 100644 index 0000000..0283dc7 --- /dev/null +++ b/src/views/login/login.js @@ -0,0 +1,100 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +import './scss/login.scss'; +import { User, login } from '../../classes/user'; + +import { Link, useNavigate } from 'react-router-dom'; +import { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faEye } from '@fortawesome/free-solid-svg-icons' + +const LoginPage = () => { + const [user, setUser] = useState(new User()); + const [showPassword, setShowPassword] = useState(false); + const navigate = useNavigate(); + + const validate = () => { + if (user.UserName.trim() === "") return false; + if (user.Password.length < 8) return false; + return true; + } + + const handleInput = ({target: {name, value}}) => + setUser(prev => ({...prev, [name]: value})); + + const handleSubmit = (e) => { + e.preventDefault(); + login(user, handleSuccess, handleError); + } + + const handleSuccess = (res) => { + localStorage.setItem("accessToken", res.data.accessToken) + navigate("/") + } + + const handleError = (err) => { + console.log(err) + alert("fail") + } + + return ( + <div className={"login-page-wrapper"}> + <div className={"login-page"}> + <h1>Welcome To OpenBills!</h1> + <p>You are not logged in.</p> + <form onSubmit={handleSubmit}> + <label> + Username: + <input + className={"wider"} + name="UserName" + type="text" + value={user.UserName} + onChange={handleInput}/> + </label> + <label> + Password: + <span className={"input-with-icon"}> + <input + name="Password" + type={showPassword ? "text" : "password"} + value={user.Password} + onChange={handleInput} /> + <FontAwesomeIcon + icon={faEye} + className={`icon ${showPassword ? "active" : ""}`} + onClick={(e) => { + e.preventDefault(); + setShowPassword(i => !i); + }}/> + </span> + </label> + <hr/> + <div className={"buttons"}> + <Link to="/register"> + <button>Create Account</button> + </Link> + <input type="submit" value="Log In" disabled={!validate()}/> + </div> + </form> + </div> + </div> + ); +} + +export default LoginPage; |