Create settings page component - Vanilla.js

[blackgirlbytes]

Create settings page component - Vanilla

🚀 Goal

Create a Settings page component in Vanilla that allows users to manage their profile settings within our Decentralized Web App (DWA) starter.

🤔 Background

We need to implement the Settings page for our Vanilla.js DWA starter, mirroring the functionality of the existing React implementation. This page should include a profile settings component and utilize Decentralized Resource Locator (DRL) functions for data management.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Create a SettingsPage.vanilla component
• Implement a ProfileSettings.vanilla component with the following features:
  • Display and edit user's display name
  • Upload and display user's avatar image
  • Save profile changes to the DWN (Decentralized Web Node)
• Implement DRL (Decentralized Resource Locator) utility functions:
  • drlFetchRecord
  • drlFetchRecordJson
  • drlReadProtocolUrl
  • drlReadProtocol
  • drlReadProtocolJson
• Integrate Web5 functionality for DID (Decentralized Identifier) and DWN operations
• Implement error handling and loading states
• Style the components using plain CSS to match the existing design
• Ensure the layout is responsive and looks good on various screen sizes

🌟 Resources

• Web5 Documentation
• Source code for Web5 API endpoints
• Vanilla JS Documentation
• Plain CSS Documentation
• Web5 JS SDK Documentation
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[naaa760]

.take