Skip to content

Commit

Permalink
feat/(CUST-CPC-1134): Render pages based on user roles (#656)
Browse files Browse the repository at this point in the history 
**JIRA:** https://champlainsaintlambert.atlassian.net/browse/CPC-1134
Currently, users can access every page that the
axiosErrorResponseHandler doesn't handle. This means that an admin or
vet is able to access the customer profile edit page which only a
customer should be able to see.
Absolutely not. I hope.
- Created a hook to validate user roles (useHasRequiredRole.ts).
Implemented it in the ProtectedRouteProps.tsx
- Added the roles that are authorized to access ProfileEdit,
AddingCustomer, and AllOwners. Other teams can implement it to their
pages as well (see dev notes).
- Created 4 additional functions that people can use in the
UserContext.tsx
- Refactored and reorganized the ProfileEdit.tsx. The update form is now
a component in the newly created components folder in features/customers
No change to the UI. Users will just be redirected to 403 Forbidden when
they access pages they shouldn't see
If you want to make a page accessible by roles, just take a look at
router.tsx. Pages that trigger the axiosErrorResponseHandler will
automatically redirect users to an error page. If you want to be
consistent, then add roles to each page that would require it.
Update Customer
#622
Add Customer #632
Show all customers
#634
  • Loading branch information
@flyindonut @hristoiv11
flyindonut authored and hristoiv11 committed Sep 20, 2024
1 parent fae551a commit f3ed6e6
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 72 deletions.
67 changes: 67 additions & 0 deletions petclinic-frontend/src/features/customers/components/UpdateCustomerForm.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.update-customer-form {
<<<<<<< HEAD
max-width: 600px;
margin: 50px auto;
padding: 20px;
Expand Down Expand Up @@ -63,4 +64,70 @@
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
=======
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.update-customer-form h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
font-family: 'Arial', sans-serif;
}

.update-customer-form form {
display: flex;
flex-direction: column;
}

.update-customer-form label {
margin-bottom: 15px;
font-family: 'Arial', sans-serif;
color: #555;
}

.update-customer-form input {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Arial', sans-serif;
font-size: 16px;
}

.update-customer-form button {
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
font-family: 'Arial', sans-serif;
font-size: 16px;
transition: background-color 0.3s ease;
}

.update-customer-form button:hover {
background-color: #218838;
}

.error {
color: red;
font-size: 0.8em;
margin-top: 5px;
font-family: 'Arial', sans-serif;
}

.update-customer-form input:focus {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
>>>>>>> 76386949 (feat/(CUST-CPC-1134): Render pages based on user roles (#656))
}
67 changes: 67 additions & 0 deletions petclinic-frontend/src/pages/Customer/AddingCustomer.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.add-customer-form {
<<<<<<< HEAD
max-width: 600px;
margin: 50px auto;
padding: 20px;
Expand Down Expand Up @@ -63,4 +64,70 @@
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
=======
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-customer-form h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
font-family: 'Arial', sans-serif;
}

.add-customer-form form {
display: flex;
flex-direction: column;
}

.add-customer-form label {
margin-bottom: 15px;
font-family: 'Arial', sans-serif;
color: #555;
}

.add-customer-form input {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Arial', sans-serif;
font-size: 16px;
}

.add-customer-form button {
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
font-family: 'Arial', sans-serif;
font-size: 16px;
transition: background-color 0.3s ease;
}

.add-customer-form button:hover {
background-color: #218838;
}

.error {
color: red;
font-size: 0.8em;
margin-top: 5px;
font-family: 'Arial', sans-serif;
}

.add-customer-form input:focus {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
>>>>>>> 76386949 (feat/(CUST-CPC-1134): Render pages based on user roles (#656))
}
134 changes: 67 additions & 67 deletions petclinic-frontend/src/pages/Customer/AddingCustomer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const AddingCustomer: React.FC = (): JSX.Element => {
};

const handleSubmit = async (
event: FormEvent<HTMLFormElement>
event: FormEvent<HTMLFormElement>
): Promise<void> => {
event.preventDefault();
if (!validate()) return;
Expand All @@ -58,73 +58,73 @@ const AddingCustomer: React.FC = (): JSX.Element => {
};

return (
<div>
<NavBar />
<div className="add-customer-form">
<h1>Add Customer</h1>
<form onSubmit={handleSubmit}>
<label>First Name: </label>
<input
type="text"
name="firstName"
value={owner.firstName}
onChange={handleChange}
/>
{errors.firstName && (
<span className="error">{errors.firstName}</span>
)}
<br />
<label>Last Name: </label>
<input
type="text"
name="lastName"
value={owner.lastName}
onChange={handleChange}
/>
{errors.lastName && <span className="error">{errors.lastName}</span>}
<br />
<label>Address: </label>
<input
type="text"
name="address"
value={owner.address}
onChange={handleChange}
/>
{errors.address && <span className="error">{errors.address}</span>}
<br />
<label>City: </label>
<input
type="text"
name="city"
value={owner.city}
onChange={handleChange}
/>
{errors.city && <span className="error">{errors.city}</span>}
<br />
<label>Province: </label>
<input
type="text"
name="province"
value={owner.province}
onChange={handleChange}
/>
{errors.province && <span className="error">{errors.province}</span>}
<br />
<label>Telephone: </label>
<input
type="text"
name="telephone"
value={owner.telephone}
onChange={handleChange}
/>
{errors.telephone && (
<span className="error">{errors.telephone}</span>
)}
<br />
<button type="submit">Add</button>
</form>
<div>
<NavBar />
<div className="add-customer-form">
<h1>Add Customer</h1>
<form onSubmit={handleSubmit}>
<label>First Name: </label>
<input
type="text"
name="firstName"
value={owner.firstName}
onChange={handleChange}
/>
{errors.firstName && (
<span className="error">{errors.firstName}</span>
)}
<br />
<label>Last Name: </label>
<input
type="text"
name="lastName"
value={owner.lastName}
onChange={handleChange}
/>
{errors.lastName && <span className="error">{errors.lastName}</span>}
<br />
<label>Address: </label>
<input
type="text"
name="address"
value={owner.address}
onChange={handleChange}
/>
{errors.address && <span className="error">{errors.address}</span>}
<br />
<label>City: </label>
<input
type="text"
name="city"
value={owner.city}
onChange={handleChange}
/>
{errors.city && <span className="error">{errors.city}</span>}
<br />
<label>Province: </label>
<input
type="text"
name="province"
value={owner.province}
onChange={handleChange}
/>
{errors.province && <span className="error">{errors.province}</span>}
<br />
<label>Telephone: </label>
<input
type="text"
name="telephone"
value={owner.telephone}
onChange={handleChange}
/>
{errors.telephone && (
<span className="error">{errors.telephone}</span>
)}
<br />
<button type="submit">Add</button>
</form>
</div>
</div>
</div>
);
};

Expand Down
3 changes: 1 addition & 2 deletions petclinic-frontend/src/router.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import Home from '@/pages/Home/Home.tsx';
import ProfileEdit from '@/pages/Customer/ProfileEdit.tsx';
import Products from '@/pages/Product/Products.tsx';
import AddingCustomer from '@/pages/Customer/AddingCustomer.tsx';
import CustomerBillingPage from '@/pages/Bills/CostumerBills.tsx';
import AllOwners from '@/pages/Customer/AllOwners.tsx';
import CustomerBillingPage from '@/pages/Bills/CostumerBills.tsx';
import VetDetails from "@/pages/Vet/VetDetails.tsx";
import Review from './pages/Review/Review';
import EditReviewForm from './features/visits/Review/EditReviewForm';
Expand All @@ -24,7 +24,6 @@ import Visits from './pages/Visit/Visit';
import AddReviewForm from './features/visits/Review/AddReviewForm';
import EditInventory from '@/features/inventories/EditInventory.tsx';


const router = createBrowserRouter([
{
children: [
Expand Down
6 changes: 3 additions & 3 deletions petclinic-frontend/src/shared/components/ProtectedRouteProps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ interface ProtectedRouteProps {
}

export const ProtectedRoute = ({
children,
roles,
}: ProtectedRouteProps): JSX.Element => {
children,
roles,
}: ProtectedRouteProps): JSX.Element => {
const navigate = useNavigate();
const hasRequiredRole = useHasRequiredRole(roles);

Expand Down

0 comments on commit f3ed6e6

Please sign in to comment.