Skip to content

Commit 1891730

Browse files
AlexanderNeo427AlexanderNeo427
committed
Changes - for now
1 parent c6ac554 commit 1891730

File tree

9 files changed

+89
-16
lines changed

9 files changed

+89
-16
lines changed

‎src/assets/images/company_logo.png

-96.9 KB
Loading

‎src/assets/images/facebook_icon.png

3.37 KB
Loading

‎src/assets/images/google_icon.png

27 KB
Loading

‎src/assets/images/tiktok_icon.png

8.78 KB
Loading

‎src/common/AuthContext.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ const AuthContextProvider: React.FC<{ children: React.ReactNode }> = props => {
1414
useEffect(() => {
1515
const unsubscribe = onAuthStateChanged(firebaseAuth, newFirebaserUser => {
1616
setAuthState({ firebaseUser: newFirebaserUser })
17+
console.log("AuthContextProvider - firebaserUser: ", newFirebaserUser)
1718
})
1819
return () => unsubscribe()
19-
})
20+
}, [])
2021

2122
return (
2223
// <>{props.children}</>

‎src/components/Navbar.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Navbar: React.FC<NavbarProps> = props => {
2222
}
2323

2424
const clamped = Math.max(0, Math.min(scrollFadeMax, window.scrollY))
25-
const t = Math.min(clamped / scrollFadeMax, 0.95)
25+
const t = Math.min(clamped / scrollFadeMax, 1)
2626
if (headerRef.current?.style) {
2727
headerRef.current.style.backgroundColor = `rgba(${HEADER_RGB}, ${t})`
2828
}
@@ -35,12 +35,10 @@ const Navbar: React.FC<NavbarProps> = props => {
3535
return (
3636
<header
3737
ref={headerRef}
38-
style={{
39-
position: props.useSticky ? "sticky" : "fixed"
40-
}}
38+
style={{ position: props.useSticky ? "sticky" : "fixed" }}
4139
className='
4240
top-0 left-0 right-0 z-10 flex justify-between items-center
43-
h-16 pr-4 md:pr-8 text-text-950 font-medium text-xl transition-colors'
41+
h-14 px-2 md:px-5 text-text-950 font-medium text-lg transition-colors duration-500'
4442
>
4543
{/* ----- COMPANY LOGO ------ */}
4644
<Link className='h-full w-auto' to={ROUTE_URL.HOME}>
@@ -59,15 +57,15 @@ const Navbar: React.FC<NavbarProps> = props => {
5957
{/* --- LARGE NAVBAR | SHOWS WHEN SCREEN EXPANDS ---- */}
6058
<nav className='
6159
hidden md:flex justify-center items-center
62-
gap-14 lg:gap-24
60+
gap-11 lg:gap-20
6361
'>
6462
<Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.HOME}>Home</Link>
6563
<Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.ABOUT}>About</Link>
6664
<Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.CONTACT_US}>Contact Us</Link>
6765
<Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.AUTH}>Login</Link>
6866
</nav>
6967
<Link className='
70-
hidden justify-center items-center bg-primary-500 px-7 h-11 rounded-lg
68+
hidden justify-center items-center bg-primary-500 px-7 h-10 rounded-lg
7169
md:flex hover:bg-primary-600 transition-colors
7270
' to={ROUTE_URL.GALLERY}>Adopt</Link>
7371
</header>

‎src/components/sections/FooterSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22

