vivy-agent/AnimeTV-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚩 (login) create login page

Browse Source
This commit is contained in:
Rafi Arrafif
2025-07-14 14:52:50 +07:00
parent 9eb7165023
commit 2770f10747
7 changed files with 108 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/(clear)/login/page.tsx
View File

@ -1,14 +1,19 @@
import LoginCard from "@/widgets/login/card";
import LoginCard from "@/widgets/login/loginCard/Index";
import React from "react";
const page = () => {
return (
<div className="relative w-screen h-screen bg-red-500 bg-[url('/assets/pages/login/a78h12j89a01n.jpg')] bg-cover bg-center">
<div className="fixed z-0 w-screen h-screen backdrop-blur-xl bg-black bg-opacity-70" />
<div className="fixed z-10 w-screen h-screen flex justify-center items-center">
<LoginCard />
<>
{/* Fixed background overlay */}
<div className="relative w-screen h-screen bg-red-500 bg-[url('/assets/pages/login/a78h12j89a01n.jpg')] bg-cover bg-center">
{/* Fixed background overlay */}
<div className="fixed z-0 w-screen h-screen backdrop-blur-xl bg-black bg-opacity-70" />
{/* Login card centered on the screen */}
<div className="fixed z-10 w-screen h-screen flex justify-center items-center">
<LoginCard />
</div>
</div>
</div>
</>
);
};

5
bun.lock
View File

@ -5,6 +5,7 @@
"name": "frontend",
"dependencies": {
"@heroui/react": "^2.7.11",
"@iconify/react": "^6.0.0",
"commitizen": "^4.3.1",
"cz-emoji": "^1.3.2-canary.2",
"framer-motion": "^12.23.3",
@ -238,6 +239,10 @@
"@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
"@iconify/react": ["@iconify/react@6.0.0", "", { "dependencies": { "@iconify/types": "^2.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-eqNscABVZS8eCpZLU/L5F5UokMS9mnCf56iS1nM9YYHdH8ZxqZL9zyjSwW60IOQFsXZkilbBiv+1paMXBhSQnw=="],
"@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.0" }, "os": "darwin", "cpu": "arm64" }, "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg=="],
"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.0" }, "os": "darwin", "cpu": "x64" }, "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA=="],

1
package.json
View File

@ -12,6 +12,7 @@
},
"dependencies": {
"@heroui/react": "^2.7.11",
"@iconify/react": "^6.0.0",
"commitizen": "^4.3.1",
"cz-emoji": "^1.3.2-canary.2",
"framer-motion": "^12.23.3",

32
widgets/login/card.tsx
View File

@ -1,32 +0,0 @@
"use client";
import React from "react";
import { Button, Card, Divider, input, Input } from "@heroui/react";
const LoginCard = () => {
return (
<Card className="px-8 py-12">
<h1 className="text-3xl font-light text-center">Welcome Back</h1>
<Input
className="w-[420px] mt-8"
label="Email"
type="email"
variant="bordered"
classNames={{
input: "text-md font-light pt-4",
inputWrapper: "flex gap-10",
}}
/>
<Button className="mt-4" color="primary">
Sign In
</Button>
<div className="flex w-full items-center mt-6">
<Divider className="flex-1" />
<span className="px-2 text-neutral-500 text-sm">or</span>
<Divider className="flex-1" />
</div>
</Card>
);
};
export default LoginCard;

29
widgets/login/loginCard/ContinueWithProviders.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Button } from "@heroui/react";
import { Icon } from "@iconify/react";
import React from "react";
const ContinueWithProviders = () => {
return (
<div className="w-full flex flex-col gap-2 mt-4">
<Button
className="w-full hover:bg-neutral-800"
variant="bordered"
startContent={<Icon icon="logos:google-icon" />}
>
Continue with Google
</Button>
<Button
className="w-full hover:bg-neutral-800"
variant="bordered"
startContent={<Icon icon="logos:discord-icon" />}
>
Continue with Discord
</Button>
<Button className="w-full" variant="ghost" isDisabled>
Other login options will come soon
</Button>
</div>
);
};
export default ContinueWithProviders;

25
widgets/login/loginCard/EmailForm.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Button, Form, Input } from "@heroui/react";
import React from "react";
const EmailForm = () => {
return (
// Form component to handle email input
<Form className="mt-12 sm:mt-8">
<Input
className="w-full sm:w-[420px] "
label="Email"
type="email"
variant="bordered"
classNames={{
input: "text-md font-light pt-4",
inputWrapper: "flex gap-10",
}}
/>
<Button className="mt-2 w-full" color="primary">
Continue
</Button>
</Form>
);
};
export default EmailForm;

37
widgets/login/loginCard/Index.tsx Normal file
View File

@ -0,0 +1,37 @@
"use client";
import { Card, Divider, Link } from "@heroui/react";
import React from "react";
import EmailForm from "./EmailForm";
import ContinueWithProviders from "./ContinueWithProviders";
const LoginCard = () => {
return (
<Card className="px-6 sm:px-8 py-12 sm:py-8 h-screen sm:h-auto w-screen sm:w-auto">
<h1 className="text-3xl font-light text-center">Welcome Back</h1>
{/* Email form */}
<EmailForm />
{/* Sign up link */}
<p className="text-center text-neutral-300 text-sm font-light mt-5">
Don't have an account?{" "}
<Link className="text-sm font-medium" href="/sign-up">
Sign Up
</Link>
</p>
{/* Divider between email form and third-party login options */}
<div className="flex w-full items-center mt-4">
<Divider className="flex-1" />
<span className="px-2 text-neutral-500 text-sm">or</span>
<Divider className="flex-1" />
</div>
{/* Buttons for third-party login options */}
<ContinueWithProviders />
</Card>
);
};
export default LoginCard;