Create Profile icon component + routing

Issue created with ChatGPT models' help¹

---

Description

Create the profile/account icon component that appears at the bottom of the side navigation and implement its interaction flow¹. When a user clicks the profile icon, a sign-in modal/pop-up should appear allowing the user to authenticate using credentials such as email/username and password².

This issue is primarily focused on creating the frontend component structure, modal interaction flow, routing setup, and preparing the application for future authentication integration³. Contributors may optionally integrate authentication providers/services if the architecture is already available⁴.

Potential future integrations could include OAuth, SSO, Okta, or another authentication provider¹. This issue may also optionally prepare the groundwork for persisting user-related data such as conservation projects (general list), authentication state, or profile metadata².

If the scope becomes too large, backend/database integration may be treated as optional or partially scaffolded³.

---

Goals

• Create reusable Profile icon component¹
• Add sign-in modal/pop-up interaction²
• Support username/email + password fields³
• Add routing/navigation behavior for account actions⁴
• Prepare frontend architecture for authentication integration¹

---

Implementation Instructions

• Create reusable ProfileIcon or AccountMenu component¹

• Use React + TypeScript + Material UI²

• Clicking profile icon should open modal/dialog³

• Modal should contain:

  • username/email field⁴
  • password field¹
  • sign-in button²
  • cancel button²

• Use MUI components such as:

  • Dialog³
  • TextField⁴
  • Button¹
  • Avatar²

• Add placeholder routing/account navigation structure³

• Add frontend authentication state handling if possible⁴

• Optional: connect component to auth service/provider¹

• Optional: scaffold service/controller/middleware architecture²

• Optional: prepare future persistence for saved projects/user state³

• Optional: add loading/error handling for sign-in flow⁴

---

Layout Specs (Figma)

profile pic icon button

• width: 54;¹
• height: 54;²
• angle: 0 deg;³
• opacity: 1;⁴
• border-radius: 15px;¹
• background: #82B1FF80;²

👉 On click:

• Navigate to: "Account Settings";¹
• Animate: Instant;²
• animation-duration: 0ms;³

---

bottom spacer

• Size="16px";¹
• Show=false;²
• width: 360;³
• height: 16;⁴
• angle: 0 deg;¹
• opacity: 1;²

---

Suggested Functionalities

Profile Icon Click

• User clicks profile icon¹
• Authentication modal opens²

Sign-In Modal

• User enters username/email³
• User enters password⁴
• User clicks sign-in button¹

Future Optional Integrations

• OAuth provider integration²
• SSO authentication³
• Okta integration⁴
• JWT/session handling¹
• Persisted login state³

---

Suggested Technical Structure (Optional)

Possible folder structure:¹

src/
 ├── components/profile/
 ├── services/auth/
 ├── middleware/
 ├── controllers/
 ├── routes/
 └── types/

Possible component examples:²

components/profile/
 ├── ProfileIcon.tsx
 ├── LoginDialog.tsx
 ├── AuthForm.tsx
 └── AccountMenu.tsx

Possible service examples:³

services/auth/
 ├── authService.ts
 ├── sessionService.ts
 └── oauthService.ts

---

Scope Notes

This issue mainly focuses on creating the visible component flow and interaction structure¹. Full production-ready authentication/database integration is not strictly required for completion².

Optional backend-related functionality may include:

• storing user login data³
• saving authentication/session state⁴
• persisting saved projects per user¹
• integrating backend auth endpoints²

If these become too large for this issue, contributors may scaffold or partially implement them³.

---

Acceptance Criteria

• Profile icon component renders correctly¹
• Clicking icon opens sign-in modal²
• Modal contains username/email field³
• Modal contains password field⁴
• Modal contains sign-in button¹
• Modal contains cancel button
• Component uses React + TypeScript + MUI²
• Routing/account interaction structure is prepared³
• Authentication integration structure is extensible⁴
• Code structure supports future backend integration¹

---

Resources

¹ https://mui.com/material-ui/react-dialog/
² https://mui.com/material-ui/react-text-field/
³ https://react.dev/learn/sharing-state-between-components
⁴ https://auth0.com/docs/authenticate/protocols/oauth

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Authentication References:

• https://developer.okta.com/docs/concepts/oauth-openid/
• https://jwt.io/introduction
• https://oauth.net/2/

Start by reviewing the proposed components/profile structure, especially ProfileIcon.tsx, LoginDialog.tsx, AuthForm.tsx, and AccountMenu.tsx, alongside the routing and auth service suggestions. Use the Figma reference and acceptance criteria to define the profile icon and sign-in dialog flow. Done means the icon opens a dialog with the specified fields and buttons, with account navigation structure prepared for future authentication.