gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull Request branch dev-clone to main #1

Merged
gitea merged 429 commits from dev-clone into main 2024-12-23 09:31:34 +00:00
Conversation 0 Commits 429 Files Changed 142 +101 -96
2 changed files with 101 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4f4056eca5 - Show all commits

67
apps/frontend/src/routes/login/index.lazy.tsx
View File

@ -19,6 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useAuth from "@/hooks/useAuth"; import useAuth from "@/hooks/useAuth";
import { TbArrowNarrowRight } from "react-icons/tb"; import { TbArrowNarrowRight } from "react-icons/tb";
import logo from "@/assets/logos/amati-logo.png";
export const Route = createLazyFileRoute("/login/")({ export const Route = createLazyFileRoute("/login/")({
component: LoginPage, component: LoginPage,
@ -30,8 +31,8 @@ type FormSchema = {
}; };
const formSchema = z.object({ const formSchema = z.object({
username: z.string().min(1, "This field is required"), username: z.string().min(1, "Kolom ini wajib diisi"),
password: z.string().min(1, "This field is required"), password: z.string().min(1, "Kolom ini wajib diisi"),
}); });
export default function LoginPage() { export default function LoginPage() {
@ -97,24 +98,34 @@ export default function LoginPage() {
}; };
return ( return (
<div <div className="flex flex-col w-screen h-screen 3xl:max-w-screen-2xl 3xl:mx-auto 3xl:px-4 overflow-hidden">
className="flex items-center justify-center bg-contain bg-top lg:bg-right {/* Navbar */}
bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')] <nav className="flex w-full bg-transparent px-8 py-7 justify-between">
lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]" <div className="flex">
> <img src="../src/assets/logos/amati-logo.png" alt="Amati Logo" className="h-4 object-contain" />
<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
Amati
</div> </div>
<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> </nav>
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1> {/* Background shapes */}
<p className="text-sm mb-10 leading-[1.059rem]"> <div className="absolute inset-0 flex -z-20 overflow-hidden">
New to this app?{' '} <div className="relative h-[50vw] lg:h-screen z-0">
<a <div className="-translate-y-[calc(40vw+2rem)] lg:translate-y-0 w-full lg:-translate-x-[calc(10vh-60vw)]">
href="/register" <span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-800 flex rounded-3xl"></span>
className="text-blue-500 font-bold hover:text-blue-800" <span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-400 flex rounded-3xl"></span>
> <span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-300 flex rounded-3xl"></span>
Register now <span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-200 hidden lg:flex rounded-3xl"></span>
</div>
</div>
</div>
{/* Sign In form */}
<div className="flex w-full min-h-screen ml-0 lg:ml-28 3xl:ml-40 -mt-16 justify-center lg:justify-start items-center">
<Card className="w-full sm:w-3/5 lg:w-2/6 px-8 sm:p-0 h-auto bg-transparent border-none shadow-none">
<h1 className="mb-2 text-4xl font-bold leading-10 tracking-tighter">Sign In</h1>
<p className="text-sm mb-10 leading-4 text-muted-foreground">
Baru mengenal aplikasi ini?{' '}
<a href="/register" className="text-blue-600 font-bold hover:text-blue-800">
Daftar sekarang
</a> </a>
</p> </p>
<Form {...form}> <Form {...form}>
@ -129,7 +140,7 @@ export default function LoginPage() {
name="username" name="username"
render={({ field }) => ( render={({ field }) => (
<FormItem className="text-sm"> <FormItem className="text-sm">
<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel> <FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
<FormControl> <FormControl>
<Input <Input
placeholder="eg; user@mail.com" placeholder="eg; user@mail.com"
@ -146,7 +157,7 @@ export default function LoginPage() {
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem className="text-sm"> <FormItem className="text-sm">
<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel> <FormLabel className="font-semibold leading-4">Kata sandi</FormLabel>
<FormControl> <FormControl>
<Input <Input
type="password" type="password"
@ -161,23 +172,19 @@ export default function LoginPage() {
)} )}
/> />
<p className="text-sm"> <p className="text-sm">
<a <a href="/forgot-password" className="text-blue-600 font-bold hover:text-blue-800 leading-4">
href="/forgot-password" Lupa kata sandi?
className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
>
Forgot Password?
</a> </a>
</p> </p>
</div> </div>
<div className="flex justify-between mt-10"> <div className="flex mt-10">
<Button <Button
type="submit" type="submit"
disabled={loginMutation.isPending} disabled={loginMutation.isPending}
variant="default" variant="default"
className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] className="flex w-full justify-between bg-blue-600 text-white hover:bg-blue-700"
lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
> >
<span className="leading-[1.25rem]">Sign In</span> <span className="leading-5">Sign In</span>
<TbArrowNarrowRight className="h-5 w-5" /> <TbArrowNarrowRight className="h-5 w-5" />
</Button> </Button>
</div> </div>

16
apps/frontend/tailwind.config.js
View File

@ -72,15 +72,13 @@ module.exports = {
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out",
}, },
}, },
letterSpacing: { screens: {
tightest: '-.075em', 'sm': '640px',
tighter: '-.05em', 'md': '768px',
tight: '-.025em', 'lg': '1024px',
normal: '0', 'xl': '1280px',
wide: '.025em', '2xl': '1536px',
wider: '.05em', '3xl': '1980px',
widest: '.1em',
widest: '.25em',
}, },
}, },
plugins: [require("tailwindcss-animate")], plugins: [require("tailwindcss-animate")],