Password protect settings

[elshimone]

Title

Add panel to settings page to password protect settings.

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #2907

Description

Adds a panel to the settings page to password protect all settings. The password is currently stored in the clear along with other persistent settings.
If no password is set, the panel prompts the user to set a password. If a password is set, the other settings panels are hidden until the correct password is supplied. If the password is supplied, the settings are made visible and an option to remove the password is enabled.

Screenshots

Dialog to set a password to prevent access to settings

Dialog to enter a password to access settings (other settings are hidden)

Incorrect password prompt

Dialog to lock or remove the password when correct password has been entered

Testing

I have tested the PR manually by going through the following steps:

• Start Freetube
• Navigate to settings, observe settings are available
• Open password protect settings panel
• Enter a password, and click set
• Other settings panels are hidden, observe prompt to enter password to unlock
• Enter an incorrect password and click "unlock"; incorrect password dialog show. Dismiss by clicking ok
• Enter correct password. Observe that settings are unlocked.
• Navigate away from setting, e.g. to subscriptions
• Return to settings, observe they are locked
• Restart app, observe settings are locked
• Enter correct password, click remove password button. Observe settings are unlocked
• Restart app, observe settings are unlocked

I have not observed any regressions due to my changes to the ft-input component, but would like some advice on what I should look for here.

Desktop

• OS:
  Pop_OS
• OS Version:
  22.04
• FreeTube version:
  18.0.0

Additional context

[PikachuEXE]

I use yarn dev to start app
After setting password and restart via yarn dev again the settings is unlocked
Not sure if caused by yarn dev or what (But no issue for other settings so I dunno)

Also I am not sure if that section should be put on the top (as it might not be a frequently used setting)

[PikachuEXE]

@ChunkyProgrammer I have just reviewed it lol

[elshimone]

I use yarn dev to start app After setting password and restart via yarn dev again the settings is unlocked Not sure if caused by yarn dev or what (But no issue for other settings so I dunno)

Also I am not sure if that section should be put on the top (as it might not be a frequently used setting)

Good point I will move it from the top to the bottom. I'll look into the setting not being persisted, perhaps I broke something when I was refactoring the code. I had previously seen my subscriptions and other settings being reset with yarn dev, but I have just checked it and that doesn't happen any more (but the password setting is lost).

[elshimone]

Ok I have moved the password settings to the bottom and fixed the setting persistence issue. I had not read the comments in settings.js properly, and was calling the autogenerated setter rather than the update call which actually persists things - it can't have ever worked before 😊

[PikachuEXE]

Tested locally
Relying on others to code review settings related code

[absidue]

Thanks for your PR, the code works but I have to say I am not a fan of the UX, having the enter password box in a settings section that is collapsed by default, doesn't make for a great unlocking experience.

It might be better if you split this up into two parts, the set, change and clear password settings section and then move the unlocking part into the Settings page. You could use v-if and v-else and centre the unlock box in the middle of the screen.

[elshimone]

Yes that is a good idea, I will change the UX as you suggest @absidue

[elshimone]

I have split out the password entry:

and password management section:

The password entry is focused so you can type the password straight in.

[PikachuEXE]

Found an error:

[elshimone]

Fixed.

[absidue]

Could you please remove the unused component imports, you only need to import and register the components that you use in the associated .vue file.