11/21/24, 1:23 PM Code

1 // "use client";
2 // import { motion } from "framer-motion";
3 // import Image from "next/image";
4 // import Link from "next/link";
5 // import { useEffect, useState } from "react";
6 // import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged }
from "firebase/auth";
7 // import { useRouter } from "next/navigation";
8 // import { auth } from "./firebaseConfig";
9
10 // const Signup = () => {
11 // const router = useRouter();
12 // const [user, setUser] = useState<any>(null);
13
14 // useEffect(() => {
15 // const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
16 // setUser(currentUser);
17 // });
18 // return () => unsubscribe();
19 // }, []);
20
21 // const handleGoogleSignIn = async () => {
22 // const provider = new GoogleAuthProvider();
23
24 // try {
25 // const result = await signInWithPopup(auth, provider);
26 // const loggedInUser = result.user;
27 // console.log("User Info:", loggedInUser);
28 // alert(`Welcome ${loggedInUser.displayName}`);
29 // } catch (error) {
30 // console.error("Error signing in with Google:", error);
31 // alert("Login failed, please try again.");
32 // }
33 // };
34
35 // const handleLogout = async () => {
36 // try {
37 // await signOut(auth);
38 // alert("You have successfully logged out.");
39 // setUser(null);
40 // router.push("/auth/signin");
41 // } catch (error) {
42 // console.error("Error logging out:", error);
43 // alert("Logout failed, please try again.");
44 // }
45 // };
46
47 // return (
48 // <>
49 // {/* <!-- ===== SignUp Form Start ===== --> */}
https://tarikjaber.github.io/Code-to-PDF/ 1/8
11/21/24, 1:23 PM Code

50 // <section className="pb-12.5 pt-32.5 lg:pb-25 lg:pt-45 xl:pb-30 xl:pt-

