From bb38d843de17bb0b206a663e008c5dbb37f04708 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Sun, 4 Dec 2022 18:05:11 +0530 Subject: added (untested) auth mechanism --- src/views/invoice/new.js | 14 ++-- src/views/login/login.js | 100 +++++++++++++++++++++++++++ src/views/login/register.js | 104 +++++++++++++++++++++++++++++ src/views/login/scss/login.scss | 67 +++++++++++++++++++ src/views/manage/scss/management-page.scss | 8 +-- 5 files changed, 282 insertions(+), 11 deletions(-) create mode 100644 src/views/login/login.js create mode 100644 src/views/login/register.js create mode 100644 src/views/login/scss/login.scss (limited to 'src/views') diff --git a/src/views/invoice/new.js b/src/views/invoice/new.js index 2d88e40..b1d601f 100644 --- a/src/views/invoice/new.js +++ b/src/views/invoice/new.js @@ -36,6 +36,8 @@ const NewInvoicePage = () => { const [roundOffTotal, setRoundOffTotal] = useState(true); //TODO: load from config //const [isInterstate, setIsInterstate] = useState(false); const [transport, setTransport] = useState(new Transport()); + const [invoiceNumber, setInvoiceNumber] = useState("0"); // TODO: auto increment + const [invoiceDate, setInvoiceDate] = useState(new Date()); const isInterstate = false; // temporary const [sum, setSum] = useState({ GST: currency(0), @@ -47,8 +49,8 @@ const NewInvoicePage = () => { const submitInvoice = () => { const invoice = new Invoice(); - invoice.InvoiceNumber = 69; // TODO: set accordingly - invoice.CreatedAt = new Date(); + invoice.InvoiceNumber = invoiceNumber; + invoice.CreatedAt = invoiceDate; invoice.TotalAmount = sum.Amount; const recipient = new Client(); @@ -67,7 +69,7 @@ const NewInvoicePage = () => { invoice.Note = ""; // TODO: set accordingly invoice.Draft = false; // TODO: set accordingly - saveInvoice(invoice, handleSuccess, handleFail) + saveInvoice(invoice, handleSuccess, handleFail); } const handleSuccess = () => { @@ -102,7 +104,11 @@ const NewInvoicePage = () => { roundOff={roundOffTotal} setRoundOff={setRoundOffTotal} transport={transport} - setTransport={setTransport} /> + setTransport={setTransport} + invoiceNumber={invoiceNumber} + setInvoiceNumber={setInvoiceNumber} + date={invoiceDate} + setDate={setInvoiceDate} />
+ + * 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 . + */ + +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 ( +
+
+

Welcome To OpenBills!

+

You are not logged in.

+
+ + +
+
+ + + + +
+
+
+
+ ); +} + +export default LoginPage; diff --git a/src/views/login/register.js b/src/views/login/register.js new file mode 100644 index 0000000..c747f59 --- /dev/null +++ b/src/views/login/register.js @@ -0,0 +1,104 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +import './scss/login.scss'; +import { User, validateEmail, validateUsername, validatePassword, saveUser } from '../../classes/user'; + +import { Link } from 'react-router-dom'; +import { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faEye } from '@fortawesome/free-solid-svg-icons' + +const RegisterPage = () => { + const [user, setUser] = useState(new User()); + const [showPassword, setShowPassword] = useState(false); + + const validate = () => + validateUsername(user.UserName.trim()) && + validateEmail(user.Email) && + validatePassword(user.Password); + + const handleInput = ({target: {name, value}}) => + setUser(prev => ({...prev, [name]: value})); + + const handleSubmit = (e) => { + e.preventDefault(); + saveUser(user, handleSuccess, handleError); + } + + const handleSuccess = () => { + alert("yay") + } + + const handleError = () => { + alert("fail") + } + + return ( +
+
+

Sign Up To OpenBills

+
+ + + +
+
+ + + + +
+
+
+
+ ); +} + +export default RegisterPage; diff --git a/src/views/login/scss/login.scss b/src/views/login/scss/login.scss new file mode 100644 index 0000000..1b2be62 --- /dev/null +++ b/src/views/login/scss/login.scss @@ -0,0 +1,67 @@ +@import "../../../colors"; +@import "../../../components/editors/scss/editor"; + +.login-page-wrapper, .register-page-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: calc(100vh - 7rem); +} + +.login-page, .register-page { + @include label; + @include button; + width: 95%; + max-width: 25rem; + margin-top: -6rem; + h1, p { + margin: 0.5rem 0; + text-align: center; + } + + label { + margin: auto; + width: 98%; + max-width: none; + } + + hr { + margin-top: 1rem; + } + + .input-with-icon { + width: 100%; + max-width: 15rem; + input { + margin-right: 0.5rem; + width: 87%; + } + .icon { + cursor: pointer; + transition: color 0.2s; + } + .icon.active {color: $primaryAccentColor;} + } + + input.wider { + max-width: 15rem; + } + + .buttons { + margin: 1rem 0; + display: flex; + justify-content: center; + button {width: 10rem;} + button, input[type=submit] { + margin: 0 1rem; + } + } + + input[type=submit]:disabled { + border-color: $warningColor; + } + input[type=submit]:disabled:hover { + background-color: $warningColor; + } +} diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss index f61b62d..85fbe7b 100644 --- a/src/views/manage/scss/management-page.scss +++ b/src/views/manage/scss/management-page.scss @@ -15,13 +15,7 @@ * along with this program. If not, see . */ -@import "../../../styles"; - -@include floating-window; - -hr { - margin: 0.8rem auto 1rem auto; -} +@import "../../../colors"; .manage-links { max-width: 40rem; -- cgit v1.2.3