Settings Page

[ravichdev]

Issue by jauyong
Thursday Feb 04, 2021 at 20:37 GMT
Originally opened as xwp/material-design-wp-plugin#534

---

Feature description

As a plugin user, I want to be able to manage my settings such as updating fonts and icons

This is a blocker to #460 and #461

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. Add a new settings page under the "Getting Started" tabs
2. Add option for manual icon update
3. Add option for manual font update
4. #537 Add option to delete cache, reset demo content, hard reset theme... @jauyong to create a ticket for this. need to identify what can be reset. This ticket will help users troubleshoot and get back to a stable default state.
5. Add any settings that affect the backend (ie settings that don't belong in the customizer)
6. Add API Key field
7. When the API key is entered and the user refreshes/returns to the page, the key should be hidden (like how passwords are treated) or consider removing the text field altogether. Also look at Github secrets.
8. Clicking on "activate Google API Key" first brings you down to the input field on the page.

Implementation brief

QA testing instructions

Demo

Changelog entry

[ravichdev]

Comment by jauyong
Thursday Feb 04, 2021 at 20:38 GMT

---

@jwold do I recall correctly that you wanted to take a look at this first?

[ravichdev]

Comment by jauyong
Friday Feb 05, 2021 at 17:44 GMT

---

@jwold Aaron just confirmed that you wanted to look at this first to provide a design, so passing it on to you.

There were comments to mirror the existing "getting started" look and feel, but I'm sure you'll work out what's best ;)

[ravichdev]

Comment by jauyong
Wednesday Feb 10, 2021 at 15:24 GMT

---

Reassigning to @dawidmlynarz to take a look

[ravichdev]

Comment by dawidmlynarz
Friday Feb 12, 2021 at 10:50 GMT

---

Hey @jauyong , here is my first draft and a quick prototype of the Settings page. I tried to keep the same styles from the 'Getting Started' page to keep consistency.

The first section of the page is Resources but if you have a better name please let me know. It consists of Google Fonts and Material Icons tiles with the ability to Update them manually or turn on auto-updates. That's something I discussed with @ravichdev but I'd love to get the technical feedback again as well.

Things I've additionally included into the concept:

• Settings tab in the left side menu with a notification when the new updates appear.
• Last update date to have more context when the user comes to the page.

Take a look at the quick prototype recording and let me know your thoughts.

Settings.page.-.Concept.-.V1.mov

Looking forward to your feedback!

[ravichdev]

Comment by dawidmlynarz
Monday Feb 15, 2021 at 13:08 GMT

---

Please have a look at the revisited version of the Settings page. The following changes were made:
• Settings page is now below Getting started on sidebar
• Resources section name was changed into Integrations
• Created new section for Google API Key
• Included ability to Edit / Delete activated Google API Key
• Presented how Google API Key dependency could work with Integrations

Settings.+.Google.API.Key.mov

Looking forward to more feedback on this.

[ravichdev]

Comment by jauyong
Friday Feb 19, 2021 at 17:53 GMT

---

When the API key is entered, and the user returns to the page, the key should be hidden like a password is. Or consider removing the text field altogether. (look at Github secrets)

Jason to update AC and reference the ticket to reset settings.

[ravichdev]

Comment by dawidmlynarz
Wednesday Feb 24, 2021 at 13:24 GMT

---

@jauyong Here is the proposal of how can we handle the 'hidden state'. We can display it again once someone wants to edit it. The question to consider is: Should this access be password protected?

[ravichdev]

Comment by jauyong
Thursday Feb 25, 2021 at 15:46 GMT

---

@dawidmlynarz good question. Password protection wasn't mentioned when we were discussing this. I feel like that could cause more headaches for us and the user through complexities like password management. We can ask the team though.

I also remember it being mentioned that users shouldn't be able to edit the keys, but only remove them. I don't see any notes here and that your approved video demo shows an edit button.

@rodydavis can you confirm:

1. Users can only delete a saved API key, not edit.
2. Is there any need for password protecting the API key?

[ravichdev]

Comment by jauyong
Friday Feb 26, 2021 at 16:05 GMT

---

@dawidmlynarz to make the following update:

1. remove the edit button.

no need for password protection.

[ravichdev]

Comment by dawidmlynarz
Monday Mar 01, 2021 at 09:50 GMT

---

Please find updated screens of Google API Key interaction below divided into states:

Empty state

Active / Typing KEY

API Key Activated

API Key Hidden

API Key Remove Confirmation

NOTE: Let me know when you're taking the task and I can provide you a link to Figma.

[ravichdev]

Comment by ravichdev
Monday Mar 01, 2021 at 10:00 GMT

---

@dawidmlynarz Looks good, for the API key field, after a user enters the key and saves it, they wouldn't be able to see it. It will be *** like a password field. We are good here though, don't think we need to update the mocks to denote the password field update.

[ravichdev]

Comment by emeaguiar
Monday Mar 08, 2021 at 19:11 GMT

---

@dawidmlynarz Would you happen to have either the figma link or a sketch file with these updates? Wondering if I can get the color values or there more specifics that I can't get in the videos

[ravichdev]

Comment by dawidmlynarz
Wednesday Mar 10, 2021 at 09:36 GMT

---

@emeaguiar I have sent you Figma link via Slack. Let me know if you have access.

[csossi]

Verified in QA