diff --git a/front_end_portserver/src/components/Login/assets/LoginBg.svg b/front_end_portserver/src/components/Login/assets/LoginBg.svg new file mode 100644 index 0000000..451e0e8 --- /dev/null +++ b/front_end_portserver/src/components/Login/assets/LoginBg.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front_end_portserver/src/components/Login/assets/LogoSismedika.svg b/front_end_portserver/src/components/Login/assets/LogoSismedika.svg new file mode 100644 index 0000000..14f0de0 --- /dev/null +++ b/front_end_portserver/src/components/Login/assets/LogoSismedika.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/front_end_portserver/src/assets/eye-off.svg b/front_end_portserver/src/components/Login/assets/eye-off.svg similarity index 100% rename from front_end_portserver/src/assets/eye-off.svg rename to front_end_portserver/src/components/Login/assets/eye-off.svg diff --git a/front_end_portserver/src/assets/eye-on.svg b/front_end_portserver/src/components/Login/assets/eye-on.svg similarity index 100% rename from front_end_portserver/src/assets/eye-on.svg rename to front_end_portserver/src/components/Login/assets/eye-on.svg diff --git a/front_end_portserver/src/assets/lock-closed.svg b/front_end_portserver/src/components/Login/assets/lock-closed.svg similarity index 100% rename from front_end_portserver/src/assets/lock-closed.svg rename to front_end_portserver/src/components/Login/assets/lock-closed.svg diff --git a/front_end_portserver/src/assets/mail.svg b/front_end_portserver/src/components/Login/assets/mail.svg similarity index 100% rename from front_end_portserver/src/assets/mail.svg rename to front_end_portserver/src/components/Login/assets/mail.svg diff --git a/front_end_portserver/src/components/Login/loginComponents/Background.tsx b/front_end_portserver/src/components/Login/loginComponents/Background.tsx new file mode 100644 index 0000000..011e5af --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/Background.tsx @@ -0,0 +1,9 @@ +import loginBg from '@/components/Login/assets/LoginBg.svg' + +export const Background = ( +) => { + + return( + + ) +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/loginComponents/Button.tsx b/front_end_portserver/src/components/Login/loginComponents/Button.tsx new file mode 100644 index 0000000..3b78b81 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/Button.tsx @@ -0,0 +1,26 @@ +import { Button , buttonVariants } from "@/components/ui/button"; + +interface ButtonProps { + variant ?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'; + size ?: 'default' | 'sm' | 'lg' | 'icon' ; + label ?: string; + styling?: string; + +} + +export const Buttons = ( {...props}:ButtonProps )=> { + return ( + + ); + }; \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/loginComponents/Inputs.tsx b/front_end_portserver/src/components/Login/loginComponents/Inputs.tsx new file mode 100644 index 0000000..a9b13d9 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/Inputs.tsx @@ -0,0 +1,52 @@ +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { useState } from "react" + +import mail from "@/components/Login/assets/mail.svg" +import lock from "@/components/Login/assets/lock-closed.svg" +import eyeOff from "@/components/Login/assets/eye-off.svg" +import eyeOn from "@/components/Login/assets/eye-on.svg" + +export interface InputWithLabelProps { + labelValue ?: string; + // typeName ?: string; + placeHolderName ?: string; + togglePasswordVisibility ?:boolean; + type ?: 'password' | 'email'; + onClick ?: () => void; +} + +export const InputWithLabel = ({ + ...props +}:InputWithLabelProps) => { + + const [showPassword, setShowPassword] = useState(false); + + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + const srcIcon = props.type?.toLowerCase() === 'email' ? mail : props.type?.toLowerCase() === 'password' ? lock : ''; + + return ( +
+ +
+ + {(props.type === 'password') && ( + + )} + +
+
+ ) +} diff --git a/front_end_portserver/src/components/Login/loginComponents/LinkButton.tsx b/front_end_portserver/src/components/Login/loginComponents/LinkButton.tsx new file mode 100644 index 0000000..5013767 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/LinkButton.tsx @@ -0,0 +1,13 @@ +interface LinkBtnProps { + value ?: string; +} + +export const LinkBtn = ({ + ...props +}:LinkBtnProps ) => { + return ( +
+ {props.value} +
+ ) +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/loginComponents/LoginForm.tsx b/front_end_portserver/src/components/Login/loginComponents/LoginForm.tsx new file mode 100644 index 0000000..ad540c0 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/LoginForm.tsx @@ -0,0 +1,32 @@ +import { Background } from "./Background" +import { LogoSismedika } from "./Logo" +import { EmailInput, PasswordInput } from "../stories/Input.stories" +import { ForgetPasswordLink } from "../stories/Link.stories" +import { LoginTitle } from "../stories/Title.stories" +import { LoginButton } from "../stories/Button.stories" + +export const LoginForm = ( +) => { + + return( + <> +
+
+
+
+
+ +
+ + +
+ + +
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/loginComponents/Logo.tsx b/front_end_portserver/src/components/Login/loginComponents/Logo.tsx new file mode 100644 index 0000000..a9ce580 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/Logo.tsx @@ -0,0 +1,10 @@ + +import logoSismedika from '@/components/Login/assets/LogoSismedika.svg' + +export const LogoSismedika = ( +) => { + + return( + + ) +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/loginComponents/Title.tsx b/front_end_portserver/src/components/Login/loginComponents/Title.tsx new file mode 100644 index 0000000..c16f2a4 --- /dev/null +++ b/front_end_portserver/src/components/Login/loginComponents/Title.tsx @@ -0,0 +1,20 @@ +import { Label } from "@/components/ui/label" + + +interface TitleProps { + + value : string; + value2 ?: string; +} + +export const Title = ({ + ...props +}: TitleProps ) => { + return ( +
+ + +
+ + ) +} diff --git a/front_end_portserver/src/components/Login/stories/Background.stories.tsx b/front_end_portserver/src/components/Login/stories/Background.stories.tsx new file mode 100644 index 0000000..dc3d7fd --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/Background.stories.tsx @@ -0,0 +1,13 @@ +import { Background } from "../loginComponents/Background"; + +const meta = { + title: 'Component/Login/LoginBackground' +} + +export default meta; + +export const LoginBg= () => { + return( + + ) +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/stories/Button.stories.tsx b/front_end_portserver/src/components/Login/stories/Button.stories.tsx new file mode 100644 index 0000000..e6f678d --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/Button.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Buttons } from '../loginComponents/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Login/Button', + component: Buttons, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + args : { + + }, + argTypes: { + + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args + +export const LoginButton = (args:Story) => { + return( + + ) +} diff --git a/front_end_portserver/src/components/Login/stories/Input.stories.tsx b/front_end_portserver/src/components/Login/stories/Input.stories.tsx new file mode 100644 index 0000000..fae78e7 --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/Input.stories.tsx @@ -0,0 +1,73 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { InputWithLabel } from "../loginComponents/Inputs"; +import { boolean } from "zod"; + +const meta = { + title: "Component/Login/Input", + component: InputWithLabel, + tags: ['autodocs'], + + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + args: { + labelValue: "Label Name", + placeHolderName : "Place Holder Name", + }, + + argTypes: { + type: { + options: ['email', 'password'], + control: { type: 'radio' }, + }, + togglePasswordVisibility : {action : boolean}, + onClick: { action: 'clicked' } + }, + + + +} satisfies Meta + +export default meta; +type Story = StoryObj; + +// export const ArgumentEmailInput: Story = { +// args: { +// labelValue: "Email", +// typeName: "Email", +// placeHolderName: "Input your Email", +// }, +// }; + +// export const ArgumentPasswordInput: Story = { +// args:{ +// labelValue: "Password", +// typeName: "Password", +// placeHolderName: "Input your Password", +// togglePasswordVisibility: false, +// }, +// }; + +export const EmailInput = (args:Story) => { + return( + + ) +} + +export const PasswordInput = (args:Story) => { + return( + + ) +} diff --git a/front_end_portserver/src/components/Login/stories/Link.stories.tsx b/front_end_portserver/src/components/Login/stories/Link.stories.tsx new file mode 100644 index 0000000..6899b8a --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/Link.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { LinkBtn } from "../loginComponents/LinkButton"; + +const meta= { + title: 'Component/Login/LinkButton', + component: LinkBtn, + tags: ['autodocs'], + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + args:{ + value : "Forget password", + } + +}satisfies Meta + +export default meta; +type Story = StoryObj; + +export const ForgetPasswordLink = (args:Story) => { + return( + + ) +} + + \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/stories/LoginForm.stories.tsx b/front_end_portserver/src/components/Login/stories/LoginForm.stories.tsx new file mode 100644 index 0000000..7c29355 --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/LoginForm.stories.tsx @@ -0,0 +1,21 @@ +import { LoginForm } from "../loginComponents/LoginForm"; + +const meta = { + title: 'Component/Login/Forms', + tags: ['autodocs'], + component: LoginForm, + + args:{ + value: "value", + value2: "value2" + }, +}; + +export default meta; + +export const LoginForms = () => { + return( + + ) + +} \ No newline at end of file diff --git a/front_end_portserver/src/components/Login/stories/Title.stories.tsx b/front_end_portserver/src/components/Login/stories/Title.stories.tsx new file mode 100644 index 0000000..6ea12cf --- /dev/null +++ b/front_end_portserver/src/components/Login/stories/Title.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from "@storybook/react"; +import {Title} from "../loginComponents/Title"; + +const meta = { + title: 'Component/Login/Title', + component: Title, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + + argTypes:{ + + }, + args: { + value: 'value1', + value2: 'value2', + }, +}satisfies Meta + +export default meta; +type Story = StoryObj; + +export const LoginTitle = (args:Story) => { + return( + + ) +} +