Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Create Profile icon component + routing

Đang mở
  • Có gì không ổn?
#18 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
authentication, frontend

Hướng nghiên cứu

Bắt đầu bằng việc xem xét cấu trúc component/profile được đề xuất, đặc biệt là ProfileIcon.tsx, LoginDialog.tsx, AuthForm.tsx và AccountMenu.tsx, cùng với các đề xuất về routing và auth service. Sử dụng tài liệu tham chiếu Figma và các tiêu chí nghiệm thu để xác định luồng của biểu tượng profile và hộp thoại đăng nhập. Được xem là hoàn tất khi biểu tượng mở một hộp thoại có các trường và nút được chỉ định, đồng thời cấu trúc điều hướng tài khoản đã được chuẩn bị cho việc xác thực trong tương lai.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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:

Ngôn ngữ chính
HTML
Star
2
Fork
11
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của OpenSourceFellows/map_dashboard_hackathon

Tất cả issue của OpenSourceFellows/map_dashboard_hackathon

Issue tương tự

Thêm issue về Security

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.