Skip to content

Commit

Permalink
fix: login and carousel (#18)
Browse files Browse the repository at this point in the history 
Co-authored-by: mharrish7 <[email protected]>
  • Loading branch information
@vigneshd332 @mharrish7
vigneshd332 and mharrish7 authored Dec 12, 2023
1 parent c9cdb8f commit b9e2dbf
Show file tree
Hide file tree
Showing 17 changed files with 396 additions and 274 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
"react": "^18",
"react-dom": "^18",
"react-full-page": "^0.1.12",
"react-google-recaptcha": "^3.1.0",
"react-hot-toast": "^2.4.1",
"react-markdown": "^9.0.1",
"swiper": "^11.0.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-google-recaptcha": "^2.1.8",
"@typescript-eslint/eslint-plugin": "^6.8.0",
"@typescript-eslint/parser": "^6.8.0",
"autoprefixer": "^10",
Expand Down
13 changes: 1 addition & 12 deletions src/app/gallery/history.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
/* .carousel::before{
content: '';
position: absolute;
top: 0;
height: 20%;
width: 100%;
border-radius: 0% 0% 50% 50%;
background-color: white;
z-index: 20;
} */

.historyBG {
background: url('../../assets/images/historyBG.png');
background-size: cover;
Expand All @@ -25,7 +14,7 @@
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-image: radial-gradient(circle at center, transparent, #000 7%);
background-image: radial-gradient(circle at center, transparent, #000000e6 7%);
}

@media screen and (min-width: 768px) {
Expand Down
3 changes: 3 additions & 0 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { content } from '@/components/AboutCard/AboutContent.json';
import Toast from '@/components/Toast/Toast';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
Expand All @@ -16,6 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body className={inter.className + ' ' + 'bg-[#070B12]'}>
<div className="w-full min-h-screen bg-[#070B12]">{children}</div>
<Footer />
<Toast />
</body>
</html>
);
Expand Down
Binary file added src/assets/images/RegisteredButton.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 29 additions & 4 deletions src/components/AuthLayout/form.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
background-size: 100% 100%;
padding: 6rem;
font-family: 'Orbitron', sans-serif;
min-height: 70%;
min-height: 85%;
}

.signupFields {
Expand Down Expand Up @@ -66,6 +66,10 @@
clip-path: polygon(0 0, 100% 0, 100% 70%, 98% 90%, 2% 90%, 0% 70%);
}

.formInput:disabled {
background-color: grey;
}

.formRadioInputs {
display: flex;
align-items: center;
Expand Down Expand Up @@ -184,9 +188,7 @@ div.formInput {
cursor: pointer;
}

.signUpButton {
height: 2rem;
}


.resetFormContainer {
display: flex;
Expand Down Expand Up @@ -214,6 +216,12 @@ div.formInput {
font-weight: 600;
}

.signUpButton {
padding: 2rem;
width: 100%;
padding-bottom: 3.3rem;
}

@media screen and (max-width: 1300px) {
.formContainer {
max-width: 80%;
Expand All @@ -227,6 +235,23 @@ div.formInput {
.resetFormContainer {
padding: 1rem;
}

.signUpButton{
padding: 1rem;
padding-bottom: 2.2rem;
display: block;
transform-origin: 0 0;
}
.captcha{
transform: scale(0.6);
padding: 0;
margin: 0;
position: absolute;
margin-top: 5rem;
}
.extraSpace{
margin-bottom: 4rem;
}
}

@media screen and (max-width: 500px) {
Expand Down
12 changes: 7 additions & 5 deletions src/components/AuthLayout/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ export function FormInput({
wrapperClassName,
label,
inputType,
disabled,
initialValue,
}: FormProps) {
return (
<div className={`w-full flex flex-col justify-center mb-6 ${wrapperClassName}`}>
Expand All @@ -15,7 +17,9 @@ export function FormInput({
<input
className={`${styles.formInput} ${inputClassName}`}
onChange={onChange}
disabled={disabled}
name={name}
value={initialValue}
type={inputType ?? 'text'}
/>
</div>
Expand All @@ -30,6 +34,7 @@ export function FormSelect({
wrapperClassName,
label,
options,
disabled,
}: FormProps) {
return (
<div className={`w-full flex flex-col justify-center mb-6 ${wrapperClassName}`}>
Expand All @@ -39,12 +44,9 @@ export function FormSelect({
className={`${styles.formInput} ${inputClassName}`}
onChange={onChange}
value={initialValue}
disabled={disabled}
>
{options?.map((option, index) => (
<option key={index} >
{option}
</option>
))}
{options?.map((option, index) => <option key={index}>{option}</option>)}
</select>
</div>
</div>
Expand Down
121 changes: 28 additions & 93 deletions src/components/AuthLayout/login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,34 @@
/* eslint-disable */
/* eslint-disable camelcase */
/* eslint-disable @typescript-eslint/ban-ts-comment */
'use client';

import React from 'react';
// import Modal from "react-modal";
import { useCallback, useState } from 'react';
import styles from './form.module.css';
// import DAuthLogin from '@/utils/dauthlogin';
// import { Recaptcha } from "../../ReCaptcha";
// import DAuthLogin from "../../DauthLogin/DauthLogin";
import { FormInput } from './input';
import Link from 'next/link';
import { useCallback, useState, useContext } from 'react';
import { UserApi } from '../../../fest-web-client/client/src';
import { authConfig } from '@/utils/ApiConfig';
import { useRouter } from 'next/navigation';
import { userContext } from '@/contexts/UserContext';
import { DAUTH_CLIENT_ID, DAUTH_REDIRECT_URI, API_URL } from '@/config/config';
import { DAUTH_CLIENT_ID, DAUTH_REDIRECT_URI } from '@/config/config';
import toast from 'react-hot-toast';

enum AuthStatusEnum {
PRE,
START,
WAITING,
ACCEPTED,
REJECTED,
AUTH,
ERROR,
interface DauthQueryParameters {
[key: string]: string;
}

export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
const [loginForm, setLoginForm] = React.useState<LoginFormRequest>({
const [loginForm, setLoginForm] = useState<LoginFormRequest>({
userEmail: '',
userPassword: '',
});

const isMobile = false;

const userApi = new UserApi(authConfig);
const [authStatus, setAuthStatus] = useState(AuthStatusEnum.PRE);
const { setuserID, setIsLoggedIn } = useContext(userContext);

const router = useRouter();

const generateDauthAuthorizeUrl = () => {
const dauthAuthorizeURL = new URL('https://auth.delta.nitt.edu/authorize');

const dauthQueryParameters = {
const dauthQueryParameters: DauthQueryParameters = {
client_id: DAUTH_CLIENT_ID,
redirect_uri: DAUTH_REDIRECT_URI,
response_type: 'code',
Expand All @@ -53,9 +38,9 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
nonce: '',
};

const appendQueryParametersToURL = (url: URL, queryParams: Object) => {
Object.keys(queryParams).forEach(query => {
url.searchParams.append(query, (queryParams as any)[query]);
const appendQueryParametersToURL = (url: URL, queryParams: DauthQueryParameters) => {
Object.keys(queryParams).forEach((query: string) => {
url.searchParams.append(query, queryParams[query]);
});
};

Expand All @@ -66,22 +51,24 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {

const sendAuthCodeToServer = useCallback(async (code: string) => {
try {
setAuthStatus(AuthStatusEnum.WAITING);
//backend url
const authApi = new UserApi(authConfig);
authApi
.dAuthUserLogin(code)
.then(res => console.log(res))
.catch(e => console.log(e));
//@ts-ignore
.then(res => {
// @ts-ignore-next-line
localStorage.setItem('token', res.message);
toast.success('Logged In Successfully');
router.push('/home');
})
.catch(e => toast.error(e.message));
} catch (err) {
console.log(err);
setAuthStatus(AuthStatusEnum.ERROR);
}
}, []);

const handleLogin = useCallback(() => {
try {
setAuthStatus(AuthStatusEnum.WAITING);
const authApi = new UserApi(authConfig);
authApi
.authUserLogin({
Expand All @@ -90,14 +77,16 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
user_password: loginForm.userPassword,
})
.then(res => {
console.log('successfully logged In');
// @ts-ignore-next-line
localStorage.setItem('token', res.message);
toast.success('Logged In Successfully');
router.push('/home');
})
.catch(e => console.log(e));
.catch(e => toast.error(e.message));
} catch (err) {
console.log(err);
setAuthStatus(AuthStatusEnum.ERROR);
}
}, [loginForm]);
}, [loginForm, router]);

const BASE_URL = typeof window !== 'undefined' ? window.location.origin : null;

Expand All @@ -108,10 +97,7 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
}
const { data } = event;
if (data.source === 'dauth-login-callback') {
if (!data.code) {
setAuthStatus(AuthStatusEnum.REJECTED);
} else {
setAuthStatus(AuthStatusEnum.ACCEPTED);
if (data.code) {
sendAuthCodeToServer(data.code);
}
}
Expand All @@ -138,63 +124,23 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
} else {
windowObjectReference.focus();
}
setAuthStatus(AuthStatusEnum.WAITING);

window.addEventListener('message', receiveMessage, false);

setPreviousUrl(url);
},
[previousUrl, receiveMessage, windowObjectReference],
[previousUrl, receiveMessage, windowObjectReference, isMobile],
);

const generateDauthStringAndOpenUrl = useCallback(() => {
const dauthURL = generateDauthAuthorizeUrl();
openSignInWindow(dauthURL.toString(), 'dauthURL');
setAuthStatus(AuthStatusEnum.START);
}, [openSignInWindow]);

// const [modalIsOpen, setIsOpen] = React.useState(false);
// const [forgotPasswordEmail, setForgotPasswordEmail] = React.useState("");
// const [forgotPasswordRecaptcha, setForgotPasswordRecaptcha] =
// React.useState("");

// const handleRecaptcha = (_: string, value: string) => {
// setForgotPasswordRecaptcha(value);
// };

//const router = useRouter();

const handleFormChange = (field: string, value: string) => {
setLoginForm({ ...loginForm, [field]: value });
};

// const handleForgotPassword = () => {
// if (!forgotPasswordRecaptcha) {
// // TODO: customErrorToast("Please verify that you are not a robot");
// return;
// }
// fetch(`${BACKEND_URL}/auth/sendPasswordResetLink`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({
// email: forgotPasswordEmail,
// recaptcha_code: forgotPasswordRecaptcha,
// }),
// })
// .then((res) => res.json())
// .then((data) => {
// if (data.status_code === 200) {
// customSuccessToast(
// "Password reset link sent to your email"
// );
// setForgotPasswordEmail("");
// } else customErrorToast(data.message);
// setIsOpen(false);
// });
// };

const handleFormSubmit = () => {
if (!loginForm.userPassword) console.log('Please enter your password');
else {
Expand All @@ -206,15 +152,6 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
<>
<div className={styles.formContainer}>
<div className={styles.formFields}>
{/* <div className={styles.formField}>
<div className={styles.formLabel}>EMAIL *</div>
<input
className={styles.formInput}
onChange={(e) => {
handleFormChange("user_email", e.target.value);
}}
/>
</div> */}
<FormInput
label="Email *"
name="email"
Expand All @@ -232,8 +169,6 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
}}
/>
</div>
{loginForm.userEmail}
{loginForm.userPassword}
<div className={styles.formFieldExtras}>
<div
className={styles.forgotPassword}
Expand Down
Loading

0 comments on commit b9e2dbf

Please sign in to comment.