Display account quota usage in new UI

frontend/src/components/domains/DomainSummary.vue

@@ -14,7 +14,7 @@
     </v-row>
     <v-row>
       <v-col cols="6"><translate>Quota</translate></v-col>
-      <v-col cols="6">{{ domain.quota }} MB</v-col>
+      <v-col cols="6">{{ domain.quota }} <translate>MB</translate></v-col>
     </v-row>
     <v-row>
       <v-col cols="6"><translate>Default mailbox quota</translate></v-col>

frontend/src/components/identities/AccountAliases.vue

@@ -4,9 +4,9 @@
     <translate class="headline">Aliases</translate>
   </v-card-title>
   <v-card-text>
-    <p v-for="alias in account.aliases" :key="alias">
+    <v-chip v-for="alias in account.aliases" :key="alias" class="mr-2 mt-2">
       {{ alias }}
-    </p>
+    </v-chip>
   </v-card-text>
 </v-card>
 </template>

frontend/src/components/identities/AccountSummary.vue

@@ -29,7 +29,28 @@
       <v-col cols="6"><translate>Phone number</translate></v-col>
       <v-col cols="6">{{ account.phone_number }}</v-col>
     </v-row>
+    <template v-if="account.mailbox">
+      <v-row>
+        <v-col cols="6"><translate>Quota</translate></v-col>
+        <v-col cols="6">
+          <v-progress-linear
+            :color="account.mailbox.quota_usage < 80 ? 'primary' : 'warning'"
+            :value="account.mailbox.quota_usage"
+            height="25"
+            class="white--text"
+            >
+            <template v-slot:default="{ value }">
+              {{ Math.ceil(value) }}% ({{ account.mailbox.quota }} <translate>MB</translate>)
+            </template>
+          </v-progress-linear>
+        </v-col>
+      </v-row>
+      <v-row v-if="account.mailbox.message_limit">
+        <v-col cols="6"><translate>Daily sending limit</translate></v-col>
+        <v-col cols="6">{{ account.mailbox.message_limit }}</v-col>
+      </v-row>
 
+    </template>
   </v-card-text>
 </v-card>
 </template>