egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor code to improve readability and maintainability + redesigned announcement bar

Browse Source
This commit is contained in:
daniel31x13
2024-05-22 20:56:56 -04:00
parent 811628a952
commit a498f3a10d
22 changed files with 319 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/api/v1/auth/[...nextauth].ts
+3 -14
View File
@@ -608,6 +608,9 @@ if (process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true") {
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
httpOptions: {
timeout: 10000,
},
})
);
@@ -1162,20 +1165,6 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
},
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
// console.log(
// "User sign in attempt...",
// "User",
// user,
// "Account",
// account,
// "Profile",
// profile,
// "Email",
// email,
// "Credentials",
// credentials
// );
if (account?.provider !== "credentials") {
// registration via SSO can be separately disabled
const existingUser = await prisma.account.findFirst({
pages/auth/reset-password.tsx
+7 -4
View File
@@ -1,4 +1,4 @@
import AccentSubmitButton from "@/components/AccentSubmitButton";
import AccentSubmitButton from "@/components/ui/Button";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import Link from "next/link";
@@ -96,10 +96,13 @@ export default function ResetPassword() {
<AccentSubmitButton
type="submit"
label="Update Password"
className="mt-2 w-full"
intent="accent"
className="mt-2"
size="full"
loading={submitLoader}
/>
>
Update Password
</AccentSubmitButton>
</>
) : (
<>
pages/forgot.tsx
+7 -4
View File
@@ -1,4 +1,4 @@
import AccentSubmitButton from "@/components/AccentSubmitButton";
import AccentSubmitButton from "@/components/ui/Button";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import Link from "next/link";
@@ -88,10 +88,13 @@ export default function Forgot() {
<AccentSubmitButton
type="submit"
label="Send Login Link"
className="mt-2 w-full"
intent="accent"
className="mt-2"
size="full"
loading={submitLoader}
/>
>
Send Login Link
</AccentSubmitButton>
</>
) : (
<p>
pages/login.tsx
+20 -16
View File
@@ -1,4 +1,4 @@
import AccentSubmitButton from "@/components/AccentSubmitButton";
import AccentSubmitButton from "@/components/ui/Button";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
@@ -7,6 +7,7 @@ import React, { useState, FormEvent } from "react";
import { toast } from "react-hot-toast";
import { getLogins } from "./api/v1/logins";
import { InferGetServerSidePropsType } from "next";
import InstallApp from "@/components/InstallApp";
interface FormData {
username: string;
@@ -118,33 +119,42 @@ export default function Login({
</div>
<AccentSubmitButton
type="submit"
label="Login"
className=" w-full text-center"
size="full"
intent="accent"
data-testid="submit-login-button"
loading={submitLoader}
/>
>
Login
</AccentSubmitButton>
{availableLogins.buttonAuths.length > 0 ? (
<div className="divider my-1">OR</div>
<div className="divider my-1">Or continue with</div>
) : undefined}
</>
);
}
}
function displayLoginExternalButton() {
const Buttons: any = [];
availableLogins.buttonAuths.forEach((value, index) => {
Buttons.push(
<React.Fragment key={index}>
{index !== 0 ? <div className="divider my-1">OR</div> : undefined}
{index !== 0 ? <div className="divider my-1">Or</div> : undefined}
<AccentSubmitButton
type="button"
onClick={() => loginUserButton(value.method)}
label={`Sign in with ${value.name}`}
className=" w-full text-center"
size="full"
intent="secondary"
loading={submitLoader}
/>
>
{value.name.toLowerCase() === "google" ||
value.name.toLowerCase() === "apple" ? (
<i className={"bi-" + value.name.toLowerCase()}></i>
) : undefined}
{value.name}
</AccentSubmitButton>
</React.Fragment>
);
});
@@ -178,15 +188,9 @@ export default function Login({
{displayLoginCredential()}
{displayLoginExternalButton()}
{displayRegistration()}
<Link
href="https://docs.linkwarden.app/getting-started/pwa-installation"
className="underline text-center"
target="_blank"
>
You can install Linkwarden onto your device
</Link>
</div>
</form>
<InstallApp />
</CenteredForm>
);
}
pages/public/collections/[id].tsx
+4 -3
View File
@@ -12,7 +12,7 @@ import Head from "next/head";
import useLinks from "@/hooks/useLinks";
import useLinkStore from "@/store/links";
import ProfilePhoto from "@/components/ProfilePhoto";
import ToggleDarkMode from "@/components/ToggleDarkMode";
import ToggleDarkMode from "@/components/ui/ToggleDarkMode";
import getPublicUserData from "@/lib/client/getPublicUserData";
import Image from "next/image";
import Link from "next/link";
@@ -118,8 +118,9 @@ export default function PublicCollections() {
<div
className="h-96"
style={{
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
>
{collection ? (
pages/register.tsx
+61 -6
View File
@@ -1,11 +1,13 @@
import Link from "next/link";
import { useState, FormEvent } from "react";
import React, { useState, FormEvent } from "react";
import { toast } from "react-hot-toast";
import { signIn } from "next-auth/react";
import { useRouter } from "next/router";
import CenteredForm from "@/layouts/CenteredForm";
import TextInput from "@/components/TextInput";
import AccentSubmitButton from "@/components/AccentSubmitButton";
import AccentSubmitButton from "@/components/ui/Button";
import { getLogins } from "./api/v1/logins";
import { InferGetServerSidePropsType } from "next";
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
@@ -17,7 +19,14 @@ type FormData = {
passwordConfirmation: string;
};
export default function Register() {
export const getServerSideProps = () => {
const availableLogins = getLogins();
return { props: { availableLogins } };
};
export default function Register({
availableLogins,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
const [submitLoader, setSubmitLoader] = useState(false);
const router = useRouter();
@@ -98,6 +107,44 @@ export default function Register() {
}
}
async function loginUserButton(method: string) {
setSubmitLoader(true);
const load = toast.loading("Authenticating...");
const res = await signIn(method, {});
toast.dismiss(load);
setSubmitLoader(false);
}
function displayLoginExternalButton() {
const Buttons: any = [];
availableLogins.buttonAuths.forEach((value, index) => {
Buttons.push(
<React.Fragment key={index}>
{index !== 0 ? <div className="divider my-1">Or</div> : undefined}
<AccentSubmitButton
type="button"
onClick={() => loginUserButton(value.method)}
size="full"
intent="secondary"
loading={submitLoader}
>
{value.name.toLowerCase() === "google" ||
value.name.toLowerCase() === "apple" ? (
<i className={"bi-" + value.name.toLowerCase()}></i>
) : undefined}
{value.name}
</AccentSubmitButton>
</React.Fragment>
);
});
return Buttons;
}
return (
<CenteredForm
text={
@@ -236,11 +283,19 @@ export default function Register() {
<AccentSubmitButton
type="submit"
label="Sign Up"
className="w-full"
loading={submitLoader}
intent="accent"
size="full"
data-testid="register-button"
/>
>
Sign Up
</AccentSubmitButton>
{availableLogins.buttonAuths.length > 0 ? (
<div className="divider my-1">Or continue with</div>
) : undefined}
{displayLoginExternalButton()}
<div className="flex items-baseline gap-1 justify-center">
<p className="w-fit text-neutral">Already have an account?</p>
<Link
pages/subscribe.tsx
+7 -5
View File
@@ -4,7 +4,7 @@ import { toast } from "react-hot-toast";
import { useRouter } from "next/router";
import CenteredForm from "@/layouts/CenteredForm";
import { Plan } from "@/types/global";
import AccentSubmitButton from "@/components/AccentSubmitButton";
import AccentSubmitButton from "@/components/ui/Button";
export default function Subscribe() {
const [submitLoader, setSubmitLoader] = useState(false);
@@ -70,7 +70,7 @@ export default function Subscribe() {
>
<p>Yearly</p>
</button>
<div className="absolute -top-3 -right-4 px-1 bg-red-500 text-sm text-white rounded-md rotate-[22deg]">
<div className="absolute -top-3 -right-4 px-1 bg-red-600 text-sm text-white rounded-md rotate-[22deg]">
25% Off
</div>
</div>
@@ -98,11 +98,13 @@ export default function Subscribe() {
<AccentSubmitButton
type="button"
label="Complete Subscription!"
className="w-full"
intent="accent"
size="full"
onClick={submit}
loading={submitLoader}
/>
>
Complete Subscription!
</AccentSubmitButton>
<div
onClick={() => signOut()}