Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/Info.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | <status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | ||||
<div class="card" id="user-info"> | <div class="card" id="user-info"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }} | <div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }} | ||||
<btn icon="trash-alt" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()"> | <btn icon="trash-can" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()"> | ||||
{{ $t('user.delete') }} | {{ $t('user.delete') }} | ||||
</btn> | </btn> | ||||
</div> | </div> | ||||
<div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div> | <div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<ul class="nav nav-tabs mt-3" role="tablist"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | ||||
▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<input type="checkbox" id="pass-mode-link" value="link" class="btn-check" @change="setPasswordMode"> | <input type="checkbox" id="pass-mode-link" value="link" class="btn-check" @change="setPasswordMode"> | ||||
<label class="btn btn-outline-secondary" for="pass-mode-link">{{ $t('user.pass-link') }}</label> | <label class="btn btn-outline-secondary" for="pass-mode-link">{{ $t('user.pass-link') }}</label> | ||||
</div> | </div> | ||||
<password-input v-if="passwordMode == 'input'" :class="isSelf ? '' : 'mt-2'" v-model="user"></password-input> | <password-input v-if="passwordMode == 'input'" :class="isSelf ? '' : 'mt-2'" v-model="user"></password-input> | ||||
<div id="password-link" v-if="passwordMode == 'link' || user.passwordLinkCode" class="mt-2"> | <div id="password-link" v-if="passwordMode == 'link' || user.passwordLinkCode" class="mt-2"> | ||||
<span>{{ $t('user.pass-link-label') }}</span> <code>{{ passwordLink }}</code> | <span>{{ $t('user.pass-link-label') }}</span> <code>{{ passwordLink }}</code> | ||||
<span class="d-inline-block"> | <span class="d-inline-block"> | ||||
<btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn> | <btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn> | ||||
<btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-alt" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn> | <btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-can" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn> | ||||
</span> | </span> | ||||
<div v-if="!user.passwordLinkCode" class="form-text m-0">{{ $t('user.pass-link-hint') }}</div> | <div v-if="!user.passwordLinkCode" class="form-text m-0">{{ $t('user.pass-link-hint') }}</div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="user_id === 'new'" id="user-packages" class="row mb-3"> | <div v-if="user_id === 'new'" id="user-packages" class="row mb-3"> | ||||
<label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label> | <label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label> | ||||
<package-select class="col-sm-8 pt-sm-1"></package-select> | <package-select class="col-sm-8 pt-sm-1"></package-select> | ||||
Show All 30 Lines | <div class="container"> | ||||
<h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5> | <h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5> | ||||
<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | ||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<p>{{ $t('user.delete-text') }}</p> | <p>{{ $t('user.delete-text') }}</p> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <div class="modal-footer"> | ||||
<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn> | <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn> | ||||
<btn class="btn-danger modal-action" icon="trash-alt" @click="deleteUser()">{{ $t('btn.delete') }}</btn> | <btn class="btn-danger modal-action" icon="trash-can" @click="deleteUser()">{{ $t('btn.delete') }}</btn> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Modal } from 'bootstrap' | import { Modal } from 'bootstrap' | ||||
import ListInput from '../Widgets/ListInput' | import ListInput from '../Widgets/ListInput' | ||||
import PackageSelect from '../Widgets/PackageSelect' | import PackageSelect from '../Widgets/PackageSelect' | ||||
import PasswordInput from '../Widgets/PasswordInput' | import PasswordInput from '../Widgets/PasswordInput' | ||||
import StatusComponent from '../Widgets/Status' | import StatusComponent from '../Widgets/Status' | ||||
import SubscriptionSelect from '../Widgets/SubscriptionSelect' | import SubscriptionSelect from '../Widgets/SubscriptionSelect' | ||||
import { library } from '@fortawesome/fontawesome-svg-core' | |||||
library.add( | |||||
require('@fortawesome/free-regular-svg-icons/faClipboard').definition, | |||||
) | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ListInput, | ListInput, | ||||
PackageSelect, | PackageSelect, | ||||
PasswordInput, | PasswordInput, | ||||
StatusComponent, | StatusComponent, | ||||
SubscriptionSelect | SubscriptionSelect | ||||
}, | }, | ||||
▲ Show 20 Lines • Show All 177 Lines • Show Last 20 Lines |