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/App.js | 4 + src/App.scss | 26 + src/classes/invoice.js | 1 - src/classes/user.js | 71 ++ src/components/editors/invoice-headers-editor.js | 198 ++-- src/components/editors/scss/_editor.scss | 16 + src/components/editors/scss/invoice-headers.scss | 6 + src/index.js | 59 + 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 +- yarn.lock | 1337 ++++++++++++---------- 14 files changed, 1330 insertions(+), 681 deletions(-) create mode 100644 src/classes/user.js 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 diff --git a/src/App.js b/src/App.js index a7a2e5c..9fd5081 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,8 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import './App.scss'; import Navbar from './components/navbar/navbar'; import HomePage from './views/homepage'; +import RegisterPage from './views/login/register'; +import LoginPage from './views/login/login'; import NewInvoicePage from './views/invoice/new'; import ManagementPage from './views/manage/manage'; import ManageItemsPage from './views/manage/items'; @@ -33,6 +35,8 @@ const App = () => {
}/> + }/> + }/> }/> }/> }/> diff --git a/src/App.scss b/src/App.scss index 23ee270..1b37ffe 100644 --- a/src/App.scss +++ b/src/App.scss @@ -60,3 +60,29 @@ $selectionColor: rgba($primaryAccentColor, 0.9) color: $darkgray; background: $selectionColor; } + +.dropdown-icon { + transition: transform 0.4s; + &.open { + transform: rotate(-180deg); + } +} + +.dropdown-div { + animation: dropdown ease 0.15s; +} + +@keyframes dropdown { + 0% { + opacity: 0; + transform: translateY(-100%) + } + 50% { + opacity: 0; + } + 100% { + opacity: 100; + transform: translateY(0px) + } +} + diff --git a/src/classes/invoice.js b/src/classes/invoice.js index 066cbc3..610b7d8 100644 --- a/src/classes/invoice.js +++ b/src/classes/invoice.js @@ -15,7 +15,6 @@ * along with this program. If not, see . */ -import { InvoiceItem } from "./item"; import { Client, Address } from "./client"; import axios from "axios"; diff --git a/src/classes/user.js b/src/classes/user.js new file mode 100644 index 0000000..858d8d6 --- /dev/null +++ b/src/classes/user.js @@ -0,0 +1,71 @@ +/* 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 axios from "axios"; + +export class User { + constructor() { + this.Id = null; + this.UserName = ""; + this.Email = ""; + this.Password = ""; + } +} + +export const validateUsername = username => { + if (username.length < 2) return false; + // username can't have spaces + if (username.includes(" ")) return false; + return true +} + +export const validatePassword = password => { + if (password.length < 12) return false; + // TODO: add other validation + + return true; +} + +export const validateEmail = email => String(email) + .toLowerCase() + .match( + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + ) ? true : false; + +export const login = (data, ok, fail) => { + axios.post("/auth/login", data) + .then(res => ok(res)) + .catch(err => fail(err)); +} + +export const saveUser = (user, ok, fail) => { + axios.post("/user/new", user) + .then(res => ok(res)) + .catch(err => fail(err)); +} + +export const deleteUser = (id, ok, fail) => { + axios.delete(`/user/${id}`) + .then(res => ok(res)) + .catch(err => fail(err)); +} + +export const editUser = (user, ok, fail) => { + axios.put(`/user/${user.Id}`, user) + .then(res => ok(res)) + .catch(err => fail(err)); +} diff --git a/src/components/editors/invoice-headers-editor.js b/src/components/editors/invoice-headers-editor.js index d099e59..dcbf9ca 100644 --- a/src/components/editors/invoice-headers-editor.js +++ b/src/components/editors/invoice-headers-editor.js @@ -18,8 +18,14 @@ import './scss/invoice-headers.scss'; import { useState, useEffect } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faChevronDown } from '@fortawesome/free-solid-svg-icons' + +const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport, invoiceNumber, setInvoiceNumber, date, setDate}) => { + // show transport details menu + const [showTPMenu, setShowTPMenu] = useState(false); + const [showAdditionalMenu, setShowAdditionalMenu] = useState(false); -const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport}) => { const handleInput = e => { const { name, value } = e.target; @@ -43,79 +49,123 @@ const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport}) return (

Invoice Options:

-
- - - - -

Transport Details

- - - - - - - - - - - -