Skip to content

Commit

Permalink
Responsive styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@CRSantiago
CRSantiago committed May 11, 2024
1 parent 3476bb4 commit 61b6c91
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 79 deletions.
4 changes: 4 additions & 0 deletions client/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
content="OpenDoors is a web application that simplifies the process of managing and tracking the status of your job applications."
/>
<title>OpenDoors</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
111 changes: 86 additions & 25 deletions client/src/components/NavBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,39 @@
import React from "react"
import { Link } from "react-router-dom"
import { useAuth } from "../AuthContext"
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../AuthContext'

const Navbar = () => {
const { user, logout } = useAuth()
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen)
}

return (
<nav className="bg-primary text-textPrimary">
<ul className="flex justify-between items-center py-4 px-6">
<li>
<h2 className="text-xl font-bold textPrimary">OpenDoors</h2>
</li>
<div className="flex">
<li className="mr-6">
<div className="flex justify-between items-center px-4 py-2 sm:px-6">
<h2 className="text-xl font-bold textPrimary">OpenDoors</h2>
<div className="sm:hidden">
{/* Button for toggling the menu on small screens */}
<button
onClick={toggleMobileMenu}
className="text-textPrimary focus:outline-none focus:ring"
>
<i className="fas fa-bars"></i>{' '}
</button>
</div>
<ul
className={`hidden sm:flex sm:items-center sm:space-x-6 ${
isMobileMenuOpen ? 'flex' : 'hidden'
}`}
>
<li>
<Link to="/" className="hover:bg-secondary p-2 rounded">
Home
</Link>
</li>
<li className="mr-6">
<li>
<Link
to="/contributions"
className="hover:bg-secondary p-2 rounded"
Expand All @@ -25,41 +42,85 @@ const Navbar = () => {
</Link>
</li>
{!user && (
<li className="mr-6">
<li>
<Link to="/auth" className="hover:bg-secondary p-2 rounded">
Login/Register
</Link>
</li>
)}
{user && (
<>
<li className="mr-6">
<li>
<Link
to="/dashboard"
className="hover:bg-secondary p-2 rounded"
>
Dashboard
</Link>
</li>
<li className="mr-6">
<li>
<Link to="/settings" className="hover:bg-secondary p-2 rounded">
Settings
</Link>
</li>
<li>
<button
onClick={logout}
className="bg-accent hover:bg-secondary px-2 py-1 rounded transition duration-300 ease-in-out"
>
Logout
</button>
</li>
</>
)}
<div className="flex items-center">
{user && (
<button
onClick={logout}
className="bg-accent hover:bg-secondary px-2 py-1 rounded transition duration-300 ease-in-out"
>
Logout
</button>
)}
</div>
</div>
</ul>
</ul>
</div>
{/* Mobile Menu */}
<div
className={`flex flex-col p-4 bg-primary text-textPrimary absolute w-full ${
isMobileMenuOpen ? 'block' : 'hidden'
}`}
>
<Link to="/" className="block py-2 hover:bg-secondary p-2 rounded">
Home
</Link>
<Link
to="/contributions"
className="block py-2 hover:bg-secondary p-2 rounded"
>
Contributions
</Link>
{!user && (
<Link
to="/auth"
className="block py-2 hover:bg-secondary p-2 rounded"
>
Login/Register
</Link>
)}
{user && (
<>
<Link
to="/dashboard"
className="block py-2 hover:bg-secondary p-2 rounded"
>
Dashboard
</Link>
<Link
to="/settings"
className="block py-2 hover:bg-secondary p-2 rounded"
>
Settings
</Link>
<button
onClick={logout}
className="block py-2 bg-accent hover:bg-secondary px-2 rounded transition duration-300 ease-in-out"
>
Logout
</button>
</>
)}
</div>
</nav>
)
}
Expand Down
49 changes: 24 additions & 25 deletions client/src/features/Auth/components/LoginForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
import React, { useState } from "react"
import { useNavigate } from "react-router-dom"
import { FormInput, FormLabel, FormButton } from "../../components"
import { submitLoginForm } from "../api"
import { useAuth } from "../../../AuthContext"
import useForm from "../../../hooks/useForm"
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { FormInput, FormLabel, FormButton } from '../../components'
import { submitLoginForm } from '../api'
import { useAuth } from '../../../AuthContext'
import useForm from '../../../hooks/useForm'

