diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx new file mode 100644 index 0000000..80697f0 --- /dev/null +++ b/app/(auth)/login/page.tsx @@ -0,0 +1,111 @@ +import LoginForm from '@/components/auth/LoginForm'; +import IconFacebookCircle from '@/components/icon/icon-facebook-circle'; +import IconGoogle from '@/components/icon/icon-google'; +import IconInstagram from '@/components/icon/icon-instagram'; +import IconTwitter from '@/components/icon/icon-twitter'; +// import LanguageDropdown from '@/components/language-dropdown'; +import { Metadata } from 'next'; +import Link from 'next/link'; +import React from 'react'; + +export const metadata: Metadata = { + title: 'Login Cover', +}; + +const CoverLogin = () => { + return ( +
+
+ image +
+
+ image + image + image + image +
+
+
+
+ + Logo + +
+ Cover Image +
+
+
+
+ {/*
+ + Logo + + +
*/} +
+
+

Sign in

+

Enter your email and password to login

+
+ + + {/*
+ + or +
+
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+
+ Don't have an account ?  + + SIGN UP + +
*/} +
+

© {new Date().getFullYear()}.VRISTO All Rights Reserved.

+
+
+
+
+ ); +}; + +export default CoverLogin; diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx new file mode 100644 index 0000000..f580aca --- /dev/null +++ b/components/auth/LoginForm.tsx @@ -0,0 +1,113 @@ +'use client'; +import IconLockDots from '@/components/icon/icon-lock-dots'; +import IconMail from '@/components/icon/icon-mail'; +import { useRouter } from 'next/navigation'; +import React, { useState } from 'react'; + +const LoginForm = () => { + const router = useRouter(); + + // ✅ Single state for form values + const [formData, setFormData] = useState({ + email: '', + password: '', + }); + + // ✅ State for errors + const [errors, setErrors] = useState<{ email?: string; password?: string }>({}); + + // Generic handler for inputs + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + + // Clear error when user starts typing + setErrors((prev) => ({ + ...prev, + [name]: '', + })); + }; + + // Validation + const validate = () => { + const newErrors: { email?: string; password?: string } = {}; + if (!formData.email.trim()) { + newErrors.email = 'Email is required'; + } + if (!formData.password.trim()) { + newErrors.password = 'Password is required'; + } + return newErrors; + }; + + const submitForm = (e: React.FormEvent) => { + e.preventDefault(); + const validationErrors = validate(); + + if (Object.keys(validationErrors).length > 0) { + setErrors(validationErrors); + return; + } + + console.log('Form Data:', formData); + router.push('/'); + }; + + return ( +
+
+ +
+ + + + +
+ {errors.email && ( +

{errors.email}

+ )} +
+ +
+ +
+ + + + +
+ {errors.password && ( +

{errors.password}

+ )} +
+ + +
+ ); +}; + +export default LoginForm; diff --git a/public/assets/images/auth/bg-gradient.png b/public/assets/images/auth/bg-gradient.png new file mode 100644 index 0000000..feb32ef Binary files /dev/null and b/public/assets/images/auth/bg-gradient.png differ diff --git a/public/assets/images/auth/coming-soon-cover.svg b/public/assets/images/auth/coming-soon-cover.svg new file mode 100644 index 0000000..25e2f21 --- /dev/null +++ b/public/assets/images/auth/coming-soon-cover.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/coming-soon-object1.png b/public/assets/images/auth/coming-soon-object1.png new file mode 100644 index 0000000..f954686 Binary files /dev/null and b/public/assets/images/auth/coming-soon-object1.png differ diff --git a/public/assets/images/auth/coming-soon-object2.png b/public/assets/images/auth/coming-soon-object2.png new file mode 100644 index 0000000..ab308e8 Binary files /dev/null and b/public/assets/images/auth/coming-soon-object2.png differ diff --git a/public/assets/images/auth/coming-soon-object3.png b/public/assets/images/auth/coming-soon-object3.png new file mode 100644 index 0000000..9636045 Binary files /dev/null and b/public/assets/images/auth/coming-soon-object3.png differ diff --git a/public/assets/images/auth/contact-us.svg b/public/assets/images/auth/contact-us.svg new file mode 100644 index 0000000..cf51aba --- /dev/null +++ b/public/assets/images/auth/contact-us.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/login.svg b/public/assets/images/auth/login.svg new file mode 100644 index 0000000..27ac1f9 --- /dev/null +++ b/public/assets/images/auth/login.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/logo-white.svg b/public/assets/images/auth/logo-white.svg new file mode 100644 index 0000000..76f8a77 --- /dev/null +++ b/public/assets/images/auth/logo-white.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/map.png b/public/assets/images/auth/map.png new file mode 100644 index 0000000..40380c8 Binary files /dev/null and b/public/assets/images/auth/map.png differ diff --git a/public/assets/images/auth/polygon-object.svg b/public/assets/images/auth/polygon-object.svg new file mode 100644 index 0000000..5595db6 --- /dev/null +++ b/public/assets/images/auth/polygon-object.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/auth/register.svg b/public/assets/images/auth/register.svg new file mode 100644 index 0000000..6cfb58f --- /dev/null +++ b/public/assets/images/auth/register.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/reset-password.svg b/public/assets/images/auth/reset-password.svg new file mode 100644 index 0000000..374cd2c --- /dev/null +++ b/public/assets/images/auth/reset-password.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/unlock.svg b/public/assets/images/auth/unlock.svg new file mode 100644 index 0000000..080b047 --- /dev/null +++ b/public/assets/images/auth/unlock.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/auth/user.png b/public/assets/images/auth/user.png new file mode 100644 index 0000000..16722e3 Binary files /dev/null and b/public/assets/images/auth/user.png differ