33
const FooterSection: React.FC = () => {
44
return (
5-
<footer className='flex justify-center items-center bg-background-50'>
5+
<footer className='flex justify-center items-center bg-accent-50'>
66
<div className='flex flex-col justify-start items-center w-full max-w-5xl text-text-950'>
77

88
{/* --- FOOTER TOP --- */}

‎src/pages/AuthPage.tsx

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import login_img from "../assets/images/golden_retriever.jpg"
55
import signup_img from "../assets/images/golden_retriever_2.jpg"
66
import { motion as framer, useWillChange } from 'framer-motion'
77
import AuthInput from '../components/AuthInput'
8+
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth'
9+
import { firebaseAuth } from '../others/FirebaseConfig'
10+
import google_icon from '../assets/images/google_icon.png'
11+
import facebook_icon from '../assets/images/facebook_icon.png'
12+
import tiktok_icon from '../assets/images/tiktok_icon.png'
813

914
export enum INPUT_ID {
1015
LOGIN_EMAIL,
@@ -39,6 +44,41 @@ const AuthPage: React.FC = () => {
3944
}
4045
}
4146

47+
const loginHandler = async (_: React.MouseEvent): Promise<void> => {
48+
const email = m_inputData[INPUT_ID.LOGIN_EMAIL]
49+
const pwd = m_inputData[INPUT_ID.LOGIN_PASSWORD]
50+
51+
signInWithEmailAndPassword(firebaseAuth, email, pwd)
52+
.then(userCreds => {
53+
console.log("Successfully login with the user: ", userCreds.user, ". Redirecting....")
54+
// TODO - SetTimeout
55+
})
56+
.catch(err => {
57+
console.log("Unable to log the user in, exited with error code: ", err.code)
58+
console.log("Error message: ", err.message)
59+
})
60+
}
61+
62+
const signupHandler = async (_: React.MouseEvent): Promise<void> => {
63+
const email = m_inputData[INPUT_ID.SIGNUP_EMAIL]
64+
const pwd = m_inputData[INPUT_ID.SIGNUP_PASSWORD]
65+
const confirmPwd = m_inputData[INPUT_ID.SIGNUP_CONFIRM_PASSWORD]
66+
67+
if (pwd !== confirmPwd) {
68+
console.log("Passwords do not match")
69+
return
70+
}
71+
72+
createUserWithEmailAndPassword(firebaseAuth, email, pwd)
73+
.then(userCreds => {
74+
console.log("Successfully signed up the user: ", userCreds.user, ". Proceed to sign in")
75+
})
76+
.catch(err => {
77+
console.log("Unable to sign up with credentials, exited with error code: ", err.code)
78+
console.log("Error message: ", err.message)
79+
})
80+
}
81+
4282
return (
4383
<main>
4484
<Navbar useSticky={true} />
@@ -61,7 +101,7 @@ const AuthPage: React.FC = () => {
61101
className='hidden md:block bg-cover h-full w-[99rem] rounded-l-2xl'>
62102
</div>
63103

64-
<form onSubmit={e => e.preventDefault()} className='flex justify-center items-center min-w-[24rem] xl:min-w-[28rem] px-10'>
104+
<form onSubmit={e => e.preventDefault()} className='flex justify-center items-center min-w-[28rem] xl:min-w-[34rem] px-10'>
65105
<div className='w-full flex flex-col justify-start items-center'>
66106
{
67107
<button onClick={toggleClickHandler}
@@ -75,7 +115,7 @@ const AuthPage: React.FC = () => {
75115
<h2 className='font-bold text-3xl mb-text-m'>LOGIN</h2>
76116
<AuthInput inputID={INPUT_ID.LOGIN_EMAIL} inputType='email' placeholder='Email' inputData={m_inputData} setInputData={setInputData} />
77117
<AuthInput inputID={INPUT_ID.LOGIN_PASSWORD} inputType='password' placeholder='Password' inputData={m_inputData} setInputData={setInputData} />
78-
<button className='
118+
<button onClick={loginHandler} className='
79119
w-full py-3 rounded-lg transition-colors bg-primary-500 hover:bg-primary-600 mb-margin-l
80120
'>Login</button>
81121
</>
@@ -85,7 +125,7 @@ const AuthPage: React.FC = () => {
85125
<AuthInput inputID={INPUT_ID.SIGNUP_EMAIL} inputType='email' placeholder='Email' inputData={m_inputData} setInputData={setInputData} />
86126
<AuthInput inputID={INPUT_ID.SIGNUP_PASSWORD} inputType='password' placeholder='Password' inputData={m_inputData} setInputData={setInputData} />
87127
<AuthInput inputID={INPUT_ID.SIGNUP_CONFIRM_PASSWORD} inputType='password' inputData={m_inputData} placeholder='Confirm Password' setInputData={setInputData} />
88-
<button className='
128+
<button onClick={signupHandler} className='
89129
w-full py-3 rounded-lg transition-colors bg-primary-500 hover:bg-primary-600 mb-margin-l
90130
'>Sign up</button>
91131
</>
@@ -109,10 +149,29 @@ const AuthPage: React.FC = () => {
109149
<div className='w-full h-[1px] bg-gray-400'></div>
110150
</div>
111151

112-
<div className='w-full flex justify-around'>
113-
<button>X</button>
114-
<button>G</button>
115-
<button>L</button>
152+
{/* --- ALTERNATIVE SIGN-INS --- */}
153+
<div className='w-full flex justify-center text-sm gap-4'>
154+
<button className='
155+
flex justify-center items-center h-11 rounded-lg bg-background-900
156+
hover:bg-background-800 transition-colors duration-200 w-32
157+
'>
158+
<img className='w-5 h-5 mr-margin-s' src={google_icon} alt="" />
159+
<span>Google</span>
160+
</button>
161+
<button className='
162+
flex justify-center items-center h-11 rounded-lg bg-background-900
163+
hover:bg-background-800 transition-colors duration-200 w-32
164+
'>
165+
<img className='w-5 h-5 mr-margin-s' src={facebook_icon} alt="" />
166+
<span>Facebook</span>
167+
</button>
168+
<button className='
169+
flex justify-center items-center h-11 rounded-lg bg-background-900
170+
hover:bg-background-800 transition-colors duration-200 w-32
171+
'>
172+
<img className='w-5 h-5 mr-margin-s' src={tiktok_icon} alt="" />
173+
<span>TikTok</span>
174+
</button>
116175
</div>
117176
</div>
118177
</form>

‎src/pages/PetDetailPage.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import Navbar from '../components/Navbar'
3+
import FooterSection from '../components/sections/FooterSection'
4+
5+
const PetDetailPage: React.FC = () => {
6+
return (
7+
<main>
8+
<Navbar />
9+
<section></section>
10+
<FooterSection />
11+
</main>
12+
)
13+
}
14+
15+
export default PetDetailPage

0 commit comments

Comments
 (0)