added (untested) auth mechanism

3 files changed, 271 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;
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;
+    }
+}