From 5c5f157a77614adf4d7abfe61cfa44b90a91f162 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 Jan 2022 21:00:30 +0100
Subject: [PATCH] add address.name to frontend

---
 src/components/profile/Header.vue |  8 ++++++++
 src/views/profile/Edit.vue        | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/profile/Header.vue b/src/components/profile/Header.vue
index dd53e63..4d38dd7 100644
--- a/src/components/profile/Header.vue
+++ b/src/components/profile/Header.vue
@@ -16,6 +16,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </span>
         </div>
       </div>
+      <div v-if="profile?.address?.name">
+        <div class="d-flex align-items-center">
+          <i class="fs-4 bi bi-person-fill text-dark mx-2"></i>
+          <div class="text-white">
+            a.k.a. {{ profile.address.name }}
+          </div>
+        </div>
+      </div>
       <div v-if="location">
         <div class="d-flex align-items-center">
           <i class="fs-4 bi bi-geo-alt-fill text-dark mx-2"></i>
diff --git a/src/views/profile/Edit.vue b/src/views/profile/Edit.vue
index 0703c34..091de25 100644
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </div>
 
           <div class="row mb-4">
-            <div class="col-6 mb-3">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
               <label class="form-label">Nickname</label>
               <input
                 type="text"
@@ -43,7 +43,17 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 required
               />
             </div>
-            <div class="col-6 mb-3">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
+              <label class="form-label">Klarname (optional)</label>
+              <input
+                type="text"
+                class="form-control"
+                id="realname"
+                maxlength="25"
+                v-model="profile.address.name"
+              />
+            </div>
+            <div class="col-12 col-md-4">
               <label class="form-label">
                 Pronomen
                 <i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>