From 8205c11bd9a38c49608b0641dd89df22f492efd0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:49:56 +0100
Subject: [PATCH] Profile - remove form styling. data is not editable yet

ref #10
---
 src/components/Profile.vue | 63 +++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ccf280d..7d60dcf 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -77,53 +77,38 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">{{ $t('vorname') }}</div>
-                      <input
-                        name="first-name"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="text"
-                        :placeholder="[[$t('vorname')]]"
-                        v-model="state.firstname"
+                      <div class="text-lg">{{ $t('vorname') }}</div>
+                      <p
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.firstname"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('mittelname') }}</div>
-                      <input
-                        name="middle-name"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="text"
-                        :placeholder="[[$t('mittelname')]]"
-                        v-model="state.middlename"
+                      <div class="text-lg">{{ $t('mittelname') }}</div>
+                      <p
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.middlename"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('nachname') }}</div>
-                      <input
-                        name="last-name"
-                        type="text"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('nachname')]]"
-                        v-model="state.lastname"
+                      <div class="text-lg">{{ $t('nachname') }}</div>
+                      <p
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.lastname"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('e_mail_adress')]]"
-                        v-model="state.email"
+                      <div class="text-lg">{{ $t('e_mail_adress') }}</div>
+                      <p
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.email"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('phone_number') }}</div>
-                      <input
-                        name="tel"
-                        type="tel"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('phone_number')]]"
-                        v-model="state.phone"
+                      <div class="text-lg">{{ $t('phone_number') }}</div>
+                      <p
+                        class="w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.phone"
                       />
                     </div>
                   </div>
@@ -183,12 +168,12 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch, defineProps } from "vue";
+import { ref, reactive } from "vue";
 import { useToast } from "vue-toastification";
 import axios from "redaxios";
-import isEmail from 'validator/es/lib/isEmail';
-import isMobilePhone from 'validator/es/lib/isMobilePhone';
-import isPostalCode from 'validator/es/lib/isPostalCode';
+// import isEmail from 'validator/es/lib/isEmail';
+// import isMobilePhone from 'validator/es/lib/isMobilePhone';
+// import isPostalCode from 'validator/es/lib/isPostalCode';
 // 
 const state = reactive({
   phone: "",