Complete account wizard summary

aleksis/core/frontend/components/account/AccountRegistrationForm.vue

@@ -520,7 +520,7 @@ import PersonDetailsCard from "../person/PersonDetailsCard.vue";
 
           <v-stepper-content :step="getStepIndex('confirm')">
             <h2 class="text-h6 mb-4">{{ $t(getStepTitleKey("confirm")) }}</h2>
-            <person-details-card class="mb-4" :person="personDataForSummary" />
+            <person-details-card class="mb-4" :person="personDataForSummary" :show-username="true" title-key="accounts.signup.form.steps.confirm.card_title" />
 
             <ApolloMutation
               :mutation="require('./accountRegistrationMutation.graphql')"
@@ -644,9 +644,26 @@ export default {
       if (!this.data.email.localPart && !this.data.email.domain) {
         const { email, ...filteredData } = data;
         data = filteredData;
+      } else {
+        data = {
+          ...data,
+          email: {
+            localPart: data.email.localPart,
+            domain: data.email.domain.id,
+          },
+        };
       }
       return data;
     },
+    currentEmail() {
+      if (this.emailMode === 0 && this.data.email.localPart && this.data.email.domain) {
+        return `${this.data.email.localPart}@${this.data.email.domain.domain}`;
+      } else if (this.data.user.email) {
+        return this.data.user.email;
+      } else {
+        return null;
+      }
+    },
     personDataForSummary() {
       return {
         ...this.data.person,
@@ -659,6 +676,8 @@ export default {
             country: this.data.person.country,
           },
         ],
+        username: this.data.user.username,
+        email: this.currentEmail,
       }
     },
     steps() {
@@ -715,7 +734,7 @@ export default {
       data: {
         email: {
           localPart: "",
-          domain: "",
+          domain: {},
         },
         person: {
           firstName: "",

aleksis/core/frontend/components/person/PersonDetailsCard.vue

 <template>
   <v-card v-bind="$attrs">
-    <v-card-title>{{ $t("person.details") }}</v-card-title>
+    <v-card-title>{{ $t(titleKey) }}</v-card-title>
 
     <v-list two-line>
       <v-list-item>
@@ -21,6 +21,22 @@
       </v-list-item>
       <v-divider inset />
 
+      <v-list-item v-if="showUsername">
+        <v-list-item-icon>
+          <v-icon> mdi-login-variant</v-icon>
+        </v-list-item-icon>
+
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ person.username }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ $t("person.username") }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-divider inset />
+
       <v-list-item>
         <v-list-item-icon>
           <v-icon> mdi-human-non-binary</v-icon>
@@ -186,6 +202,16 @@ export default {
       type: Object,
       required: true,
     },
+    showUsername: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    titleKey: {
+      type: String,
+      required: false,
+      default: "person.details",
+    },
   },
 }
 </script>

aleksis/core/frontend/messages/en.json

@@ -148,7 +148,8 @@
             }
           },
           "confirm": {
-            "title": "Confirm"
+            "title": "Confirm account registration",
+            "card_title": "Your account data"
           }
         },
         "rules": {