Create settings page component - Vue

[blackgirlbytes]

Create settings page component - Vue

🚀 Goal

Create a Settings page component in Vue 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 Vue.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 Vue.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 Vue, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Create a SettingsPage.vue component
• Implement a ProfileSettings.vue 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 Tailwind 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
• Vue.js Documentation
• Tailwind 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! 🎉

[Johnnyevans32]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[Johnnyevans32]

hi @blackgirlbytes @leordev, regarding DRL (Decentralized Resource Locator) utility functions, can I have more documentation on this, it's pretty unclear from the implementation on the react version how I'm to use it to retrieve the stored data from dwn, it throws net::ERR_NAME_NOT_RESOLVED when I use the same code from react version

const loadProfile = async () => {
    try {
      const profileRecord = await drlReadProtocolJson(did, profile.uri, "name");
      // console.info({ profileRecord }); // TODO: remove
      setDisplayName(profileRecord?.displayName);
      setHasProfileName(true);
    } catch (e) {
      console.info("fail to load profile, it's ok if it's not found", e);
    }
  };

[Johnnyevans32]

i also tested the implementation on the react version and it seems to be same result, am I to implement a different function that uses $web5.dwn to retrieve the profile data?

[blackgirlbytes]

Hmm, I'll have to look into this deeper. Leo might know best because he made the React project, but he may take a bit to respond. In the mean time, I know this file has a list of the available DRLs. Let me try to do dig a little deeper to get back to you https://github.com/TBD54566975/dwn-server/blob/e14fb80281e31a88aa57b85f067887e8e5191547/src/http-api.ts#L238

@Johnnyevans32

[Johnnyevans32]

ok thanks, also what's the use of the DRLs, I thought we could easily retrieve data using the DWNs operations @blackgirlbytes

[blackgirlbytes]

yes you can use DWN operations to retrieve data. I think the idea is that , we can read the data from the DWNs without any extra code just by using the native browser fetch API.. the urls works out of the box in any browser context.

So it's just an alternative streamlined way to fetch and render data.