Hafid Nur
0c7887268c
* feat(backoffice): create a boilerplate page for Hackathon dashboard - Create an empty page for Hackathon dashboard - Comment out and hide the existing backoffice sidebar * feat(backoffice): Create a nested/dropdown sidebar list - Create a dropdown sidebar list - Show back the old navigation and group them - Make the sidebar responsive for mobile view * test datatable with mock data * base UI for Hackathon backoffice TODO: - Organize table schema for users, teams, and submissions management - Create API Contract for additional back-end endpoint * feat(hackathon): draft data table column & API Contract * update endpoint * feat(backoffice): update page hackathon user management - update data table component - update filtering & pagination - add modal display to edit and add user - hide notification icon in backoffice wrapper * feat(backoffice): add API contract for hackathon users * feat(backoffice): little adjustment in hackathon users management UI and API contract * feat(backoffice): update hackathon team management page - add modal for manage team, add new team, and view project submission - reorganize the table column and data table * feat(backoffice): add searchable city filter - add component for city filter - apply to user management and team management pages * feat(backoffice): improve hackathon team modal UI and add API contract - Add feature to select city in team detail modal using CityFilterSelect component - Add feature to change team logo and banner - Add API contract documentation for hackathon teams in backoffice * feat(backoffice): authentication middleware, error pages, and 404 page * feat(backoffice): hackathon dashboard integration * feat(backoffice): users page integration - Get users data from API - Set up server-side pagination and match URL params - Hide filter that doesn't exist in back-end * feat(backoffice): teams page integration - Get teams data from API - Hide filter that doesn't exists in back-end - Simplify modal according to the back-end * feat(backoffice): submission page integration - Fetch submissions data from API - Move submission modal to hackathon-submissions page
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { FC, ReactElement } from 'react';
|
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
import { useLogin } from './_hooks/use-login';
|
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
|
|
|
export const Components: FC = (): ReactElement => {
|
|
const { form, onSubmit, isLoading } = useLogin();
|
|
|
|
return (
|
|
<div className="flex justify-center items-center min-h-screen">
|
|
<div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
|
|
<img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
|
|
<h1 className="text-primary-500 text-p1 font-semibold">
|
|
Welcome to IMPHNEN Backoffice
|
|
</h1>
|
|
<form onSubmit={onSubmit} className="flex flex-col gap-8">
|
|
<ControlledInputField
|
|
control={form.control}
|
|
label="Email"
|
|
placeholder="Masukkan Email"
|
|
type="email"
|
|
name="email"
|
|
size="lg"
|
|
className="w-full"
|
|
disabled={isLoading}
|
|
/>
|
|
<ControlledInputField
|
|
control={form.control}
|
|
label="Password"
|
|
placeholder="Masukkan Password"
|
|
type="password"
|
|
name="password"
|
|
size="lg"
|
|
className="w-full"
|
|
disabled={isLoading}
|
|
/>
|
|
<Button
|
|
disabled={
|
|
isLoading ||
|
|
form.formState.isValidating ||
|
|
!form.formState.isValid
|
|
}
|
|
type="submit"
|
|
size="md"
|
|
className="w-full"
|
|
>
|
|
{isLoading ? 'Loading...' : 'Login'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Components;
|