client: remove hostname from signup & signin form

Long hostnames can obscure the username being entered. And the hostname
should already be known to the user anyway or they can find out by
looking at the current URL.

fixes <FoundKeyGang/FoundKey#231>

Changelog: Changed
This commit is contained in:
Johann150 2022-11-11 12:20:48 +01:00
parent d411ea6281
commit ed14fe8e79
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
3 changed files with 1 additions and 9 deletions

View file

@ -8,7 +8,6 @@
<div v-if="!totpLogin" class="normal-signin"> <div v-if="!totpLogin" class="normal-signin">
<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange"> <MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput> </MkInput>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password> <MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
<template #prefix><i class="fas fa-lock"></i></template> <template #prefix><i class="fas fa-lock"></i></template>
@ -55,7 +54,7 @@ import { showSuspendedDialog } from '@/scripts/show-suspended-dialog';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkInfo from '@/components/ui/info.vue'; import MkInfo from '@/components/ui/info.vue';
import { apiUrl, host as configHost } from '@/config'; import { apiUrl } from '@/config';
import { byteify, hexify } from '@/scripts/2fa'; import { byteify, hexify } from '@/scripts/2fa';
import * as os from '@/os'; import * as os from '@/os';
import { login } from '@/account'; import { login } from '@/account';
@ -68,7 +67,6 @@ let user = $ref(null);
let username = $ref(''); let username = $ref('');
let password = $ref(''); let password = $ref('');
let token = $ref(''); let token = $ref('');
let host = $ref(toUnicode(configHost));
let totpLogin = $ref(false); let totpLogin = $ref(false);
let challengeData = $ref(null); let challengeData = $ref(null);
let queryingKey = $ref(false); let queryingKey = $ref(false);

View file

@ -7,7 +7,6 @@
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername"> <MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template> <template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template>
<template #caption> <template #caption>
<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span> <span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span> <span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
@ -70,7 +69,6 @@ import MkButton from './ui/button.vue';
import MkCaptcha from './captcha.vue'; import MkCaptcha from './captcha.vue';
import MkInput from './form/input.vue'; import MkInput from './form/input.vue';
import MkSwitch from './form/switch.vue'; import MkSwitch from './form/switch.vue';
import * as config from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { login } from '@/account'; import { login } from '@/account';
import { instance } from '@/instance'; import { instance } from '@/instance';
@ -87,8 +85,6 @@ const emit = defineEmits<{
(ev: 'signupEmailPending'): void; (ev: 'signupEmailPending'): void;
}>(); }>();
const host = toUnicode(config.host);
let hcaptcha = $ref(); let hcaptcha = $ref();
let recaptcha = $ref(); let recaptcha = $ref();

View file

@ -6,7 +6,6 @@
<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock"> <MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
<template #label>{{ i18n.ts.username }}</template> <template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput> </MkInput>
<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock"> <MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
@ -24,7 +23,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { login } from '@/account'; import { login } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';