50">
51 // <div className="relative z-1 mx-auto max-w-c-1016 px-7.5 pb-7.5 pt-
10 lg:px-15 lg:pt-15 xl:px-20 xl:pt-20">
52 // <div className="absolute left-0 top-0 -z-1 h-2/3 w-full rounded-lg
bg-gradient-to-t from-transparent to-[#dee7ff47] dark:bg-gradient-to-t dark:to-
[#252A42]"></div>
53 // <div className="absolute bottom-17.5 left-0 -z-1 h-1/3 w-full">
54 // <Image
55 // src="/images/shape/shape-dotted-light.svg"
56 // alt="Dotted"
57 // className="dark:hidden"
58 // fill
59 // />
60 // <Image
61 // src="/images/shape/shape-dotted-dark.svg"
62 // alt="Dotted"
63 // className="hidden dark:block"
64 // fill
65 // />
66 // </div>
67
68 // <motion.div
69 // variants={{
70 // hidden: {
71 // opacity: 0,
72 // y: -20,
73 // },
74
75 // visible: {
76 // opacity: 1,
77 // y: 0,
78 // },
79 // }}
80 // initial="hidden"
81 // whileInView="visible"
82 // transition={{ duration: 1, delay: 0.1 }}
83 // viewport={{ once: true }}
84 // className="animate_top rounded-lg bg-white px-7.5 pt-7.5 shadow-
solid-8 dark:border dark:border-strokedark dark:bg-black xl:px-15 xl:pt-15"
85 // >
86 // <h2 className="mb-15 text-center text-3xl font-semibold text-
black dark:text-white xl:text-sectiontitle2">
87 // Create an Account
88 // </h2>
89
90
91 // <div className="flex items-center flex-col">
92 // <div className="flex items-center gap-8 w-1/2 justify-
center">
93 // <button

https://tarikjaber.github.io/Code-to-PDF/ 2/8
11/21/24, 1:23 PM Code

94 // aria-label="signup with google"

95 // className=" text-body-color dark:text-body-color-dark
dark:shadow-two mb-6 flex w-full items-center justify-center rounded-sm border
border-stroke bg-[#f8f8f8] px-6 py-3 text-base outline-none transition-all
duration-300 hover:border-primary hover:bg-primary/5 hover:text-primary
dark:border-transparent dark:bg-[#2C303B] dark:hover:border-primary
dark:hover:bg-primary/5 dark:hover:text-primary dark:hover:shadow-none"
96 // >
97 // <span className="mr-3">
98 // <svg
99 // width="20"
100 // height="20"
101 // viewBox="0 0 20 20"
102 // fill="none"
103 // xmlns="http://www.w3.org/2000/svg"
104 // >
105 // <g clipPath="url(#clip0_95:967)">
106 // <path
107 // d="M20.0001 10.2216C20.0122 9.53416 19.9397 8.84776
19.7844 8.17725H10.2042V11.8883H15.8277C15.7211 12.539 15.4814 13.1618 15.1229
13.7194C14.7644 14.2769 14.2946 14.7577 13.7416 15.1327L13.722 15.257L16.7512
17.5567L16.961 17.5772C18.8883 15.8328 19.9997 13.266 19.9997 10.2216"
108 // fill="#4285F4"
109 // />
110 // <path
111 // d="M10.2042 20.0001C12.9592 20.0001 15.2721 19.1111
16.9616 17.5778L13.7416 15.1332C12.88 15.7223 11.7235 16.1334 10.2042
16.1334C8.91385 16.126 7.65863 15.7206 6.61663 14.9747C5.57464 14.2287 4.79879
13.1802 4.39915 11.9778L4.27957 11.9878L1.12973 14.3766L1.08856 14.4888C1.93689
16.1457 3.23879 17.5387 4.84869 18.512C6.45859 19.4852 8.31301 20.0005 10.2046
20.0001"
112 // fill="#34A853"
113 // />
114 // <path
115 // d="M4.39911 11.9777C4.17592 11.3411 4.06075 10.673
4.05819 9.99996C4.0623 9.32799 4.17322 8.66075 4.38696 8.02225L4.38127
7.88968L1.19282 5.4624L1.08852 5.51101C0.372885 6.90343 0.00012207 8.4408
0.00012207 9.99987C0.00012207 11.5589 0.372885 13.0963 1.08852 14.4887L4.39911
11.9777Z"
116 // fill="#FBBC05"
117 // />
118 // <path
119 // d="M10.2042 3.86663C11.6663 3.84438 13.0804 4.37803
14.1498 5.35558L17.0296 2.59996C15.1826 0.901848 12.7366 -0.0298855 10.2042
-3.6784e-05C8.3126 -0.000477834 6.45819 0.514732 4.8483 1.48798C3.2384 2.46124
1.93649 3.85416 1.08813 5.51101L4.38775 8.02225C4.79132 6.82005 5.56974 5.77231
6.61327 5.02675C7.6568 4.28118 8.91279 3.87541 10.2042 3.86663Z"
120 // fill="#EB4335"
121 // />
122 // </g>
123 // <defs>

https://tarikjaber.github.io/Code-to-PDF/ 3/8
11/21/24, 1:23 PM Code

124 // <clipPath id="clip0_95:967">

125 // <rect width="20" height="20" fill="white" />
126 // </clipPath>
127 // </defs>
128 // </svg>
129 // </span>
130 // Signup with Google
131 // </button>
132
133
134 // </div>
135 // </div>
136
137
138
139
140
141 // <div className="mt-12.5 border-t border-stroke py-5 text-
center dark:border-strokedark">
142 // <p>
143 // Already have an account?{" "}
144 // <Link
145 // className="text-black hover:text-primary dark:text-white
dark:hover:text-primary"
146 // href="/auth/signin"
147 // >
148 // Sign In
149 // </Link>
150 // </p>
151 // </div>
152
153 // </motion.div>
154 // </div>
155 // </section>
156 // {/* <!-- ===== SignUp Form End ===== --> */}
157 // </>
158 // );
159 // };
160
161 // export default Signup;
162 "use client";
163 import { motion } from "framer-motion";
164 import Image from "next/image";
165 import Link from "next/link";
166 import { useEffect, useState } from "react";
167 import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged }
from "firebase/auth";
168 import { useRouter } from "next/navigation";
169 import { auth } from "./firebaseConfig";
170
171 const Signup = () => {

https://tarikjaber.github.io/Code-to-PDF/ 4/8
11/21/24, 1:23 PM Code

172 const router = useRouter();

173 const [user, setUser] = useState<any>(null);
174
175 useEffect(() => {
176 const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
177 setUser(currentUser);
178 });
179 return () => unsubscribe();
180 }, []);
181
182 const handleGoogleSignIn = async () => {
183 const provider = new GoogleAuthProvider();
184
185 try {
186 const result = await signInWithPopup(auth, provider);
187 const loggedInUser = result.user;
188 console.log("User Info:", loggedInUser);
189 alert(`Welcome ${loggedInUser.displayName}`);
190 } catch (error) {
191 console.error("Error signing in with Google:", error);
192 alert("Login failed, please try again.");
193 }
194 };
195
196 const handleLogout = async () => {
197 try {
198 await signOut(auth);
199 alert("You have successfully logged out.");
200 setUser(null);
201 router.push("/auth/signin");
202 } catch (error) {
203 console.error("Error logging out:", error);
204 alert("Logout failed, please try again.");
205 }
206 };
207
208 return (
209 <>
210 {/* <!-- ===== SignUp Form Start ===== --> */}
211 <section className="pb-12.5 pt-32.5 lg:pb-25 lg:pt-45 xl:pb-30 xl:pt-50">
212 <div className="relative z-1 mx-auto max-w-c-1016 px-7.5 pb-7.5 pt-10
lg:px-15 lg:pt-15 xl:px-20 xl:pt-20">
213 <div className="absolute left-0 top-0 -z-1 h-2/3 w-full rounded-lg
bg-gradient-to-t from-transparent to-[#dee7ff47] dark:bg-gradient-to-t dark:to-
[#252A42]"></div>
214 <div className="absolute bottom-17.5 left-0 -z-1 h-1/3 w-full">
215 <Image
216 src="/images/shape/shape-dotted-light.svg"
217 alt="Dotted"
218 className="dark:hidden"
219 fill

https://tarikjaber.github.io/Code-to-PDF/ 5/8
11/21/24, 1:23 PM Code

220 />
221 <Image
222 src="/images/shape/shape-dotted-dark.svg"
223 alt="Dotted"
224 className="hidden dark:block"
225 fill
226 />
227 </div>
228
229 <motion.div
230 variants={{
231 hidden: {
232 opacity: 0,
233 y: -20,
234 },
235
236 visible: {
237 opacity: 1,
238 y: 0,
239 },
240 }}
241 initial="hidden"
242 whileInView="visible"
243 transition={{ duration: 1, delay: 0.1 }}
244 viewport={{ once: true }}
245 className="animate_top rounded-lg bg-white px-7.5 pt-7.5 shadow-
solid-8 dark:border dark:border-strokedark dark:bg-black xl:px-15 xl:pt-15"
246 >
247 <h2 className="mb-15 text-center text-3xl font-semibold text-black
dark:text-white xl:text-sectiontitle2">
248 Create an Account
249 </h2>
250
251
252 <div className="flex items-center flex-col">
253 <div className="flex items-center gap-8 w-1/2 justify-
center">
254 <button
255 aria-label="signup with google"
256 className=" text-body-color dark:text-body-color-dark
dark:shadow-two mb-6 flex w-full items-center justify-center rounded-sm border
border-stroke bg-[#f8f8f8] px-6 py-3 text-base outline-none transition-all
duration-300 hover:border-primary hover:bg-primary/5 hover:text-primary
dark:border-transparent dark:bg-[#2C303B] dark:hover:border-primary
dark:hover:bg-primary/5 dark:hover:text-primary dark:hover:shadow-none"
257 >
258 <span className="mr-3">
259 <svg
260 width="20"
261 height="20"
262 viewBox="0 0 20 20"

https://tarikjaber.github.io/Code-to-PDF/ 6/8
11/21/24, 1:23 PM Code

263 fill="none"
264 xmlns="http://www.w3.org/2000/svg"
265 >
266 <g clipPath="url(#clip0_95:967)">
267 <path
268 d="M20.0001 10.2216C20.0122 9.53416 19.9397 8.84776
19.7844 8.17725H10.2042V11.8883H15.8277C15.7211 12.539 15.4814 13.1618 15.1229
13.7194C14.7644 14.2769 14.2946 14.7577 13.7416 15.1327L13.722 15.257L16.7512
17.5567L16.961 17.5772C18.8883 15.8328 19.9997 13.266 19.9997 10.2216"
269 fill="#4285F4"
270 />
271 <path
272 d="M10.2042 20.0001C12.9592 20.0001 15.2721 19.1111
16.9616 17.5778L13.7416 15.1332C12.88 15.7223 11.7235 16.1334 10.2042
16.1334C8.91385 16.126 7.65863 15.7206 6.61663 14.9747C5.57464 14.2287 4.79879
13.1802 4.39915 11.9778L4.27957 11.9878L1.12973 14.3766L1.08856 14.4888C1.93689
16.1457 3.23879 17.5387 4.84869 18.512C6.45859 19.4852 8.31301 20.0005 10.2046
20.0001"
273 fill="#34A853"
274 />
275 <path
276 d="M4.39911 11.9777C4.17592 11.3411 4.06075 10.673
4.05819 9.99996C4.0623 9.32799 4.17322 8.66075 4.38696 8.02225L4.38127
7.88968L1.19282 5.4624L1.08852 5.51101C0.372885 6.90343 0.00012207 8.4408
0.00012207 9.99987C0.00012207 11.5589 0.372885 13.0963 1.08852 14.4887L4.39911
11.9777Z"
277 fill="#FBBC05"
278 />
279 <path
280 d="M10.2042 3.86663C11.6663 3.84438 13.0804 4.37803
14.1498 5.35558L17.0296 2.59996C15.1826 0.901848 12.7366 -0.0298855 10.2042
-3.6784e-05C8.3126 -0.000477834 6.45819 0.514732 4.8483 1.48798C3.2384 2.46124
1.93649 3.85416 1.08813 5.51101L4.38775 8.02225C4.79132 6.82005 5.56974 5.77231
6.61327 5.02675C7.6568 4.28118 8.91279 3.87541 10.2042 3.86663Z"
281 fill="#EB4335"
282 />
283 </g>
284 <defs>
285 <clipPath id="clip0_95:967">
286 <rect width="20" height="20" fill="white" />
287 </clipPath>
288 </defs>
289 </svg>
290 </span>
291 Signup with Google
292 </button>
293
294
295 </div>
296 </div>
297

https://tarikjaber.github.io/Code-to-PDF/ 7/8
11/21/24, 1:23 PM Code

298
299
300
301
302 <div className="mt-12.5 border-t border-stroke py-5 text-center
dark:border-strokedark">
303 <p>
304 Already have an account?{" "}
305 <Link
306 className="text-black hover:text-primary dark:text-white
dark:hover:text-primary"
307 href="/auth/signin"
308 >
309 Sign In
310 </Link>
311 </p>
312 </div>
313
314 </motion.div>
315 </div>
316 </section>
317 {/* <!-- ===== SignUp Form End ===== --> */}
318 </>
319 );
320 };
321
322 export default Signup;
323

https://tarikjaber.github.io/Code-to-PDF/ 8/8