Create Profile icon component + routing
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 需要澄清
- 活跃度
- 冷清
- 技术栈
- react, typescript
调研方向
首先查看提议的组件/个人资料结构，尤其是 ProfileIcon.tsx、LoginDialog.tsx、AuthForm.tsx 和 AccountMenu.tsx，同时查看 routing 和 auth service 方面的建议。使用 Figma 参考和验收标准来定义个人资料图标和登录对话框的流程。完成的标准是：图标能够打开包含指定字段和按钮的对话框，并且已准备好供未来身份验证使用的账户导航结构。
由索引模型根据 Issue 内容生成。
描述
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
ProfileIconorAccountMenucomponent¹ -
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
Authentication References:
- 主要语言
- HTML
- 星标
- 2
- 派生
- 11
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
OpenSourceFellows/map_dashboard_hackathon 的其他 Issue
-
California Tribal GIS Hackathon Intermediate
难度 2/5 半天 新手友好度 68/100
-
California Tribal GIS Hackathon Intermediate
难度 3/5 1-2 天 新手友好度 68/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
-
Advanced California Tribal GIS Hackathon
难度 3/5 1-2 天 新手友好度 48/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
查看 OpenSourceFellows/map_dashboard_hackathon 的全部 Issue
相似的 Issue
-
good first issue security
难度 2/5 1-3 小时 新手友好度 82/100
-
agent-ready area:cli bug p3 security
难度 2/5 1-3 小时 新手友好度 66/100
gacela-project/gacela#1014 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 69/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 82/100
datamodel-code-generator/datamodel-code-generator#5577 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 79/100
gregtwallace/certwarden#152 ·