wip
This commit is contained in:
		
							parent
							
								
									bf4b3dcb7f
								
							
						
					
					
						commit
						1301f94166
					
				
					 9 changed files with 30 additions and 24 deletions
				
			
		|  | @ -1,17 +1,17 @@ | |||
| <template> | ||||
| <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> | ||||
| 	<div class="auth _section"> | ||||
| 	<div class="auth _section _formRoot"> | ||||
| 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> | ||||
| 		<div class="normal-signin" v-if="!totpLogin"> | ||||
| 			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username> | ||||
| 			<MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username> | ||||
| 				<template #prefix>@</template> | ||||
| 				<template #suffix>@{{ host }}</template> | ||||
| 			</MkInput> | ||||
| 			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password> | ||||
| 			<MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password> | ||||
| 				<template #prefix><i class="fas fa-lock"></i></template> | ||||
| 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template> | ||||
| 			</MkInput> | ||||
| 			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton> | ||||
| 			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton> | ||||
| 		</div> | ||||
| 		<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }"> | ||||
| 			<div v-if="user && user.securityKeys" class="twofa-group tap-group"> | ||||
|  |  | |||
|  | @ -1,11 +1,11 @@ | |||
| <template> | ||||
| <form class="qlvuhzng" @submit.prevent="onSubmit" :autocomplete="Math.random()"> | ||||
| <form class="qlvuhzng _formRoot" @submit.prevent="onSubmit" :autocomplete="Math.random()"> | ||||
| 	<template v-if="meta"> | ||||
| 		<MkInput class="_inputNoTopMargin" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required> | ||||
| 		<MkInput class="_formBlock" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required> | ||||
| 			<template #label>{{ $ts.invitationCode }}</template> | ||||
| 			<template #prefix><i class="fas fa-key"></i></template> | ||||
| 		</MkInput> | ||||
| 		<MkInput class="_inputNoTopMargin" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username> | ||||
| 		<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username> | ||||
| 			<template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template> | ||||
| 			<template #prefix>@</template> | ||||
| 			<template #suffix>@{{ host }}</template> | ||||
|  | @ -19,7 +19,7 @@ | |||
| 				<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span> | ||||
| 			</template> | ||||
| 		</MkInput> | ||||
| 		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password> | ||||
| 		<MkInput class="_formBlock" v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password> | ||||
| 			<template #label>{{ $ts.password }}</template> | ||||
| 			<template #prefix><i class="fas fa-lock"></i></template> | ||||
| 			<template #caption> | ||||
|  | @ -28,7 +28,7 @@ | |||
| 				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span> | ||||
| 			</template> | ||||
| 		</MkInput> | ||||
| 		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype> | ||||
| 		<MkInput class="_formBlock" v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype> | ||||
| 			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template> | ||||
| 			<template #prefix><i class="fas fa-lock"></i></template> | ||||
| 			<template #caption> | ||||
|  | @ -36,7 +36,7 @@ | |||
| 				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span> | ||||
| 			</template> | ||||
| 		</MkInput> | ||||
| 		<label v-if="meta.tosUrl" class="tou"> | ||||
| 		<label v-if="meta.tosUrl" class="_formBlock tou"> | ||||
| 			<input type="checkbox" v-model="ToSAgreement"> | ||||
| 			<I18n :src="$ts.agreeTo"> | ||||
| 				<template #0> | ||||
|  | @ -44,9 +44,9 @@ | |||
| 				</template> | ||||
| 			</I18n> | ||||
| 		</label> | ||||
| 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/> | ||||
| 		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/> | ||||
| 		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton> | ||||
| 		<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/> | ||||
| 		<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/> | ||||
| 		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton> | ||||
| 	</template> | ||||
| </form> | ||||
| </template> | ||||
|  |  | |||
|  | @ -10,7 +10,7 @@ | |||
| 	<template #header>{{ $ts.selectUser }}</template> | ||||
| 	<div class="tbhwbxda _monolithic_"> | ||||
| 		<div class="_section"> | ||||
| 			<div class="_inputSplit _inputNoTopMargin _inputNoBottomMargin"> | ||||
| 			<div class="_inputSplit"> | ||||
| 				<MkInput v-model="username" class="input" @update:modelValue="search" ref="username"> | ||||
| 					<template #label>{{ $ts.username }}</template> | ||||
| 					<template #prefix>@</template> | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| <template> | ||||
| <div class="_root"> | ||||
| 	<div class="_block" style="padding: 24px;"> | ||||
| 		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="_inputNoTopMargin"> | ||||
| 		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class=""> | ||||
| 			<template #label>Endpoint</template> | ||||
| 		</MkInput> | ||||
| 		<MkTextarea v-model="body" code> | ||||
|  |  | |||
|  | @ -2,7 +2,7 @@ | |||
| <div class="vtaihdtm"> | ||||
| 	<div class="body"> | ||||
| 		<div class="search"> | ||||
| 			<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search"> | ||||
| 			<MkInput v-model="query" :debounce="true" type="search" class="" :placeholder="$ts.search"> | ||||
| 				<template #prefix><i class="fas fa-search"></i></template> | ||||
| 			</MkInput> | ||||
| 		</div> | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| <template> | ||||
| <div class="driuhtrh"> | ||||
| 	<div class="query"> | ||||
| 		<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search"> | ||||
| 		<MkInput v-model="q" class="" :placeholder="$ts.search"> | ||||
| 			<template #prefix><i class="fas fa-search"></i></template> | ||||
| 		</MkInput> | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,11 +1,11 @@ | |||
| <template> | ||||
| <div class="taeiyria"> | ||||
| 	<div class="query"> | ||||
| 		<MkInput v-model="host" :debounce="true" class="_inputNoTopMargin"> | ||||
| 		<MkInput v-model="host" :debounce="true" class=""> | ||||
| 			<template #prefix><i class="fas fa-search"></i></template> | ||||
| 			<template #label>{{ $ts.host }}</template> | ||||
| 		</MkInput> | ||||
| 		<div class="_inputSplit _inputNoBottomMargin"> | ||||
| 		<div class="_inputSplit"> | ||||
| 			<MkSelect v-model="state"> | ||||
| 				<template #label>{{ $ts.state }}</template> | ||||
| 				<option value="all">{{ $ts.all }}</option> | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| <template> | ||||
| <div class="shaynizk"> | ||||
| 	<div class="form"> | ||||
| 		<MkInput v-model="name" class="_inputNoTopMargin"> | ||||
| 		<MkInput v-model="name" class=""> | ||||
| 			<template #label>{{ $ts.name }}</template> | ||||
| 		</MkInput> | ||||
| 		<MkSelect v-model="src"> | ||||
|  |  | |||
|  | @ -425,12 +425,18 @@ hr { | |||
| 	} | ||||
| } | ||||
| 
 | ||||
| ._inputNoTopMargin { | ||||
| 	margin-top: 0 !important; | ||||
| ._formBlock { | ||||
| 	margin: 20px 0; | ||||
| } | ||||
| 
 | ||||
| ._inputNoBottomMargin { | ||||
| 	margin-bottom: 0 !important; | ||||
| ._formRoot { | ||||
| 	> ._formBlock:first-child { | ||||
| 		margin-top: 0; | ||||
| 	} | ||||
| 
 | ||||
| 	> ._formBlock:last-child { | ||||
| 		margin-bottom: 0; | ||||
| 	} | ||||
| } | ||||
| 
 | ||||
| ._table { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue