refactor(frontend): remove $ts and $t

This commit is contained in:
syuilo
2023-04-01 14:01:57 +09:00
parent f16a7cbcf2
commit 9224b6635f
49 changed files with 183 additions and 165 deletions

View File

@@ -3,7 +3,7 @@
<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>
<div class="query">
<MkInput v-model="q" class="" :placeholder="$ts.search">
<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
@@ -15,14 +15,14 @@
</div>
<MkFoldableSection v-if="searchEmojis" class="emojis">
<template #header>{{ $ts.searchResult }}</template>
<template #header>{{ i18n.ts.searchResult }}</template>
<div class="zuvgdzyt">
<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
</div>
</MkFoldableSection>
<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category" class="emojis">
<template #header>{{ category || $ts.other }}</template>
<template #header>{{ category || i18n.ts.other }}</template>
<div class="zuvgdzyt">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
</div>

View File

@@ -9,7 +9,7 @@
<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>
<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
<i v-else class="ti ti-clock icon requesting"></i>
<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
</div>
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</div>

View File

@@ -10,7 +10,7 @@
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div>
<div v-if="$i && !announcement.isRead" class="footer">
<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>

View File

@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div class="tl">
<MkTimeline
ref="tlEl" :key="antennaId"

View File

@@ -1,25 +1,25 @@
<template>
<section>
<div v-if="app.permission.length > 0">
<p>{{ $t('_auth.permission', { name }) }}</p>
<ul>
<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
</ul>
</div>
<div>{{ i18n.t('_auth.shareAccess', { name: `${name} (${app.id})` }) }}</div>
<div :class="$style.buttons">
<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
</div>
</section>
<section>
<div v-if="app.permission.length > 0">
<p>{{ i18n.t('_auth.permission', { name }) }}</p>
<ul>
<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul>
</div>
<div>{{ i18n.t('_auth.shareAccess', { name: `${name} (${app.id})` }) }}</div>
<div :class="$style.buttons">
<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
</div>
</section>
</template>
<script lang="ts" setup>
import { } from 'vue';
import { AuthSession } from 'misskey-js/built/entities';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { AuthSession } from 'misskey-js/built/entities';
const props = defineProps<{
session: AuthSession;

View File

@@ -20,7 +20,7 @@
<h1>{{ i18n.ts._auth.denied }}</h1>
</div>
<div v-if="state == 'accepted' && session">
<h1>{{ session.app.isAuthorized ? $t('already-authorized') : i18n.ts.allowed }}</h1>
<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
<p v-if="session.app.callbackUrl">
{{ i18n.ts._auth.callback }}
<MkEllipsis/>

View File

@@ -1,6 +1,6 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" /></template>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div v-if="$i">
<div v-if="state == 'waiting'">
@@ -15,13 +15,13 @@
</div>
<div v-else>
<div v-if="_permissions.length > 0">
<p v-if="name">{{ $t('_auth.permission', { name }) }}</p>
<p v-if="name">{{ i18n.t('_auth.permission', { name }) }}</p>
<p v-else>{{ i18n.ts._auth.permissionAsk }}</p>
<ul>
<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
<li v-for="p in _permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul>
</div>
<div v-if="name">{{ $t('_auth.shareAccess', { name }) }}</div>
<div v-if="name">{{ i18n.t('_auth.shareAccess', { name }) }}</div>
<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
<div :class="$style.buttons">
<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>

View File

@@ -1,7 +1,7 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-photo"></i> {{ $ts._pages.blocks.image }}</template>
<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
<template #func>
<button @click="choose()">
<i class="ti ti-folder"></i>
@@ -20,6 +20,7 @@ import { onMounted } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: any

View File

@@ -1,14 +1,14 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-note"></i> {{ $ts._pages.blocks.note }}</template>
<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model="id">
<template #label>{{ $ts._pages.blocks._note.id }}</template>
<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
<template #caption>{{ i18n.ts._pages.blocks._note.idDescription }}</template>
</MkInput>
<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<MkSwitch v-model="props.modelValue.detailed"><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></MkSwitch>
<MkNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
<MkNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
@@ -25,6 +25,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkNote from '@/components/MkNote.vue';
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: any

View File

@@ -1,7 +1,7 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-align-left"></i> {{ $ts._pages.blocks.text }}</template>
<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
<section class="vckmsadr">
<textarea v-model="text"></textarea>
@@ -13,6 +13,7 @@
/* eslint-disable vue/no-mutating-props */
import { watch } from 'vue';
import XContainer from '../page-editor.container.vue';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: any

View File

@@ -16,8 +16,8 @@
</button>
</div>
</header>
<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
<div v-show="showBody" class="body">
<slot></slot>
</div>
@@ -26,6 +26,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
@@ -54,6 +55,7 @@ export default defineComponent({
data() {
return {
showBody: this.expanded,
i18n,
};
},
methods: {

View File

@@ -3,42 +3,42 @@
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700">
<div class="jqqmcavi">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ $ts._pages.viewPage }}</MkButton>
<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ $ts.save }}</MkButton>
<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ $ts.delete }}</MkButton>
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ i18n.ts.duplicate }}</MkButton>
<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
<div v-if="tab === 'settings'">
<div class="_gaps_m">
<MkInput v-model="title">
<template #label>{{ $ts._pages.title }}</template>
<template #label>{{ i18n.ts._pages.title }}</template>
</MkInput>
<MkInput v-model="summary">
<template #label>{{ $ts._pages.summary }}</template>
<template #label>{{ i18n.ts._pages.summary }}</template>
</MkInput>
<MkInput v-model="name">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<template #label>{{ $ts._pages.url }}</template>
<template #label>{{ i18n.ts._pages.url }}</template>
</MkInput>
<MkSwitch v-model="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
<MkSwitch v-model="alignCenter">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
<MkSelect v-model="font">
<template #label>{{ $ts._pages.font }}</template>
<option value="serif">{{ $ts._pages.fontSerif }}</option>
<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
<template #label>{{ i18n.ts._pages.font }}</template>
<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
</MkSelect>
<MkSwitch v-model="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
<MkSwitch v-model="hideTitleWhenPinned">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
<div class="eyeCatch">
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
</div>
</div>
</div>

