web/satellite/vuetify: change name dialog

Added change name dialog for vuetify app and wired it up with backend.

Issue:
https://github.com/storj/storj/issues/6088

Change-Id: I37af595c9e48034d59ead051918bbb4ec5e6ff31

web/satellite/vuetify-poc/src/assets/icon-change-name.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0H23.3463C28.8835 0 31.0805 0.613723 33.2353 1.76617C35.3902 2.91861 37.0814 4.60977 38.2338 6.76466L38.3214 6.93056C39.4029 9.00672 39.9846 11.2 40 16.4423V23.3463C40 28.8835 39.3863 31.0805 38.2338 33.2353C37.0814 35.3902 35.3902 37.0814 33.2353 38.2338L33.0694 38.3214C30.9933 39.4029 28.8 39.9846 23.5577 40H16.6537C11.1165 40 8.91954 39.3863 6.76466 38.2338C4.60977 37.0814 2.91861 35.3902 1.76617 33.2353L1.67858 33.0694C0.597074 30.9933 0.0154219 28.8 0 23.5577V16.6537C0 11.1165 0.613723 8.91954 1.76617 6.76466C2.91861 4.60977 4.60977 2.91861 6.76466 1.76617L6.93055 1.67858C9.00672 0.597074 11.2 0.0154219 16.4423 0Z" fill="#0218A7"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M31.2127 30.6406C33.8624 30.6406 36.3479 31.3403 38.4932 32.5643C38.3861 32.791 38.2731 33.0134 38.1544 33.2354C37.002 35.3903 35.3108 37.0815 33.1559 38.2339L32.99 38.3215C30.9234 39.3981 28.7407 39.9794 23.55 39.9999L17.5208 40.0001C19.6372 34.5254 24.9694 30.6406 31.2127 30.6406Z" fill="#00E366"/>
+    <path d="M31.2396 28.0744C34.448 28.0744 37.049 25.4843 37.049 22.2892C37.049 19.0941 34.448 16.504 31.2396 16.504C28.0311 16.504 25.4302 19.0941 25.4302 22.2892C25.4302 25.4843 28.0311 28.0744 31.2396 28.0744Z" fill="#0149FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.65385 30.6406C14.8972 30.6406 20.2293 34.5254 22.3458 40L16.5742 40.0001C11.037 40.0001 8.84006 39.3863 6.68518 38.2339C4.5303 37.0814 2.83913 35.3903 1.68669 33.2354L1.5991 33.0695C1.51406 32.9062 1.4321 32.7422 1.35327 32.5761C3.50303 31.3447 5.99587 30.6406 8.65385 30.6406Z" fill="#0149FF"/>
+    <path d="M8.68074 28.0744C11.8892 28.0744 14.4901 25.4843 14.4901 22.2892C14.4901 19.0941 11.8892 16.504 8.68074 16.504C5.47229 16.504 2.87134 19.0941 2.87134 22.2892C2.87134 25.4843 5.47229 28.0744 8.68074 28.0744Z" fill="#FF458B"/>
+    <path d="M20.0174 28.0744C23.9523 28.0744 27.1422 24.8978 27.1422 20.9793C27.1422 17.0607 23.9523 13.8842 20.0174 13.8842C16.0825 13.8842 12.8926 17.0607 12.8926 20.9793C12.8926 24.8978 16.0825 28.0744 20.0174 28.0744Z" fill="#FFC600"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.973 30.6406C25.5736 30.6406 30.4409 33.7667 32.9116 38.3622L32.99 38.3215C30.9233 39.398 28.7407 39.9793 23.55 39.9998L16.5742 40.0001C11.3165 40.0001 9.07035 39.4467 7.01221 38.4042C9.47541 33.7858 14.3554 30.6406 19.973 30.6406Z" fill="#FFC600"/>
+</svg>

web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue

