+
+
+
+ Welcome to Librum
+
+
+ Your credentials are only used to authenticate you. Your
+ credentials will be stored in a secure database.
+
+
+
+
+
+ First Name
+
+
+
+
+
+ Last Name
+
+
+
+
+
+
+
+ Email
+
+
+
+
+
+ Password
+
+
+
+
+
+ Confirm password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Confirm Email Modal */}
+
+
+
+
+
+ Email confirmation required
+
+ We've created an account for you and have sent a
+ verification link to your email. This window will automatically
+ close and you will be logged in after confirming your email.
+
+
+
+
+
+
+ );
+};
+
+export default LoginButton;
diff --git a/app/components/ui/LoginButtonMobile.jsx b/app/components/ui/LoginButtonMobile.jsx
new file mode 100644
index 00000000..2c6bbaee
--- /dev/null
+++ b/app/components/ui/LoginButtonMobile.jsx
@@ -0,0 +1,507 @@
+"use client";
+
+import {
+ Button,
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalOverlay,
+ ModalCloseButton,
+ useDisclosure,
+ FormControl,
+ FormLabel,
+ Input,
+ ModalBody,
+ ModalFooter,
+ Center,
+ Heading,
+ Text,
+ Box,
+ Flex,
+ useToast,
+ Image,
+ Portal,
+ InputRightElement,
+ InputGroup,
+} from "@chakra-ui/react";
+
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
+
+import Link from "next/link";
+import { BeatLoader } from "react-spinners";
+
+import { useRouter, usePathname } from "next/navigation";
+
+import { useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+import {
+ useQuery,
+ useMutation,
+ useQueryClient,
+ QueryClient,
+ QueryClientProvider,
+} from "@tanstack/react-query";
+
+import Logo from "./Logo";
+
+import { updateLoggedIn, updateUser } from "../../features/user/userSlice";
+import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux/";
+
+import {
+ fetchUserInfo,
+ userLogin,
+ userRegistration,
+ getVerifiedStatus,
+ fetchAvatar,
+} from "../../utils/apiFunctions";
+
+import { useCookies } from "react-cookie";
+
+import { LoginContext } from "@/app/context/loginModalContext";
+import { useContext } from "react";
+
+const LoginButtonMobile = ({ closeDrawer }) => {
+ const { loginOpen, setLoginOpen } = useContext(LoginContext);
+ const [tokenExists, setTokenExists] = useState(false);
+
+ // Set this to true after user confirms email to trigger login modal
+ const [isEmailConfirmed, setIsEmailConfirmed] = useState();
+
+ useEffect(() => {
+ if (isEmailConfirmed === true) {
+ console.log("User confirmed email");
+ } else if (isEmailConfirmed === false) {
+ console.log("Email not confirmed");
+ }
+ }, [isEmailConfirmed]);
+
+ const path = usePathname();
+
+ // Cookie bullshit to work around the fact that the authentication for the website is being handled by an external API.
+ // We are using react-cookies to set a cookie containing the JWT received from the external API. Then, the existence of
+ // this cookie is checked by the middleware function (defined in middleware.js). If JWT does not exist in cookies, then
+ // the user is redirected back to home if they try to access the /profile page.
+ const [cookies, setCookie, removeCookie] = useCookies(["user"]);
+
+ // Notifications for successful login or errors
+ const toast = useToast();
+
+ // Page redirection
+ const router = useRouter();
+
+ // User auth state
+ const [token, setToken] = useState(null);
+ const [email, setEmail] = useState("");
+ const [showPassword, setShowPassword] = useState(false);
+ const [password, setPassword] = useState("");
+
+ // User register state
+ const [registerEmail, setRegisterEmail] = useState("");
+ const [registerPassword, setRegisterPassword] = useState("");
+ const [registerFirstName, setRegisterFirstName] = useState("");
+ const [registerLastName, setRegisterLastName] = useState("");
+
+ // Modal state for login modal
+ const {
+ isOpen: isOpenLogin,
+ onOpen: onOpenLogin,
+ onClose: onCloseLogin,
+ } = useDisclosure();
+
+ useEffect(() => {
+ if (loginOpen) {
+ onOpenLogin();
+ closeDrawer();
+ }
+ }, [loginOpen]);
+
+ // Modal state for register modal
+ const {
+ isOpen: isOpenRegister,
+ onOpen: onOpenRegister,
+ onClose: onCloseRegister,
+ } = useDisclosure();
+
+ // Modal state for email confirmation modal
+ const {
+ isOpen: isOpenConfirmEmail,
+ onOpen: onOpenConfirmEmail,
+ onClose: onCloseConfirmEmail,
+ } = useDisclosure();
+
+ const initialRef = useRef(null);
+
+ // User auth state setters
+ const handleEmail = (event) => setEmail(event.target.value);
+ const handlePassword = (event) => setPassword(event.target.value);
+ const handleShowPassword = () => setShowPassword(!showPassword);
+
+ // Redux functions for storing user info after login
+ const dispatch = useDispatch();
+
+ const setUser = (token) => {
+ fetchUserInfo(token).then((result) => {
+ dispatch(updateUser(result));
+ });
+ };
+
+ // User registration state setters
+ const handleRegFName = (event) => setRegisterFirstName(event.target.value);
+ const handleRegLName = (event) => setRegisterLastName(event.target.value);
+ const handleRegEmail = (event) => setRegisterEmail(event.target.value);
+ const handleRegPass = (event) => setRegisterPassword(event.target.value);
+
+ // API handling - Login
+ const queryClient = useQueryClient();
+
+ // This function sets a cookie with the token, which is then checked by the middleware on subsequent requests
+ const setCookieHandler = (data) => {
+ setCookie("token", data, {
+ path: "/",
+ });
+ };
+
+ const login = useMutation({
+ mutationFn: userLogin,
+ onSuccess: (data) => {
+ queryClient.invalidateQueries({ queryKey: ["login"] });
+ if (data.code === 1) {
+ toast({
+ title: "Uh oh...",
+ description: "You've entered the wrong email or password.",
+ status: "error",
+ duration: 9000,
+ isClosable: true,
+ });
+ } else {
+ toast({
+ title: "Welcome!",
+ description: "You have been logged in. Enjoy.",
+ status: "success",
+ duration: 9000,
+ isClosable: true,
+ });
+ setToken(data);
+ setUser(data);
+ setCookieHandler(data);
+ dispatch(updateLoggedIn(true));
+ onCloseLogin();
+ router.push("/profile");
+ }
+ },
+ });
+
+ // Fires every time token state is changed, lets Navbar know whether or not to display Profile link
+ useEffect(() => {
+ setToken(localStorage.getItem("token"));
+ if (token) {
+ dispatch(updateLoggedIn(true));
+ setTokenExists(true);
+ } else {
+ dispatch(updateLoggedIn(false));
+ }
+ }, [token, dispatch]);
+
+ const handleLogin = (userInfo) => {
+ login.mutate(userInfo);
+ };
+
+ // API handling - Register
+ const register = useMutation({
+ mutationFn: userRegistration,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["register"] });
+ },
+ });
+
+ // Logout function
+ const logOut = () => {
+ localStorage.removeItem("token");
+ setToken(null);
+ removeCookie("token");
+ dispatch(updateUser({}));
+ dispatch(updateLoggedIn(false));
+ router.push("/");
+ };
+
+ // Register modal logic
+ const registerAccount = () => {
+ onCloseLogin();
+ onOpenRegister();
+ };
+
+ let emailConfirmationInterval;
+
+ const listenForEmailConfirmation = () => {
+ emailConfirmationInterval = setInterval(() => {
+ confirmEmail(registerEmail);
+ }, 4000);
+ };
+
+ const confirmEmail = async (email) => {
+ const result = await getVerifiedStatus(email);
+ if (result == true) {
+ clearInterval(emailConfirmationInterval);
+ onCloseConfirmEmail();
+ onOpenLogin();
+ }
+ };
+
+ const handleRegister = (data) => {
+ register.mutate(data);
+ // toast({
+ // title: "Account Created.",
+ // description:
+ // "We've created an account for you and have sent a verification link to your email. Please verify your account.",
+ // status: "success",
+ // duration: 9000,
+ // isClosable: true,
+ // colorScheme: "purple",
+ // });
+ // localStorage.setItem("isVerified", "false");
+ onCloseRegister();
+ setIsEmailConfirmed(false);
+ onOpenConfirmEmail();
+ listenForEmailConfirmation();
+ };
+
+ const {
+ isLoading: isAvatarLoading,
+ error: avatarError,
+ data: avatarData,
+ } = useQuery({
+ queryKey: ["avatar"],
+ queryFn: () => {
+ return fetchAvatar(token);
+ },
+ enabled: tokenExists,
+ });
+
+ return (
+ <>
+ {/* Login Modal */}
+
+
+
+
+ {
+ setLoginOpen(false);
+ }}
+ />
+
+
+
+
+
+ Welcome to Librum
+
+
+ Your credentials are only used to authenticate you. Your
+ credentials will be stored in a secure database.
+
+
+
+
+
+ First Name
+
+
+
+
+
+ Last Name
+
+
+
+
+
+
+
+ Email
+
+
+
+
+
+ Password
+
+
+
+
+
+ Confirm password
+
+
+
+
+
+
;
+};
+
+export default UserStorage;
diff --git a/app/components/ui/navlinks.module.css b/app/components/ui/navlinks.module.css
new file mode 100644
index 00000000..0a1a0dbd
--- /dev/null
+++ b/app/components/ui/navlinks.module.css
@@ -0,0 +1,175 @@
+.news-image {
+ width: 300px;
+ height: auto;
+}
+
+.mobile-card {
+ background-color: #24282f;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%2324282F'/%3E%3Cstop offset='1' stop-color='%233C434E'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+ /* background-attachment: fixed; */
+ background-size: cover;
+}
+
+.image {
+ height: 700px;
+ width: 700px;
+ padding: 20px;
+ border-radius: 5px;
+ /* border: 2px solid orange; */
+ /* background-color: var(--color-primary); */
+ animation: fade-in-down 1200ms;
+ overflow-y: hidden;
+}
+
+.res-theme-icon:hover {
+ cursor: pointer;
+}
+
+.legal-list {
+ list-style-type: latin-in-brackets;
+}
+
+.features-container {
+ position: relative;
+}
+
+.wave {
+ position: absolute;
+ top: 0;
+ margin-top: -8rem;
+ width: 100dvw;
+ margin-right: -10px;
+}
+
+.features-img {
+ width: 100%;
+ height: auto;
+}
+
+.features-img:hover {
+ cursor: pointer;
+}
+
+.modal-img {
+ width: 100%;
+ height: auto;
+}
+
+.shadow-right {
+ -webkit-box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ -moz-box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+}
+
+.shadow-left {
+ -webkit-box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ -moz-box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+}
+
+.tab-icon {
+ padding: 0.5rem;
+}
+
+.contact-modal {
+ display: flex !important;
+ transition: 1s ease-in-out;
+}
+
+.contact-success-message {
+ display: flex;
+ transition: 1s ease-in-out;
+}
+
+.closed {
+ display: none !important;
+ transition: 1s ease-in-out;
+}
+
+.nav-container-gradient {
+ background: linear-gradient(
+ 150deg,
+ rgb(43, 25, 68) 0%,
+ rgb(109, 75, 172) 100%,
+ rgba(0, 0, 0, 1) 100%
+ );
+}
+
+.nav-container-dark {
+ background-color: #282c34;
+}
+
+.drawer-link {
+ display: flex;
+ width: 100%;
+}
+
+.nav-container-light {
+ background-color: white;
+}
+
+.logo-outer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background-color: #9c34c2;
+ border-radius: 4px;
+}
+
+.logo-inner {
+ width: 30px;
+ height: 30px;
+ background-color: #16143f;
+ border-radius: 4px;
+}
+
+.foss-icon {
+ font-size: 70px;
+}
+
+/*
+Nav links hover animation
+*/
+
+.navHover {
+ position: relative;
+}
+
+.nav-active {
+ color: red;
+}
+
+.navHover::before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 3px;
+ bottom: 0;
+ left: 0;
+ background-color: #946bde;
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+}
+
+.navHover:hover::before {
+ transform: scaleX(0.8);
+}
+
+.blogText {
+ margin-bottom: 1rem !important;
+}
+
+@media only screen and (max-width: 600px) {
+ .foss-icon {
+ font-size: 50px;
+ }
+}
+
+@media only screen and (min-width: 1300px) {
+ .features-animate {
+ display: none;
+ }
+}
diff --git a/app/contact/page.jsx b/app/contact/page.jsx
new file mode 100644
index 00000000..b248892f
--- /dev/null
+++ b/app/contact/page.jsx
@@ -0,0 +1,25 @@
+"use client";
+import { Flex, Heading, Text, Box, Card, CardBody } from "@chakra-ui/react";
+import ContactForm from "../components/ui/ContactForm";
+const Contact = () => {
+ return (
+
+
+
+
+
+ Need Help?
+
+
+ Reach us through the form below, or at help@librumreader.com if
+ you have any questions, we are 100% responsive and reply quickly!
+
+
+
+
+
+
+ );
+};
+
+export default Contact;
diff --git a/app/context/loginModalContext.js b/app/context/loginModalContext.js
new file mode 100644
index 00000000..bc714c92
--- /dev/null
+++ b/app/context/loginModalContext.js
@@ -0,0 +1,3 @@
+import { createContext, useContext, useState } from "react";
+
+export const LoginContext = createContext("");
diff --git a/app/cookies/page.jsx b/app/cookies/page.jsx
new file mode 100644
index 00000000..e8b27a86
--- /dev/null
+++ b/app/cookies/page.jsx
@@ -0,0 +1,280 @@
+"use client";
+import {
+ Heading,
+ Text,
+ ListItem,
+ OrderedList,
+ VStack,
+ Link,
+ UnorderedList,
+ Flex,
+} from "@chakra-ui/react";
+
+const Cookies = (props) => {
+ return (
+
+
+ COOKIES POLICY
+
+
+ Last Updated: July 12, 2023
+
+
+ Interpretation and Definitions
+
+
+ Interpretation
+
+
+ The following circumstances establish the meanings of words whose first
+ letter is capitalized. The following definitions are to be understood
+ equally whether they are written in the singular or plural.
+
+
+ Definitions
+
+ In accordance with our Cookies Policy:
+
+ {`In this Cookies Policy, references to "Company" (also known as "the
+ Company," "We," "Us," or "Our") are to Librum-Reader. "Cookies" refers
+ to little files that a website places on your computer, mobile device,
+ or any other device and which, among other things, include information
+ about your browsing history on that website. The term "Application" or
+ “App” refers to Librum at`}{" "}
+ https://librumreader.com/.{" "}
+ {`"You" refers
+ to the person accessing or using the website, or, if applicable, the
+ business or other legal entity that the person is accessing or using the
+ website on their behalf.`}
+
+
+ What are cookies?
+
+
+ {`Cookies are often referred to as any type of data storage and retrieval
+ system used to store and access data on a user's electronic device (such
+ as a computer, mobile phone, or tablet). The term "cookies" is used in
+ this context to refer to other related technologies such as local shared
+ objects, flash cookies, web beacons, bugs, etc. as well as the use of
+ fingerprinting techniques, which refer to methods of extracting a
+ device's digital fingerprint. Websites or Applications are required to
+ ask users for their consent before using cookies in order to comply with
+ privacy laws and regulations like the General Data Protection Regulation
+ (GDPR) in the European Union and the U.S. legislation (including CCPA)
+ in the United States. These regulations are meant to safeguard people's
+ personal information and privacy when they use websites and other online
+ resources. When a website asks for a user's consent to use cookies, it
+ shows transparency regarding the information it collects and how it uses
+ it. The website also gives users control over their personal data and
+ the option to decide whether or not to share it by obtaining their
+ approval.`}
+
+
+ What are cookies used for?
+
+
+ Cookies can monitor user activity and gather information to enhance user
+ experience or advertising. Despite the fact that it may be a useful tool
+ for businesses, it may also give rise to privacy and security issues.
+
+
+ We use both our own and third-party cookies for several objectives,
+ including identifying you as a user, learning about your browsing
+ habits, collecting statistics, customizing the way content is displayed,
+ and enhancing the offerings of goods and services we present to you.
+
+
+ When you open the Settings Panel, you may view the list of cookies to
+ understand the exact goals of each cookie.
+
+
+ Type of Cookie
+
+
+ Depending on their duration, cookies may be:
+
+
+
+ {`Session: These cookies are made to gather and store information while
+ a user is accessing a website. They are often used to store data that
+ is only necessary to provide the user with the service they have
+ requested at that moment (for example, a list of the things they have
+ purchased), and they vanish after the session is over.`}
+
+
+ Persistent: A particular kind of cookie, lasting from a few minutes to
+ several years, that allows users to access and analyze data while it
+ is still being stored on the device.
+
+
+
+ Depending on the purpose of the cookie:
+
+
+
+ Technical cookies: Cookies that allow the user to browse the web page,
+ platform, or application and use the available options or services.
+
+
+ Analytical cookies: These are the cookies that enable the person in
+ charge of them to monitor and examine user behavior on the websites to
+ which they are linked.
+
+
+ Behavioral advertising cookies: These cookies keep track of user
+ behavior data gathered from ongoing monitoring of their browser
+ activities, creating a specific profile from which to display
+ advertisements.
+
+
+ Preferences or personalization cookies: These are the cookies that
+ enable you to remember details for service access with features that
+ can set your experience apart from that of other users.
+
+
+
+ Depending on the entity that manages them:
+
+
+
+ {`Device cookies: These are the cookies that are sent to the user's computer or other web browsers from a server or domain that the editor manages and from which the user's requested service is delivered.`}
+
+
+ {`Third-party cookies: These cookies are those sent to the user’s
+ electronic device from a computer or domain that the editor does not
+ manage but by another entity that handles data obtained through the
+ cookies.`}
+
+
+
+ Your consent regarding these cookies
+
+
+ We would like to inform you that we will only place cookies on your
+ computer with your permission via the access banner and settings
+ selected in the Settings Panel.
+
+
+ The aforementioned is accurate, except technical cookies, which are
+ required for computer browsing and/or to deliver the service the user
+ has requested.
+
+ How to revoke the consent:
+
+
+ By altering the options in the Settings Panel, the user can change or
+ cancel their consent at any moment.
+
+
+ For third-party cookies, please note that each provider manages and
+ controls revocation procedures exclusively. To remove them, you can do
+ so from the browser options or the system offered by the third party.
+ See the links we provide to do this in the Settings Panel.
+
+
+ In any case, the user has the option to remove their browsing history
+ (which may include cookies) from the browser that was installed on their
+ electronic device, as well as to enable, block, or delete cookies.
+
+
+ For Desktop or browser App user, here are the links to view the settings
+ and instructions for your browser:{" "}
+
+
+
+ For the Internet Explorer web browser, please visit this page from
+ Microsoft:{" "}
+ http://support.microsoft.com/kb/278835
+
+
+ For the Chrome web browser, please visit this page from Google:{" "}
+
+ https://support.google.com/accounts/answer/32050
+
+
+
+ For the Safari web browser, please visit this page from Apple:{" "}
+
+ https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/mac
+
+
+
+ For the Firefox web browser, please visit this page from Mozilla:{" "}
+
+ https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored
+
+
+
+
+
+ {`Disabling all cookies does not prevent browsing/app through the service.
+ You can also disable mobile app analytics from your mobile device's
+ settings screen.`}
+
+
+ Information about other tracking technologies, like web beacons:
+
+
+ {`Cookies are not the only method for identifying or tracking website
+ visitors. On occasion, we might also employ other related technologies,
+ such as web beacons (also known as "tracking pixels" or "clear gifs").
+ These tiny graphics files contain a unique identifier that enables us to
+ recognize when someone has visited our Websites or opened an email
+ including them.`}
+
+
+ {`This enables us to track user movement from one page of a website to another, send cookies to your computer or device, determine whether you arrived there via a third-party website, enhance the website's functionality, and assess the efficacy of email marketing campaigns. These technologies frequently rely on cookies to operate effectively. Therefore, disabling cookies will make them less functional.`}
+
+
+ Cookies and Personal data protection:
+
+
+ {`Some cookies may process personal data, such as when a user's name or
+ email address is used to identify the user (for example, as a registered
+ user), when an IP address is used to identify and track a user, or when
+ a user is identified by a unique identifier (for example, an advertising
+ ID) to distinguish and track a user. For additional information, please
+ check the Privacy Policy.`}
+
+
+ Changes to the Cookies Policy:
+
+
+ This Cookies Policy may be modified at any time if new laws become
+ effective or if the type of cookies being used changes. We always
+ mention the updation date for our policy; therefore, please check coming
+ back to check it.
+
+
+ Contact Us:
+
+
+ For more details and queries, you can contact us at{" "}
+ help@librumreader.com
+
+
+ );
+};
+
+export default Cookies;
diff --git a/app/disclaimer/page.jsx b/app/disclaimer/page.jsx
new file mode 100644
index 00000000..80590001
--- /dev/null
+++ b/app/disclaimer/page.jsx
@@ -0,0 +1,144 @@
+"use client";
+import { VStack, Heading, Text, Flex, Link } from "@chakra-ui/react";
+
+const Disclaimer = (props) => {
+ return (
+
+
+ DISCLAIMER
+
+
+ Last Updated: July 26, 2023
+
+
+ {`Please carefully read this disclaimer before using Librum (the
+ "Application" and "Website"). Your use of the Application, its website,
+ and any features, content, or services made available by or through the
+ Application is subject to this disclaimer.`}
+
+
+ Purpose of Librum
+
+
+ Librum utilizes open-source software under the terms of the GNU General
+ Public License version 3 (GPLv3) for certain aspects of the Application.
+ The provisions of the GPLv3 license apply to the respective open-source
+ components and govern their use, modification, and distribution. Please
+ refer to the applicable licenses for more information.
+
+
+ Librum is a platform for storing and reading e-books and other digital
+ content. The main goal of the application is to provide a simple and
+ straightforward way to access your library and read your books from
+ multiple devices.
+
+
+ Copyrighted Materials
+
+
+ We respect the intellectual property rights of others and expect our
+ users to do the same.
+
+
+ The Application does not host or provide any copyrighted materials
+ without proper authorization. Users are responsible for ensuring that
+ the content they download or share through the Application complies with
+ applicable copyright laws.
+
+
+ Whereas all the books uploaded over the Application are under the
+ copyrights of the original authors and publishers. Therefore, we do not
+ own any copyright for the books. We are merely a medium for users to
+ read books under one platform.
+
+
+ User Responsibilities
+
+
+ You understand and agree that your use of the Application or website and
+ any content you download or distribute are your responsibility as the
+ application user. You agree not to use the Application and website for
+ any illegal or infringing acts as you know that the unauthorised
+ distribution, replication, or sharing of copyrighted materials may
+ constitute unlawful activity.
+
+
+ {`It is necessary that all the content uploaded by the user should not be
+ unlawful or in breach of any person’s legal rights (such as, but not
+ only copyright) under any applicable law, or in any way that is
+ offensive, indecent, discriminatory, or otherwise objectionable.`}
+
+
+ Data Collection and Privacy
+
+
+ The Application may collect certain user data, such as reading
+ statistics, preferences, and other usage information, to provide
+ personalized experiences and improve our services. We are committed to
+ protecting your privacy and handling your data in accordance with
+ applicable laws and our Privacy Policy. By using the Application, you
+ consent to collecting, storing, and processing your data as described in
+ our Privacy Policy.
+
+
+ Limitation of Liability
+
+
+ {`The Application and its content are provided on an "as-is" and
+ "as-available" basis. We make no representations or warranties of any
+ kind, express or implied, regarding the application's accuracy,
+ reliability, or availability or its content. To the fullest extent
+ permitted by law, we disclaim all warranties, including but not limited
+ to the implied warranties of merchantability, fitness for a particular
+ purpose, and non-infringement. We shall not be liable for any direct,
+ indirect, incidental, consequential, or punitive damages arising out of
+ or in connection with the use or inability to use the Application.`}
+
+
+ Changes to Disclaimer
+
+
+ We reserve the right to modify, suspend, or discontinue the Application
+ or any part of it, including this disclaimer, at any time without prior
+ notice. Any changes to the disclaimer will be effective immediately upon
+ posting the revised version on our website.
+
+
+ Legal Advice
+
+
+ This disclaimer is not intended to provide legal advice or replace the
+ need for professional legal counsel. We recommend consulting with a
+ qualified attorney if you have specific questions regarding copyright,
+ intellectual property, or other legal matters.
+
+
+ Using the Application, you acknowledge that you have read, understood,
+ and agreed to this disclaimer. If you do not agree with any part of this
+ disclaimer, please refrain from using the Application.
+
+
+ Contact Us:
+
+
+ For questions, you can reach us under:{" "}
+ help@librumreader.com
+
+
+ For business-related contact, reach out to us here:{" "}
+ contact@librumreader.com
+
+
+ );
+};
+
+export default Disclaimer;
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/features/user/userSlice.js b/app/features/user/userSlice.js
new file mode 100644
index 00000000..616cd668
--- /dev/null
+++ b/app/features/user/userSlice.js
@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+ userInfo: null,
+ isLoggedIn: false,
+};
+
+export const userSlice = createSlice({
+ name: "user",
+ initialState,
+ reducers: {
+ updateUser: (state, action) => {
+ state.userInfo = action.payload;
+ localStorage.setItem("user", JSON.stringify(state.userInfo));
+ },
+ updateLoggedIn: (state, action) => {
+ state.isLoggedIn = action.payload;
+ },
+ },
+});
+
+export const { updateUser, updateLoggedIn } = userSlice.actions;
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 00000000..c9a775c3
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,203 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
+
+/* :root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+
+*/
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ font-family: "Lato", sans-serif;
+}
+
+.news-image {
+ width: 300px;
+ height: auto;
+}
+
+.mobile-card {
+ background-color: #24282f;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%2324282F'/%3E%3Cstop offset='1' stop-color='%233C434E'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+ /* background-attachment: fixed; */
+ background-size: cover;
+}
+
+.image {
+ height: 700px;
+ width: 700px;
+ padding: 20px;
+ border-radius: 5px;
+ /* border: 2px solid orange; */
+ /* background-color: var(--color-primary); */
+ animation: fade-in-down 1200ms;
+ overflow-y: hidden;
+}
+
+.res-theme-icon:hover {
+ cursor: pointer;
+}
+
+.legal-list {
+ list-style-type: latin-in-brackets;
+}
+
+.features-container {
+ position: relative;
+}
+
+.wave {
+ position: absolute;
+ top: 0;
+ margin-top: -8rem;
+ width: 100dvw;
+ margin-right: -10px;
+}
+
+.features-img {
+ width: 100%;
+ height: auto;
+}
+
+.features-img:hover {
+ cursor: pointer;
+}
+
+.modal-img {
+ width: 100%;
+ height: auto;
+}
+
+.shadow-right {
+ -webkit-box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ -moz-box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ box-shadow: -93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+}
+
+.shadow-left {
+ -webkit-box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ -moz-box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+ box-shadow: 93px 200px 130px 19px rgba(175, 206, 240, 0.075);
+}
+
+.tab-icon {
+ padding: 0.5rem;
+}
+
+.contact-modal {
+ display: flex !important;
+ transition: 1s ease-in-out;
+}
+
+.contact-success-message {
+ display: flex;
+ transition: 1s ease-in-out;
+}
+
+.closed {
+ display: none !important;
+ transition: 1s ease-in-out;
+}
+
+.nav-container-gradient {
+ background: linear-gradient(
+ 150deg,
+ rgb(43, 25, 68) 0%,
+ rgb(109, 75, 172) 100%,
+ rgba(0, 0, 0, 1) 100%
+ );
+}
+
+.nav-container-dark {
+ background-color: #282c34;
+}
+
+.drawer-link {
+ display: flex;
+ width: 100%;
+}
+
+.nav-container-light {
+ background-color: white;
+}
+
+.logo-outer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background-color: #9c34c2;
+ border-radius: 4px;
+}
+
+.logo-inner {
+ width: 30px;
+ height: 30px;
+ background-color: #16143f;
+ border-radius: 4px;
+}
+
+.foss-icon {
+ font-size: 70px;
+}
+
+/*
+Nav links hover animation
+*/
+
+/* .nav-hover {
+ position: relative;
+}
+
+.nav-active {
+ color: red;
+}
+
+.nav-hover::before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 3px;
+ bottom: 0;
+ left: 0;
+ background-color: #946bde;
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+}
+
+.nav-hover:hover::before {
+ transform: scaleX(0.8);
+} */
+
+.blogText {
+ margin-bottom: 1rem !important;
+}
+
+@media only screen and (max-width: 600px) {
+ .foss-icon {
+ font-size: 50px;
+ }
+}
+
+@media only screen and (min-width: 1300px) {
+ .features-animate {
+ display: none;
+ }
+}
diff --git a/app/impressum/page.jsx b/app/impressum/page.jsx
new file mode 100644
index 00000000..dfdcaa32
--- /dev/null
+++ b/app/impressum/page.jsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import { Flex, Heading, Text, VStack, Link } from "@chakra-ui/react";
+
+const Impressum = () => {
+ return (
+
+
+
+ About Us
+ Librum-Reader
+ Kirchenkamp 2, 50226, Frechen Germany
+
+
+ Contact
+ Owner: David Lazarescu
+
+ E-Mail:{" "}
+
+ contact@librumreader.com
+
+
+
+ Internet:{" "}
+
+ https://librumreader.com
+
+
+
+
+
+ );
+};
+
+export default Impressum;
diff --git a/app/layout.jsx b/app/layout.jsx
new file mode 100644
index 00000000..c40de381
--- /dev/null
+++ b/app/layout.jsx
@@ -0,0 +1,212 @@
+"use client";
+import { Inter } from "next/font/google";
+// import Navbar from "./components/ui/Navbar";
+import Container from "./components/ui/Container";
+import Footer from "./components/sections/Footer";
+import dynamic from "next/dynamic";
+
+import {
+ ChakraProvider,
+ ColorModeScript,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalOverlay,
+ useDisclosure,
+ Card,
+ CardBody,
+ Flex,
+ Image,
+ Heading,
+ Text,
+ Center,
+ Button,
+ Link,
+ UnorderedList,
+ ListItem,
+} from "@chakra-ui/react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { Providers } from "./providers";
+
+import { store } from "./store";
+import { Provider } from "react-redux";
+
+import { CookiesProvider } from "react-cookie";
+
+import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
+
+import { useEffect, useState } from "react";
+import { LoginContext } from "./context/loginModalContext";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const queryClient = new QueryClient();
+
+import { getVerifiedStatus } from "./utils/apiFunctions";
+
+export default function RootLayout({ children }) {
+ const [firstVisit, setFirstVisit] = useState(true);
+ const {
+ isOpen: isDisclaimerOpen,
+ onOpen: onDisclaimerOpen,
+ onClose: onDisclaimerClose,
+ } = useDisclosure();
+
+ useEffect(() => {
+ const inititalVisitToWebsite = localStorage.getItem("firstVisit");
+
+ if (!inititalVisitToWebsite) {
+ onDisclaimerOpen();
+ }
+ }, []);
+
+ // useEffect(() => {
+ // const isVerified = localStorage.getItem("isVerified");
+ // const token = localStorage.getItem("token");
+ // if (!isVerified && token) {
+ // const timer = setTimeout(() => {
+ // if (getVerifiedStatus(token)) {
+ // localStorage.setItem("isVerified", "true");
+ // }
+ // }, 1000);
+ // }
+
+ // return () => {
+ // timer.s;
+ // };
+ // });
+
+ const closeModalAndSetFirstVisit = () => {
+ localStorage.setItem("firstVisit", "false");
+ onDisclaimerClose();
+ };
+
+ const [loginOpen, setLoginOpen] = useState(false);
+
+ const DynamicNav = dynamic(() => import("./components/ui/Navbar"), {
+ loading: () =>
*/}
+