New Fancy profile page

TheBozzz34 · Mar 13, 2024 · 45816d9 · 45816d9
1 parent 341ac11
commit 45816d9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 42 deletions.
diff --git a/firebase.js → firebase.ts b/firebase.js → firebase.ts
@@ -1,7 +1,8 @@
-import { initializeApp } from "firebase/app"
-import { getAuth } from "firebase/auth"
-import { GoogleAuthProvider } from "firebase/auth"
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
 
+
+// Public API keys
 const firebaseConfig = {
   apiKey: "AIzaSyAnl6q3ShBcwuegMjizW-T7rseUyneZs2s",
   authDomain: "scoreconnect-a8d83.firebaseapp.com",
@@ -10,10 +11,10 @@ const firebaseConfig = {
   messagingSenderId: "310270854979",
   appId: "1:310270854979:web:d66ac88153a6f2023951f6",
   measurementId: "G-G3GH38QDFZ",
-}
+};
 
 // Initialize Firebase
-const app = initializeApp(firebaseConfig) // Initialize Firebase Authentication and get a reference to the service
-export const auth = getAuth(app)
-export const provider = new GoogleAuthProvider()
-export default app
+const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider();
+export default app;
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -2,6 +2,8 @@ import { signInWithPopup } from "firebase/auth"
 import Head from "next/head"
 import { useRouter } from "next/navigation"
 import { auth, provider } from "../firebase"
+import Image from 'next/image'
+import chromePic from '../public/chrome.png'
 
 export default function Login() {
   const router = useRouter()
@@ -11,11 +13,6 @@ export default function Login() {
   const signIn = () => {
     signInWithPopup(auth, provider)
       .then((result) => {
-        // This gives you a Google Access Token. You can use it to access the Google API.
-        // const credential = GoogleAuthProvider.credentialFromResult(result);
-        // const token = credential.accessToken;
-        // The signed-in user info.
-
         const user = result.user
 
         const email = user.email
@@ -55,15 +52,16 @@ export default function Login() {
         <title>ScoreConnect Login</title>
       </Head>
       <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-[#454138] md:text-5xl xl:text-6xl">
-              ScoreConnect Login
-            </h1>
-            <button
-              onClick={signIn}
-              className="rounded border border-[#454138] bg-[#454138] px-4 py-2 text-[#dcd8c0] transition duration-200 ease-in-out hover:bg-[#dcd8c0] hover:text-[#454138]"
-            >
+        <div className="min-h-screen flex justify-center items-center">
+          <div className="bg-white rounded-xl p-8 max-w-md w-full mx-auto space-y-8 shadow-lg glass">
+            <Image
+              src={chromePic}
+              alt="Google"
+              className="mx-auto w-24 h-24 rounded-full"
+              quality={100}
+
+            />
+            <button className="transition-transform duration-300 w-full flex justify-center glass-button" onClick={signIn}>
               Sign in with Google
             </button>
           </div>

diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
@@ -1,5 +1,6 @@
 import { onAuthStateChanged } from "firebase/auth"
 import Head from "next/head"
+import Image from "next/image"
 import { useRouter } from "next/navigation"
 import React, { SetStateAction, useEffect, useState } from "react"
 import { auth } from "../../firebase"
@@ -34,41 +35,55 @@ export default function Profile() {
         <title>ScoreConnect Profile</title>
       </Head>
       <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-[#454138] md:text-5xl xl:text-6xl">
-              Profile
+        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-left lg:py-16">
+
+          <div className="mx-auto place-self-center glass">
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl xl:text-6xl">
+
+              <div className="flex flex-col items-start justify-start space-y-4 border-l-2 border-white pl-4">
+                <div className="flex flex-row items-center justify-center space-x-4">
+                  <Image
+                    src={user?.photoURL || "/google.png"}
+                    alt="Google"
+                    width={100}
+                    height={100}
+                    className="rounded-full"
+                  />
+                  {user && user.displayName && (
+                  <p className="text-white">
+                    {user.displayName}
+                  </p>
+                )}
+                </div>
+                <span className="text-white text-4xl font-light">
+                  Organization: <span className="text-violet-400">{user?.email && user.email.split("@")[1]}</span>
+                  </span>
+              </div>
             </h1>
-            {user && user.displayName && (
-              <p className="mb-6 max-w-2xl font-light text-[#454138] md:text-lg lg:mb-8 lg:text-xl">
-                Hello {user.displayName}!
-              </p>
-            )}
-            <div className="flex flex-col space-y-4 rounded-lg border-2 border-[#454138] p-4">
+
+            <hr className="mx-auto w-full border-t-2 border-white pb-4" />
+
+            <div className="flex flex-col space-y-4 p-4 border-l-2 border-white">
               {user && user.email && (
-                <p className="mb-3 max-w-2xl font-light text-[#454138] md:text-lg lg:mb-4 lg:text-xl">
+                <p className="mb-3 font-light text-white md:text-lg lg:mb-4 lg:text-xl">
                   Email:{" "}
-                  <span className="w-fit rounded bg-[#454138] p-1 text-[#454138] transition-all hover:bg-[#454138] hover:text-[#dcd8c0]">
+                  <span className="w-fit rounded text-white border-2 border-white p-1">
                     {user.email}
                   </span>
                 </p>
               )}
               {user && user.uid && (
-                <p className="mb-3 max-w-2xl font-light text-[#454138] md:text-lg lg:mb-4 lg:text-xl">
+                <p className="mb-3 font-light text-white md:text-lg lg:mb-4 lg:text-xl">
                   UID:{" "}
-                  <span className="w-fit rounded bg-[#454138] p-1 text-[#454138] transition-all hover:bg-[#454138] hover:text-[#dcd8c0]">
+                  <span className="w-fit rounded text-white border-2 border-white p-1">
                     {user.uid}
                   </span>
                 </p>
               )}
-              <p className="mt-8 text-sm text-[#454138]">
-                Details have been hidden for privacy reasons, hover over each entry to see the details.
-              </p>
-
               <div>
-                <div className="rounded p-4 shadow">
+                <div className="rounded p-4">
                   <button
-                    className="rounded border-2 border-[#454138] bg-[#454138] p-1 text-[#dcd8c0] outline-none transition duration-200 ease-in-out hover:bg-[#dcd8c0] hover:text-[#454138]"
+                    className="rounded border-2 border-white bg-white p-1 text-black outline-none transition duration-200 ease-in-out hover:bg-transparent hover:text-white"
                     onClick={toggleDevVisibility}
                   >
                     Toggle Developer Info

diff --git a/public/chrome.png b/public/chrome.png