Merge pull request #91 from hydroserver2/134-account-form

134 account form

Author: kjlippold

src/components/account/AccountForm.vue

@@ -3,43 +3,62 @@
     <slot name="header">
       <v-card-title>Edit Profile</v-card-title>
     </slot>
-    <v-divider class="my-4"></v-divider>
+
+    <v-divider class="my-4" />
+
     <v-card-text>
       <v-form
         ref="myForm"
         v-model="valid"
         validate-on="blur"
-        @submit.prevent="updateUser"
+        @submit.prevent="onSubmit"
       >
         <v-row>
           <v-col cols="12" sm="4">
             <v-text-field
               v-model="userForm.firstName"
               label="First Name *"
               :rules="rules.requiredName"
-            ></v-text-field>
+            />
           </v-col>
           <v-col cols="12" sm="4">
             <v-text-field
               v-model="userForm.middleName"
               label="Middle Name"
               :rules="rules.name"
-            ></v-text-field>
+            />
           </v-col>
           <v-col cols="12" sm="4">
             <v-text-field
               v-model="userForm.lastName"
               label="Last Name *"
               :rules="rules.requiredName"
-            ></v-text-field>
+            />
           </v-col>
 
           <v-col cols="12" v-if="!userForm.isVerified">
             <v-text-field
               v-model="userForm.email"
               label="Email *"
               :rules="rules.email"
-            ></v-text-field>
+            />
+          </v-col>
+
+          <v-col v-if="!isEdit" cols="12" md="6">
+            <v-text-field
+              type="password"
+              v-model="userForm.password"
+              label="Password *"
+              :rules="rules.password"
+            />
+          </v-col>
+          <v-col v-if="!isEdit" cols="12" md="6">
+            <v-text-field
+              type="password"
+              v-model="confirmPassword"
+              label="Confirm Password *"
+              :rules="rules.passwordMatch(userForm.password)"
+            />
           </v-col>
 
           <v-col cols="12" sm="6">
@@ -48,7 +67,7 @@
               v-maska:[phoneMask]
               label="Phone Number"
               :rules="rules.phoneNumber"
-            ></v-text-field>
+            />
           </v-col>
 
           <v-col cols="12" sm="6">
@@ -57,23 +76,19 @@
               label="User Type *"
               :items="userTypes"
               :rules="rules.required"
-            ></v-autocomplete>
+            />
           </v-col>
 
           <v-col cols="12">
-            <v-text-field
-              v-model="userForm.address"
-              label="Address"
-            ></v-text-field>
+            <v-text-field v-model="userForm.address" label="Address" />
           </v-col>
 
           <v-col>
             <v-text-field
               v-model="userForm.link"
               label="User's Link (URL)"
               :rules="userForm.link ? rules.urlFormat : []"
-            >
-            </v-text-field>
+            />
           </v-col>
         </v-row>
 
@@ -82,22 +97,22 @@
           hide-details
           label="Affiliated with an Organization"
           color="primary"
-        ></v-switch>
+        />
 
         <v-row v-if="userForm.organization && showOrg">
           <v-col cols="12" sm="8">
             <v-text-field
               v-model="userForm.organization.name"
               label="Organization Name *"
               :rules="rules.requiredName"
-            ></v-text-field>
+            />
           </v-col>
           <v-col cols="12" sm="4">
             <v-text-field
               v-model="userForm.organization.code"
               label="Organization Code *"
               :rules="rules.requiredName"
-            ></v-text-field>
+            />
           </v-col>
           <v-col cols="12" sm="6">
             <v-autocomplete
@@ -112,7 +127,7 @@
               v-model="userForm.organization.link"
               label="Organization Link"
               :rules="userForm.organization.link ? rules.urlFormat : []"
-            ></v-text-field>
+            />
           </v-col>
           <v-col cols="12">
             <v-textarea
@@ -121,7 +136,7 @@
               :rules="
                 userForm.organization.description ? rules.maxLength(2000) : []
               "
-            ></v-textarea>
+            />
           </v-col>
         </v-row>
 
@@ -134,14 +149,16 @@
           </v-alert>
         </v-card-text>
 
-        <v-divider></v-divider>
+        <v-divider />
 
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn-cancel v-if="hasCancelButton" @click="emit('close')"
-            >Cancel</v-btn-cancel
-          >
-          <v-btn-primary type="submit">Save</v-btn-primary>
+          <v-spacer />
+          <v-btn-cancel v-if="hasCancelButton" @click="emit('close')">
+            Cancel
+          </v-btn-cancel>
+          <v-btn-primary type="submit">
+            {{ isEdit ? 'Save' : 'Create User' }}
+          </v-btn-primary>
         </v-card-actions>
       </v-form>
     </v-card-text>