View File

@@ -24,7 +24,7 @@
<details>
<summary>{{ i18n.ts.details }}</summary>
<ul>
<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul>
</details>
<div class="actions">

View File

@@ -8,7 +8,7 @@
<template #label>{{ i18n.ts.sounds }}</template>
<div class="_gaps_s">
<MkFolder v-for="type in Object.keys(sounds)" :key="type">
<template #label>{{ $t('_sfx.' + type) }}</template>
<template #label>{{ i18n.t('_sfx.' + type) }}</template>
<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>

View File

@@ -57,7 +57,7 @@
</dl>
<dl v-if="user.birthday" class="field">
<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer>
<template #icon><i class="ti ti-chart-line"></i></template>
<template #header>{{ $ts.activity }}</template>
<template #header>{{ i18n.ts.activity }}</template>
<template #func="{ buttonStyleClass }">
<button class="_button" :class="buttonStyleClass" @click="showMenu">
<i class="ti ti-dots"></i>

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer :max-height="300" :foldable="true">
<template #icon><i class="ti ti-photo"></i></template>
<template #header>{{ $ts.images }}</template>
<template #header>{{ i18n.ts.images }}</template>
<div :class="$style.root">
<MkLoading v-if="fetching"/>
<div v-if="!fetching && images.length > 0" :class="$style.stream">
@@ -14,7 +14,7 @@
<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
</MkA>
</div>
<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ $ts.nothing }}</p>
<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
</div>
</MkContainer>
</template>

View File

