lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Profile - remove form styling. data is not editable yet

Browse Source 
ref #10
This commit is contained in:
Philipp Dormann 2021-03-07 13:49:56 +01:00
parent b30277b617
commit 8205c11bd9
1 changed files with 24 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Profile.vue
View File

@ -77,53 +77,38 @@
<form class="form flex flex-wrap w-full"> <form class="form flex flex-wrap w-full">
<div class="w-full"> <div class="w-full">
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('vorname') }}</div> <div class="text-lg">{{ $t('vorname') }}</div>
<input <p
name="first-name" 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"
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" v-text="state.firstname"
type="text"
:placeholder="[[$t('vorname')]]"
v-model="state.firstname"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('mittelname') }}</div> <div class="text-lg">{{ $t('mittelname') }}</div>
<input <p
name="middle-name" 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"
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" v-text="state.middlename"
type="text"
:placeholder="[[$t('mittelname')]]"
v-model="state.middlename"
/> />
</div> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('nachname') }}</div> <div class="text-lg">{{ $t('nachname') }}</div>
<input <p
name="last-name" 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"
type="text" v-text="state.lastname"
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> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('e_mail_adress') }}</div> <div class="text-lg">{{ $t('e_mail_adress') }}</div>
<input <p
name="email" 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"
type="email" v-text="state.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> </div>
<div class="form-element"> <div class="form-element">
<div class="form-label">{{ $t('phone_number') }}</div> <div class="text-lg">{{ $t('phone_number') }}</div>
<input <p
name="tel" 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"
type="tel" v-text="state.phone"
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> </div>
</div> </div>
@ -183,12 +168,12 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, reactive, watch, defineProps } from "vue"; import { ref, reactive } from "vue";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
import axios from "redaxios"; import axios from "redaxios";
import isEmail from 'validator/es/lib/isEmail'; // import isEmail from 'validator/es/lib/isEmail';
import isMobilePhone from 'validator/es/lib/isMobilePhone'; // import isMobilePhone from 'validator/es/lib/isMobilePhone';
import isPostalCode from 'validator/es/lib/isPostalCode'; // import isPostalCode from 'validator/es/lib/isPostalCode';
// //
const state = reactive({ const state = reactive({
phone: "", phone: "",