feat(settings) account settings

[Janbong]

I started working on an Account Settings page.

After I completed most of the UI part, I noticed there was already an old (nearly two years) account-settings branch and accompanying PR(#717). I was able to combine my changes and the ones made in the old PR to accommodate for code changes that have been done the last two years.

I have two problems though:

• I would expect the updateUserPassword to NOT work if you pass on an incorrect "Current Password". Turns out you can change your password even if you supply the wrong current password to the jellyfin-client-axios API. I use a text field for current password. I should either remove it or find a way to validate the current password and only then update the user's password
• When updating the user's account image, I used the "Key Changing Technique" (described here) to reload the user-image component without a full reload of the page. Two sub-problems occur here which can both be solved by just automatically refreshing the whole page after image is updated, although that's less elegant:
  • Only when adding an image when originally there was no image, this works. When updating an the image when there originally is another image uploaded, you can see the component reloading (quick switch from the default avatar to the image), but the image is not actually changing until the page is refreshed. Also removing the image does not update it to the default avatar. I think this is because of the way the user-image component works with the "loading" boolean. Not sure though.
  • The small avatar on the top right is not updated when doing this, because it is outside of the component / page that is being reloaded.

[ThibaultNocchi]

Hello,
Thanks for your PR!

For your questions:

• The API doesn't check the current password if the user is requesting a change is an admin. Btw this also enables admin to change other users passwords. So yeah, when changing your password, feel free to either 1. try to login the user again, but with the current SDK that could imply some edge case, or 2. just drop the current password field when the user is an admin.
• For the first avatar, if the key change doesn't work, have you tried the forceUpdate method? https://vuejs.org/api/component-instance.html#forceupdate
• For the second avatar, I guess an event of some sort could be propagated, but I don't remember us implementing such a solution yet. So feel free to bring something to the table.

Also, I'd like to point out that we're currently working to migrate the whole codebase to Vue 3 in the vite branch. Maybe it could be worth to target this one? Do mind that it is still a WIP, a lot of things aren't working.

[Janbong]

Seems like it would be better indeed to make a Vue 3 version of this. I have made some changes locally already. The auth.ts store is missing in the vite branch though. Since translating that over is a bit over my head, I will just wait until someone else updates that.

[ThibaultNocchi]

The auth store as currently has been dropped in the change to Vue 3. You can now use the custom composable we made just like here: https://github.com/jellyfin/jellyfin-vue/blob/vite/frontend/src/components/Item/ItemMenu.vue#L229

import { useRemote } from '@/composables';
const remote = useRemote();
console.log(remote.auth.currentUser.value?.Policy?.IsAdministrator)

for instance in the composition API, or directly with $remote.auth.currentUser?.Policy?.isAdministrator in Vue template or option API. :)

[ferferga]

@Janbong All the server-related features (including auth) are now in the remote plugin which you can access using $remote in the template section or useRemote() from composables in the script setup section.

Anyway, I'm not a fan of merging this with Vue 3: Vue 3 should be merged as a port/refactor of all the current stuff and new features should be going in PRs like this once it's merged back (the diff of the vite branch is already unmanageable).

However, I'd like to invite you to check all the places where we had v-item lists and revisit them like you did in #1855. There are a lot of lists in the client that need upgrades and can benefit from your contributions. Also, you can try migrating Vuetify components over (a lot of them has props and attributes changed), fix lint errors, type errors, etc... There's a lot of things you can do if you want to keep helping. All of this will already give you a greater confidence when working in the codebase.

I plan to write some better contribution docs after all the madness of the Vue 3 switch is done.

By the way, in case you don't know that, we're on Matrix so you can chat with us in case you have any doubt, instant messagging sometimes simplifies communication a lot :)

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	a57a170
Status	❌ Failure. Check workflow logs for details
Preview URL	Not available
Type	🔀 Preview

View build logs
View bot logs