@@ -161,21 +178,28 @@ import router from '@/router/router'
 import { Snackbar } from '@/utils/notifications'
 import { api } from '@/services/api'
 import { storeToRefs } from 'pinia'
+import { useAuthStore } from '@/store/authentication'
 
-defineProps({
+const props = defineProps({
   hasCancelButton: { type: Boolean, required: false, default: true },
+  isEdit: Boolean,
 })
 
+const { setTokens } = useAuthStore()
 const { setUser } = useUserStore()
 const { user } = storeToRefs(useUserStore())
-let userForm = reactive<User>(JSON.parse(JSON.stringify(user.value)))
+
+let userForm = reactive<User>(
+  props.isEdit ? JSON.parse(JSON.stringify(user.value)) : new User()
+)
 
 const phoneMask = { mask: '(###) ###-####' }
 const valid = ref(false)
 const myForm = ref<VForm>()
 const showOrg = ref(!!userForm.organization)
 const hadOrgInitially = ref<boolean>(!!userForm.organization)
 const tempOrganization = ref<Organization | null>(null)
+const confirmPassword = ref('')
 
 watch(showOrg, (newVal) => {
   if (newVal) {
@@ -195,26 +219,41 @@ watch(showOrg, (newVal) => {
 
 const emit = defineEmits(['close'])
 
-const updateUser = async () => {
-  await myForm.value?.validate()
-  if (!valid.value) return
+async function createUser() {
+  try {
+    const data = await api.createUser(userForm)
+    setUser(data.user)
+    setTokens(data.access, data.refresh)
+    Snackbar.success('Account created.')
+    await router.push({ name: 'VerifyEmail' })
+  } catch (error) {
+    console.error('Error creating user', error)
+    if ((error as Error).message === '409') {
+      Snackbar.warn('A user with this email already exists.')
+    }
+  }
+}
 
+const updateUser = async () => {
   try {
     userForm = await api.updateUser(userForm, user.value)
-    if (userForm !== undefined) {
-      setUser(userForm)
-    }
+    if (userForm !== undefined) setUser(userForm)
   } catch (error) {
     console.error('Error updating user', error)
   }
-
-  if (!user.value?.isVerified) {
-    await router.push({ name: 'VerifyEmail' })
-  } else {
-    Snackbar.success('Your changes have been saved.')
-  }
+  if (!user.value?.isVerified) await router.push({ name: 'VerifyEmail' })
+  else Snackbar.success('Your changes have been saved.')
   emit('close')
 }
 
-onMounted(async () => await myForm.value?.validate())
+const onSubmit = async () => {
+  await myForm.value?.validate()
+  if (!valid.value) return
+  if (props.isEdit) updateUser()
+  else createUser()
+}
+
+onMounted(async () => {
+  if (props.isEdit) await myForm.value?.validate()
+})
 </script>

src/pages/account/CompleteProfile.vue

@@ -1,6 +1,11 @@
 <template>
   <v-container>
-    <AccountForm v-if="loaded" :has-cancel-button="false">
+    <AccountForm
+      v-if="loaded"
+      :has-cancel-button="false"
+      :is-edit="true"
+      @close="navigateToSites()"
+    >
       <template v-slot:header>
         <v-card-title align="center" class="mb-2 signup-title">
           Successfully authenticated!
@@ -21,12 +26,17 @@ import { useUserStore } from '@/store/user'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import router from '@/router/router'
 
 const route = useRoute()
 const { user } = storeToRefs(useUserStore())
 const { setTokens } = useAuthStore()
 const loaded = ref(false)
 
+const navigateToSites = async () => {
+  await router.push({ name: 'Sites' })
+}
+
 onMounted(async () => {
   const accessToken = (route.query.t as string) || ''
   const refreshToken = (route.query.rt as string) || ''

src/pages/account/Profile.vue

@@ -10,7 +10,7 @@
   </v-container>
 
   <v-dialog v-model="openForm" width="40rem">
-    <AccountForm @close="openForm = false" />
+    <AccountForm @close="openForm = false" :is-edit="true" />
   </v-dialog>
 
   <v-dialog v-model="openDelete" width="40rem">