@@ -0,0 +1,135 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-dialog
+        v-model="model"
+        width="auto"
+        min-width="320px"
+        max-width="410px"
+        transition="fade-transition"
+    >
+        <v-card rounded="xlg">
+            <v-card-item class="pl-7 pr-0 pb-5 pt-0">
+                <v-row align="start" justify="space-between" class="ma-0">
+                    <v-row align="center" class="ma-0 pt-5">
+                        <img class="flex-shrink-0" src="@poc/assets/icon-change-name.svg" alt="Change name">
+                        <v-card-title class="font-weight-bold ml-4">Edit name</v-card-title>
+                    </v-row>
+                    <v-btn
+                        icon="$close"
+                        variant="text"
+                        size="small"
+                        color="default"
+                        :disabled="isLoading"
+                        @click="model = false"
+                    />
+                </v-row>
+            </v-card-item>
+            <v-divider />
+            <v-card-item class="px-7 py-5">
+                <v-form v-model="formValid">
+                    <v-col cols="12" class="px-0">
+                        <v-text-field
+                            v-model="name"
+                            variant="outlined"
+                            :rules="rules"
+                            label="Full name"
+                            required
+                            autofocus
+                        />
+                    </v-col>
+                </v-form>
+            </v-card-item>
+            <v-divider />
+            <v-card-actions class="px-7 py-5">
+                <v-row class="ma-0">
+                    <v-col>
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            block
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                            @click="model = false"
+                        >
+                            Cancel
+                        </v-btn>
+                    </v-col>
+                    <v-col>
+                        <v-btn
+                            color="primary"
+                            variant="flat"
+                            block
+                            :disabled="isLoading || !formValid"
+                            :loading="isLoading"
+                            @click="onChangeName"
+                        >
+                            Save
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+    VDialog,
+    VCard,
+    VCardItem,
+    VCardTitle,
+    VDivider,
+    VCardActions,
+    VRow,
+    VCol,
+    VBtn,
+    VForm,
+    VTextField,
+} from 'vuetify/components';
+
+import { useLoading } from '@/composables/useLoading';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { UpdatedUser } from '@/types/users';
+
+const rules = [
+    (value: string) => (!!value || 'Can\'t be empty'),
+];
+
+const userStore = useUsersStore();
+const { isLoading, withLoading } = useLoading();
+
+const props = defineProps<{
+    modelValue: boolean,
+}>();
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void,
+}>();
+
+const model = computed<boolean>({
+    get: () => props.modelValue,
+    set: value => emit('update:modelValue', value),
+});
+const formValid = ref<boolean>(false);
+const name = ref<string>(userStore.userName);
+
+/**
+ * Handles change name request.
+ */
+async function onChangeName(): Promise<void> {
+    if (!formValid.value) return;
+
+    await withLoading(async () => {
+        try {
+            await userStore.updateUser(new UpdatedUser(name.value, name.value));
+        } catch (error) {
+            return;
+        }
+
+        emit('update:modelValue', false);
+    });
+}
+</script>

web/satellite/vuetify-poc/src/views/AccountSettings.vue

@@ -21,12 +21,14 @@
                     <v-list-item-title>Name</v-list-item-title>
 
                     <v-list-item-subtitle>
-                        Tome Boshevski
+                        {{ user.getFullName() }}
                     </v-list-item-subtitle>
 
                     <template #append>
                         <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small">Edit Name</v-btn>
+                            <v-btn variant="outlined" color="default" size="small" @click="isChangeNameDialogShown = true">
+                                Edit Name
+                            </v-btn>
                         </v-list-item-action>
                     </template>
                 </v-list-item>
@@ -37,7 +39,7 @@
                     <v-list-item-title>Email</v-list-item-title>
 
                     <v-list-item-subtitle>
-                        tome@storj.io
+                        {{ user.email }}
                     </v-list-item-subtitle>
 
                     <!-- <template v-slot:append>
@@ -138,10 +140,14 @@
     <ChangePasswordDialog
         v-model="isChangePasswordDialogShown"
     />
+
+    <ChangeNameDialog
+        v-model="isChangeNameDialogShown"
+    />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import {
     VContainer,
     VCard,
@@ -156,7 +162,21 @@ import {
     VCheckboxBtn,
 } from 'vuetify/components';
 
+import { useUsersStore } from '@/store/modules/usersStore';
+import { User } from '@/types/users';
+
 import ChangePasswordDialog from '@poc/components/dialogs/ChangePasswordDialog.vue';
+import ChangeNameDialog from '@poc/components/dialogs/ChangeNameDialog.vue';
+
+const usersStore = useUsersStore();
 
 const isChangePasswordDialogShown = ref<boolean>(false);
+const isChangeNameDialogShown = ref<boolean>(false);
+
+/**
+ * Returns user entity from store.
+ */
+const user = computed((): User => {
+    return usersStore.state.user;
+});
 </script>