Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Create Profile icon component + routing

Aperta
  • Qualcosa non va?
#18 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
authentication, frontend

Direzione di ricerca

Inizia esaminando la struttura proposta dei componenti/profilo, in particolare ProfileIcon.tsx, LoginDialog.tsx, AuthForm.tsx e AccountMenu.tsx, insieme ai suggerimenti per il routing e il servizio auth. Usa il riferimento Figma e i criteri di accettazione per definire il flusso dell’icona del profilo e della finestra di dialogo di accesso. Il lavoro è completato quando l’icona apre una finestra di dialogo con i campi e i pulsanti specificati e la struttura di navigazione dell’account è predisposta per una futura autenticazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Advanced California Tribal GIS Hackathon
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³.

Image

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:

Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Security

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.