aboutsummaryrefslogtreecommitdiff
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/invoice/new.js14
-rw-r--r--src/views/login/login.js100
-rw-r--r--src/views/login/register.js104
-rw-r--r--src/views/login/scss/login.scss67
-rw-r--r--src/views/manage/scss/management-page.scss8
5 files changed, 282 insertions, 11 deletions
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} />
<div>
<InvoiceSummary
sum={sum}
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;
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 <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, 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 (
+ <div className={"register-page-wrapper"}>
+ <div className={"register-page"}>
+ <h1>Sign Up To OpenBills</h1>
+ <form onSubmit={handleSubmit}>
+ <label>
+ Username:
+ <input
+ className={"wider"}
+ name="UserName"
+ type="text"
+ value={user.UserName}
+ onChange={handleInput}/>
+ </label>
+ <label>
+ E-mail:
+ <input
+ className={"wider"}
+ name="Email"
+ type="text"
+ value={user.Email}
+ 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="/login">
+ <button>Log In Instead</button>
+ </Link>
+ <input type="submit" value="Sign Up" disabled={!validate()}/>
+ </div>
+ </form>
+ </div>
+ </div>
+ );
+}
+
+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 <https://www.gnu.org/licenses/>.
*/
-@import "../../../styles";
-
-@include floating-window;
-
-hr {
- margin: 0.8rem auto 1rem auto;
-}
+@import "../../../colors";
.manage-links {
max-width: 40rem;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 22:29:08 +0000