Skip to content

Commit 333bd65

Browse files
lazycoder1lazycoder1
authored
Merge pull request #104 from Vivekkheni/login_register_vivek
set login register
2 parents 9fbb35f + 1ea6eef commit 333bd65

File tree

12 files changed

+484
-17
lines changed

12 files changed

+484
-17
lines changed

‎package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"react-chartjs-2": "^5.2.0",
3333
"react-dom": "18.2.0",
3434
"react-ga4": "^2.1.0",
35+
"react-google-login": "^5.2.2",
3536
"react-indiana-drag-scroll": "^2.2.0",
3637
"react-loading-skeleton-2": "^1.0.1-1",
3738
"react-modern-drawer": "^1.2.0",

‎public/images/github.png‎

315 Bytes
Loading

‎public/images/google.png‎

588 Bytes
Loading

‎public/images/logo.png‎

2.8 KB
Loading

‎src/components/common/table/Table.tsx‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,37 @@ export interface fee {
4444

4545
function Table(props: tableDataT) {
4646
const { rows, columns, caption, onRowClick, hideHeader } = props;
47+
const [sortedRows, setSortedRows] = useState(rows);
48+
const [sortOrder, setSortOrder] = useState("asc");
4749
const width = useWidth();
4850

4951
let skeletonCards = Array(5).fill(0);
52+
const convertAgoToNumber = (ago: string): number => {
53+
if (ago.includes("an")) return 1;
54+
const [value, unit] = ago.split(" ");
55+
switch (unit) {
56+
case "hour":
57+
case "hours":
58+
return parseInt(value);
59+
default:
60+
return Number.MAX_SAFE_INTEGER;
61+
}
62+
}
63+
const sortRowsAscending = (rows: tableDataT['rows']): typeof rows => {
64+
return [...rows].sort((a, b) => convertAgoToNumber(a.ago!) - convertAgoToNumber(b.ago!));
65+
}
66+
const sortRowsDescending = (rows: tableDataT['rows']): typeof rows => {
67+
return [...rows].sort((a, b) => convertAgoToNumber(b.ago!) - convertAgoToNumber(a.ago!));
68+
}
69+
const handleSort = () => {
70+
const data = sortOrder === "asc" ? sortRowsAscending(sortedRows) : sortRowsDescending(sortedRows);
71+
setSortedRows(data);
72+
setSortOrder(prevOrder => prevOrder === "asc" ? "desc" : "asc");
73+
};
74+
75+
useEffect(() => {
76+
setSortedRows(rows);
77+
}, [rows]);
5078
return (
5179
<div className="">
5280
{!hideHeader && caption?.text && <Caption icon={caption?.icon!} text={caption?.text}>
@@ -70,6 +98,7 @@ function Table(props: tableDataT) {
7098
className={`flex items-center gap-2.5 ${
7199
columns.length <= 3 ? 'group-last:justify-end' : ''
72100
}`}
101+
onClick={() => name === 'Age' && handleSort()}
73102
>
74103
<span>{name}</span>
75104
{name === 'Age' ? sort && <img src="/images/span.svg" alt="" /> : null}
@@ -95,7 +124,7 @@ function Table(props: tableDataT) {
95124
</tbody>
96125
) : (
97126
<tbody>
98-
{rows?.map(({ ago, fee, sender, target, token, userOps, status, count, poweredBy }, index) => {
127+
{sortedRows?.map(({ ago, fee, sender, target, token, userOps, status, count, poweredBy }, index) => {
99128
return (
100129
<tr
101130
key={index}

‎src/components/global/minifooter.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import Copyright from './footer/Copyright';
3+
import Donations from './footer/Donations';
4+
5+
const MiniFooter = () => {
6+
const handleCopyClick = () => {
7+
const textToCopy: any = '❤ Donations: 0x37b415...C8392f';
8+
navigator.clipboard
9+
.writeText(textToCopy)
10+
.then(() => {
11+
alert('Copied to clipboard!!');
12+
})
13+
.catch(() => {
14+
alert('Failed to copy!!');
15+
});
16+
};
17+
return (
18+
<>
19+
<footer className="bg-dark-600 py-8 md:py-12 text-white">
20+
<div className="container flex flex-col gap-8 md:gap-12">
21+
<div className=" flex md:flex-row flex-col md:justify-between md:items-center">
22+
<div className="flex items-center gap-1 md:ml-0 -ml-3"></div>
23+
</div>
24+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
25+
<div>
26+
<div className="mb-6"></div>
27+
<p className="text-sm"></p>
28+
</div>
29+
</div>
30+
<div className="flex flex-wrap gap-3 md:gap-10 justify-between ">
31+
<Copyright />
32+
<Donations />
33+
</div>
34+
</div>
35+
</footer>
36+
</>
37+
);
38+
};
39+
40+
export default MiniFooter;

‎src/pages/login.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { ReactElement, useEffect } from 'react';
2+
import Layout from '@/components/global/Layout';
3+
import { useConfig } from '@/context/config';
4+
import TopPaymasters from '@/views/topPaymasters/TopPaymasters';
5+
import { useRouter } from 'next/router';
6+
import { getNetworkParam } from '@/components/common/utils';
7+
import ReactGA from 'react-ga4';
8+
import SEO from '@/components/common/SEO';
9+
import LoginComponent from '../views/login/login'
10+
11+
function Login() {
12+
const router = useRouter();
13+
14+
// useEffect(() => {
15+
// ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
16+
// }, []);
17+
18+
return (
19+
<div>
20+
<SEO/>
21+
{/* <TopPaymasters /> */}
22+
<LoginComponent/>
23+
</div>
24+
);
25+
}
26+
27+
export default Login;
28+
29+
Login.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;

‎src/pages/register.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { ReactElement, useEffect } from 'react';
2+
import Layout from '@/components/global/Layout';
3+
import { useConfig } from '@/context/config';
4+
import TopPaymasters from '@/views/topPaymasters/TopPaymasters';
5+
import { useRouter } from 'next/router';
6+
import { getNetworkParam } from '@/components/common/utils';
7+
import ReactGA from 'react-ga4';
8+
import SEO from '@/components/common/SEO';
9+
import RegisterComponent from '../views/register/register'
10+
11+
function Register() {
12+
const router = useRouter();
13+
14+
useEffect(() => {
15+
ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
16+
}, []);
17+
18+
return (
19+
<div>
20+
<SEO/>
21+
{/* <TopPaymasters /> */}
22+
<RegisterComponent/>
23+
</div>
24+
);
25+
}
26+
27+
export default Register;
28+
29+
Register.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;

‎src/views/login/login.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useState } from 'react';
2+
import Image from 'next/image';
3+
import logo from '../../../public/images/logo.png';
4+
import github from '../../../public/images/github.png';
5+
import Link from 'next/link';
6+
import GoogleLogin from 'react-google-login';
7+
import MiniFooter from '@/components/global/minifooter';
8+
9+
const LoginComponent = () => {
10+
const responseGoogleSuccess = (response: any) => {
11+
window.location.reload();
12+
console.log('Google login success:', response);
13+
};
14+
15+
const responseGoogleFailure = (error: any) => {
16+
console.error('Google login error:', error);
17+
};
18+
19+
const handleGithubLogin = async () => {
20+
try {
21+
window.location.href = `https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=user`;
22+
} catch (error) {
23+
console.error('Error initiating GitHub login:', error);
24+
}
25+
};
26+
27+
return (
28+
<div className="main-box bg-dark-600" style={{ height: 'auto !important', minHeight: '100vh' }}>
29+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
30+
<Image src={logo} alt="logo" className="mt-10 text-center" />
31+
<div className="whitebox bg-white rounded px-10 mt-11 py-5" style={{ height: '546px', width: '464px' }}>
32+
<p className="text-black text-xl font-weight-bold mt-4 text-center" style={{ fontSize: '1.4rem' }}>
33+
Login
34+
</p>
35+
<GoogleLogin
36+
clientId="YOUR_GOOGLE_CLIENT_ID"
37+
buttonText="LOGIN WITH GOOGLE"
38+
onSuccess={responseGoogleSuccess}
39+
onFailure={responseGoogleFailure}
40+
cookiePolicy={'single_host_origin'}
41+
className="box rounded py-2 mt-6 w-full gap-3"
42+
>
43+
<p className="text-black font-weight-bold">LOGIN WITH GOOGLE</p>
44+
</GoogleLogin>
45+
46+
<button
47+
onClick={handleGithubLogin}
48+
className="rounded border py-2 text-black font-weight-bold mt-2 w-full gap-3"
49+
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
50+
>
51+
<Image src={github} alt="logo" />
52+
<p className="text-black font-weight-bold" style={{ marginLeft: '17px' }}>
53+
LOGIN WITH GITHUB
54+
</p>
55+
</button>
56+
57+
<p className="text-black text-md font-weight-bold mt-5 text-center">or</p>
58+
<input
59+
type="text"
60+
className="form-control text-black bottom-border w-full mt-5 mt-lg-9"
61+
placeholder="Email"
62+
id="validationCustom01"
63+
required
64+
/>
65+
<input
66+
type="text"
67+
className="form-control text-black bottom-border w-full mt-5 mt-lg-9"
68+
placeholder="Password"
69+
id="validationCustom01"
70+
required
71+
/>
72+
<button className="text-white font-weight-bold text-center bg-dark-600 w-full rounded py-2 mt-8">LOGIN</button>
73+
<p className="text-black text-xl font-weight-bold mt-9 text-center" style={{ color: '#1976D2', fontSize: '14px' }}>
74+
Reset Password
75+
</p>
76+
<Link href="/register">
77+
<p className=" text-black text-xl font-weight-bold mt-5 text-center" style={{ fontSize: '14px' }}>
78+
No account? <span style={{ color: '#1976D2' }}>Create one</span>
79+
</p>
80+
</Link>
81+
<style>
82+
{`
83+
.bottom-border {
84+
border-left: none;
85+
border-right: none;
86+
border-top: none;
87+
border-radius: 0;
88+
border-bottom: 1px solid #000;
89+
}
90+
.bottom-border::placeholder {
91+
color: #000;
92+
} @media (max-width: 576px) {
93+
.main-box{
94+
height:auto !important;
95+
padding:0 30px !important;
96+
}
97+
.whitebox{
98+
width:auto !important;
99+
}
100+
.footer{
101+
margin-top:125px;
102+
}
103+
}
104+
@media (min-width: 576px) and (max-width: 768px) {
105+
.whitebox{
106+
width:auto !important;
107+
}
108+
.main-box{
109+
height:auto !important;
110+
}
111+
}
112+
@media (min-width: 768px) and (max-width: 1700px) {
113+
.whitebox{
114+
width:auto !important;
115+
}
116+
}
117+
.whitebox button{
118+
justify-content:center
119+
}
120+
.box{
121+
border:1px solid #e5e7eb !important;
122+
box-shadow:none !important;
123+
border-radius: 5px !important;
124+
}
125+
`}
126+
</style>
127+
</div>
128+
</div>
129+
<MiniFooter />
130+
</div>
131+
);
132+
};
133+
export default LoginComponent;

0 commit comments

Comments
 (0)