const LoginForm = () => {
// Get the login function from the AuthContext
const { login } = useAuth()
const navigate = useNavigate()

const initialFormData = {
username: "",
password: "",
username: '',
password: '',
}

const { formData, handleChange } = useForm(initialFormData)

// Store field errors to display in the form
const [fieldErrors, setFieldErrors] = useState({
username: "",
password: "",
username: '',
password: '',
})

const [errorMessage, setErrorMessage] = useState("")
const [errorMessage, setErrorMessage] = useState('')

// Handle the response from the server
const handleFormResponse = (response) => {
if (response.token) {
login(response) // Store user object in context
setErrorMessage("") // Clear any previous error messages
setFieldErrors({ username: "", password: "" }) // Clear any previous field errors
navigate("/dashboard") // Redirect to the dashboard
} else if (response.message.includes("Authentication failed")) {
if (response.message.includes("User does not exist")) {
setErrorMessage('') // Clear any previous error messages
setFieldErrors({ username: '', password: '' }) // Clear any previous field errors
navigate('/dashboard') // Redirect to the dashboard
} else if (response.message.includes('Authentication failed')) {
if (response.message.includes('User does not exist')) {
// Set the username error if the user does not exist
setFieldErrors((errors) => ({
...errors,
username: "User does not exist",
username: 'User does not exist',
}))
} else {
// Clear the username error if the user exists
setFieldErrors((errors) => ({
...errors,
username: "",
username: '',
}))
}

if (response.message.includes("Invalid password")) {
if (response.message.includes('Invalid password')) {
// Set the password error if the password is invalid
setFieldErrors((errors) => ({
...errors,
password: "Invalid password",
password: 'Invalid password',
}))
} else {
// Clear the password error if the password is valid
setFieldErrors((errors) => ({
...errors,
password: "",
password: '',
}))
}
} else {
Expand All @@ -74,14 +74,13 @@ const LoginForm = () => {
})
}
return (
<div className="flex justify-center">
<div className="flex justify-center p-4">
<form
className="flex flex-col w-1/3 bg-secondary
text-textPrimary p-10 shadow-lg rounded-lg"
className="flex flex-col w-full max-w-md bg-secondary text-textPrimary p-6 shadow-lg rounded-lg"
onSubmit={handleSubmit}
>
{errorMessage && <h3 className="text-red-500">{errorMessage}</h3>}
<h2 className="text-2xl font-bold mb-4">Login</h2>
<h2 className="text-xl sm:text-2xl font-bold mb-4">Login</h2>
<FormLabel htmlFor="username" text="Username" />
<FormInput
type="text"
Expand Down
49 changes: 24 additions & 25 deletions client/src/features/Auth/components/RegisterForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
import React, { useState } from "react"
import { FormInput, FormLabel, FormButton } from "../../components"
import { submitRegistrationForm } from "../api"
import { validateFormData } from "../utils"
import useForm from "../../../hooks/useForm"
import React, { useState } from 'react'
import { FormInput, FormLabel, FormButton } from '../../components'
import { submitRegistrationForm } from '../api'
import { validateFormData } from '../utils'
import useForm from '../../../hooks/useForm'

const RegisterForm = () => {
const initialFormData = {
username: "",
email: "",
password: "",
confirmPassword: "",
username: '',
email: '',
password: '',
confirmPassword: '',
}

const { formData, handleChange, fieldErrors, handleValidation } = useForm(
initialFormData,
validateFormData
)

const [successMessage, setSuccessMessage] = useState("")
const [errorMessage, setErrorMessage] = useState("")
const [successMessage, setSuccessMessage] = useState('')
const [errorMessage, setErrorMessage] = useState('')

const handleFormResponse = (response) => {
if (response.message === "User created successfully") {
setSuccessMessage("Successfully created an account!")
setErrorMessage("")
if (response.message === 'User created successfully') {
setSuccessMessage('Successfully created an account!')
setErrorMessage('')
} else if (
response.message.includes("duplicate") &&
response.message.includes("username")
response.message.includes('duplicate') &&
response.message.includes('username')
) {
setErrorMessage("There already exist an account with this username.")
setErrorMessage('There already exist an account with this username.')
} else if (
response.message.includes("duplicate") &&
response.message.includes("email")
response.message.includes('duplicate') &&
response.message.includes('email')
) {
setErrorMessage("There already exist an account with this email.")
setErrorMessage('There already exist an account with this email.')
} else {
setErrorMessage(response.message)
}
Expand All @@ -55,15 +55,14 @@ const RegisterForm = () => {
return
}
return (
<div className="flex justify-center">
<div className="flex justify-center p-4">
<form
className="flex flex-col w-1/3 bg-secondary
text-textPrimary p-10 shadow-lg rounded-lg"
className="flex flex-col w-full max-w-md bg-secondary text-textPrimary p-6 shadow-lg rounded-lg"
onSubmit={handleSubmit}
>
{successMessage && <h3 className="text-green-500">{successMessage}</h3>}
{errorMessage && <h3 className="text-red-500">{errorMessage}</h3>}
<h2 className="text-2xl font-bold mb-4">Register</h2>
<h2 className="text-xl sm:text-2xl font-bold mb-4">Register</h2>
<FormLabel htmlFor="username" text="Username" />
<FormInput
type="text"
Expand Down Expand Up @@ -103,7 +102,7 @@ const RegisterForm = () => {
<FormButton
type="submit"
text="Register"
styles="bg-brightHighlight text-white font-bold py-2 px-4 rounded hover:bg-complementary"
styles="bg-brightHighlight text-white font-bold py-2 px-4 rounded hover:bg-complementary mt-4"
/>
</form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/features/Dashboard/CreateJobApplicationForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const CreateJobApplicationForm = ({ setIsCreating, fetchUserData }) => {
<SuccessAnimation message={'Form Submitted Successfully!'} />
) : (
<form
className="w-1/3 max-h-[90vh] overflow-y-auto fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-white p-5 rounded-md shadow-md"
className="w-full sm:w-2/3 md:w-1/3 max-h-[90vh] overflow-y-auto fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-white p-5 rounded-md shadow-lg"
onSubmit={handleSubmit}
>
<div className="flex justify-between mb-3 font-semibold">
Expand Down
6 changes: 3 additions & 3 deletions client/src/features/Dashboard/JobApplicationTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const JobApplicationTable = ({ applications, fetchUserData }) => {
usePagination(filteredApplications, itemsPerPage, statusFilter) // Pagination logic - custom hook

return (
<div className="flex flex-col items-center bg-sky-50 p-3 shadow-lg mx-36 mb-10 rounded-lg overflow-x-auto">
<div className="flex flex-col items-center bg-sky-50 p-2 sm:p-3 shadow-lg mx-2 sm:mx-6 md:mx-36 mb-4 sm:mb-10 rounded-lg overflow-x-auto">
{isCreating && (
<CreateJobApplicationForm
setIsCreating={setIsCreating}
Expand All @@ -112,7 +112,7 @@ const JobApplicationTable = ({ applications, fetchUserData }) => {
: 'flex justify-center w-full flex-col'
}
>
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between items-center sm:items-end space-y-2 sm:space-y-0 p-2">
<div>
<div className="flex items-center">
{/* Show form to create a job application */}
Expand Down Expand Up @@ -143,7 +143,7 @@ const JobApplicationTable = ({ applications, fetchUserData }) => {
</div>
</div>
</div>
<div className="flex mb-3">
<div className="flex flex-wrap mb-1 sm:mb-3">
<div className="content-end mr-3">
<input
type="text"
Expand Down

0 comments on commit 61b6c91

Please sign in to comment.