card navigation refactoring

This commit is contained in:
Čarodej
2021-11-23 10:31:45 +01:00
parent b6c77a6685
commit 884c36a5a3
13 changed files with 295 additions and 222 deletions
@@ -8,7 +8,7 @@
</label>
<!--Input Description-->
<span v-if="description" class="text-xs text-gray-500 leading-3 -mt-0.5 block" v-html="description"></span>
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span>
<!--Input Description-->
<span v-if="error" class="error-message">
@@ -10,7 +10,7 @@
<slot></slot>
<!--Input Description-->
<small v-if="description" class="text-xs text-gray-500 leading-normal -mt-0.5 block" v-html="description"></small>
<small v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></small>
<!--Input Description-->
<span v-if="error" class="text-red-700 pt-2 text-xs">
@@ -0,0 +1,28 @@
<template>
<div class="whitespace-nowrap overflow-x-auto">
<router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': routeName === page.route, 'text-gray-600': routeName !== page.route}"
v-for="(page, i) in pages"
:to="{name: page.route}"
:key="i"
replace
>
{{ page.title }}
</router-link>
</div>
</template>
<script>
export default {
name: 'CardNavigation',
props: [
'pages'
],
computed: {
routeName() {
return this.$route.name
}
},
}
</script>
@@ -5,24 +5,23 @@
<PopupContent>
<ValidationObserver v-if="! token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Token Name" rules="required" v-slot="{ errors }">
<label class="input-label"> {{ $t('popup_personal_token.label') }}:</label>
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" :placeholder="$t('popup_personal_token.plc')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
<ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true">
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_personal_token.plc')">
</AppInputText>
</ValidationProvider>
</ValidationObserver>
<div v-if="token" class="form-wrapper">
<div v-if="token">
<div class="input-wrapper">
<label class="input-label">{{ $t('popup_personal_token.your_token') }}:</label>
<CopyInput size="small" :str="token['plainTextToken']" />
</div>
</div>
<AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" class="form-wrapper" :is-last="true">
<CopyInput size="small" :str="token['plainTextToken']" />
<InfoBox style="margin-bottom: 0; margin-top: 20px">
<p v-html="$t('popup_personal_token.copy_token')"></p>
</InfoBox>
</div>
<p v-html="$t('popup_personal_token.copy_token')"></p>
</InfoBox>
</AppInputText>
</PopupContent>
<PopupActions v-if="! token">
@@ -57,6 +56,7 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
@@ -74,6 +74,7 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
AppInputText,
PopupWrapper,
PopupActions,
PopupContent,
@@ -1,6 +1,6 @@
<template>
<div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
<input ref="sel" :value="str" id="link-input" type="text" class="input-text" readonly>
<input ref="sel" :value="str" id="link-input" type="text" class="focus-border-theme input-dark" readonly>
<div class="multi-icon">
<div class="icon-item group hover-bg-theme-100">
<copy-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
@@ -75,7 +75,7 @@ export default {
}
.icon-item {
padding: 9px 10px;
padding: 13px 10px;
display: flex;
align-items: center;
border-left: 1px solid $light_mode_border_darken;
@@ -5,11 +5,10 @@
<PopupContent>
<ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
<label class="input-label"> {{ $t('popup_2fa.input_label') }}:</label>
<input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
<ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true">
<input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
</AppInputText>
</ValidationProvider>
</ValidationObserver>
@@ -56,6 +55,7 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
@@ -73,6 +73,7 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
AppInputText,
PopupWrapper,
PopupActions,
PopupContent,