@@ -10,22 +10,22 @@
</h1>
<div class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
</div>
<div class="action">
<MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
<MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
<MkButton class="signup" inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
<MkButton class="signin" inline @click="signin()">{{ i18n.ts.login }}</MkButton>
</div>
<div v-if="onlineUsersCount && stats" class="status">
<div>
<I18n :src="$ts.nUsers" text-tag="span" class="users">
<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
</I18n>
<I18n :src="$ts.nNotes" text-tag="span" class="notes">
<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
</I18n>
</div>
<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
<template #n><b>{{ onlineUsersCount }}</b></template>
</I18n>
</div>
@@ -47,6 +47,7 @@ import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import { host, instanceName } from '@/config';
import * as os from '@/os';
import number from '@/filters/number';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
@@ -64,6 +65,7 @@ export default defineComponent({
stats: null,
tags: [],
onlineUsersCount: null,
i18n,
};
},
@@ -103,19 +105,19 @@ export default defineComponent({
showMenu(ev) {
os.popupMenu([{
text: this.$t('aboutX', { x: instanceName }),
text: i18n.t('aboutX', { x: instanceName }),
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/about');
},
}, {
text: this.$ts.aboutMisskey,
text: i18n.ts.aboutMisskey,
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/about-misskey');
},
}, null, {
text: this.$ts.help,
text: i18n.ts.help,
icon: 'ti ti-question-circle',
action: () => {
window.open('https://misskey-hub.net/help.md', '_blank');

View File

@@ -22,22 +22,22 @@
</h1>
<div class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
</div>
<div class="action">
<MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
<MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
<MkButton inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
<MkButton inline @click="signin()">{{ i18n.ts.login }}</MkButton>
</div>
<div v-if="onlineUsersCount && stats" class="status">
<div>
<I18n :src="$ts.nUsers" text-tag="span" class="users">
<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
</I18n>
<I18n :src="$ts.nNotes" text-tag="span" class="notes">
<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
</I18n>
</div>
<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
<template #n><b>{{ onlineUsersCount }}</b></template>
</I18n>
</div>
@@ -45,10 +45,10 @@
</div>
</div>
<nav class="nav">
<MkA to="/announcements">{{ $ts.announcements }}</MkA>
<MkA to="/explore">{{ $ts.explore }}</MkA>
<MkA to="/channels">{{ $ts.channel }}</MkA>
<MkA to="/featured">{{ $ts.featured }}</MkA>
<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
</nav>
</div>
</div>
@@ -58,15 +58,16 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { toUnicode } from 'punycode/';
import XTimeline from './welcome.timeline.vue';
import XSigninDialog from '@/components/MkSigninDialog.vue';
import XSignupDialog from '@/components/MkSignupDialog.vue';
import MkButton from '@/components/MkButton.vue';
import MkNote from '@/components/MkNote.vue';
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import XTimeline from './welcome.timeline.vue';
import { host, instanceName } from '@/config';
import * as os from '@/os';
import number from '@/filters/number';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
@@ -84,6 +85,7 @@ export default defineComponent({
stats: null,
tags: [],
onlineUsersCount: null,
i18n,
};
},
@@ -123,22 +125,22 @@ export default defineComponent({
showMenu(ev) {
os.popupMenu([{
text: this.$t('aboutX', { x: instanceName }),
text: i18n.t('aboutX', { x: instanceName }),
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/about');
},
}, {
text: this.$ts.aboutMisskey,
text: i18n.ts.aboutMisskey,
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/about-misskey');
},
}, null, {
text: this.$ts.help,
text: i18n.ts.help,
icon: 'ti ti-question-circle',
action: () => {
window.open(`https://misskey-hub.net/help.md`, '_blank');
window.open('https://misskey-hub.net/help.md', '_blank');
},
}], ev.currentTarget ?? ev.target);
},

View File

@@ -2,19 +2,19 @@
<form class="mk-setup" @submit.prevent="submit()">
<h1>Welcome to Misskey!</h1>
<div class="_gaps_m">
<p>{{ $ts.intro }}</p>
<p>{{ i18n.ts.intro }}</p>
<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
<template #label>{{ $ts.username }}</template>
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput v-model="password" type="password" data-cy-admin-password>
<template #label>{{ $ts.password }}</template>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template>
</MkInput>
<div class="bottom">
<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
</MkButton>
</div>
</div>