refactor: code cleanup
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
@@ -1,124 +1,3 @@
|
||||
<template>
|
||||
<div class="jmap-auth-panel">
|
||||
<h3 class="text-h6 mb-4">Authentication</h3>
|
||||
<p class="text-body-2 mb-6">Choose your authentication method and enter your credentials.</p>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-4">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-information</v-icon>
|
||||
</template>
|
||||
<div class="text-caption">
|
||||
JMAP supports multiple authentication methods. Choose the one your server uses.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<!-- Authentication Type Selection -->
|
||||
<div class="mb-4">
|
||||
<label class="text-subtitle-2 mb-2 d-block">Authentication Method</label>
|
||||
<v-btn-toggle
|
||||
v-model="authType"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
mandatory
|
||||
divided
|
||||
class="mb-4"
|
||||
>
|
||||
<v-btn value="BA">
|
||||
<v-icon start>mdi-account-key</v-icon>
|
||||
Basic Auth
|
||||
</v-btn>
|
||||
<v-btn value="TA">
|
||||
<v-icon start>mdi-key</v-icon>
|
||||
Bearer Token
|
||||
</v-btn>
|
||||
<v-btn value="OA">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
OAuth 2.0
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
|
||||
<!-- Basic Authentication -->
|
||||
<template v-if="authType === 'BA'">
|
||||
<v-text-field
|
||||
v-model="basicIdentity"
|
||||
label="Username / Email"
|
||||
hint="Your account username or email address"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-account"
|
||||
class="mb-4"
|
||||
autocomplete="username"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="basicSecret"
|
||||
type="password"
|
||||
label="Password"
|
||||
hint="Your account password"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-lock"
|
||||
class="mb-4"
|
||||
autocomplete="current-password"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Bearer Token Authentication -->
|
||||
<template v-else-if="authType === 'TA'">
|
||||
<v-textarea
|
||||
v-model="bearerToken"
|
||||
label="Bearer Token"
|
||||
hint="Enter your API token or bearer token"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-key"
|
||||
class="mb-4"
|
||||
rows="3"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- OAuth 2.0 -->
|
||||
<template v-else-if="authType === 'OA'">
|
||||
<v-alert type="warning" variant="tonal" class="mb-4">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-alert</v-icon>
|
||||
</template>
|
||||
<div class="text-caption">
|
||||
OAuth 2.0 implementation is pending. This will launch a browser window
|
||||
for secure authentication with your JMAP provider.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<v-btn
|
||||
v-if="!oauthSuccess"
|
||||
color="primary"
|
||||
size="large"
|
||||
block
|
||||
@click="initiateOAuth"
|
||||
:loading="oauthLoading"
|
||||
:disabled="true"
|
||||
>
|
||||
<v-icon start>mdi-login</v-icon>
|
||||
Authorize with OAuth 2.0
|
||||
</v-btn>
|
||||
|
||||
<div v-else class="text-center py-4">
|
||||
<v-icon color="success" size="64">mdi-check-circle</v-icon>
|
||||
<p class="text-subtitle-1 mt-2">OAuth Authorized Successfully</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { ServiceIdentity } from '@KTXM/MailManager/types/service'
|
||||
@@ -261,6 +140,127 @@ async function initiateOAuth() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="jmap-auth-panel">
|
||||
<h3 class="text-h6 mb-4">Authentication</h3>
|
||||
<p class="text-body-2 mb-6">Choose your authentication method and enter your credentials.</p>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-4">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-information</v-icon>
|
||||
</template>
|
||||
<div class="text-caption">
|
||||
JMAP supports multiple authentication methods. Choose the one your server uses.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<!-- Authentication Type Selection -->
|
||||
<div class="mb-4">
|
||||
<label class="text-subtitle-2 mb-2 d-block">Authentication Method</label>
|
||||
<v-btn-toggle
|
||||
v-model="authType"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
mandatory
|
||||
divided
|
||||
class="mb-4"
|
||||
>
|
||||
<v-btn value="BA">
|
||||
<v-icon start>mdi-account-key</v-icon>
|
||||
Basic Auth
|
||||
</v-btn>
|
||||
<v-btn value="TA">
|
||||
<v-icon start>mdi-key</v-icon>
|
||||
Bearer Token
|
||||
</v-btn>
|
||||
<v-btn value="OA">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
OAuth 2.0
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
|
||||
<!-- Basic Authentication -->
|
||||
<template v-if="authType === 'BA'">
|
||||
<v-text-field
|
||||
v-model="basicIdentity"
|
||||
label="Username / Email"
|
||||
hint="Your account username or email address"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-account"
|
||||
class="mb-4"
|
||||
autocomplete="username"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="basicSecret"
|
||||
type="password"
|
||||
label="Password"
|
||||
hint="Your account password"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-lock"
|
||||
class="mb-4"
|
||||
autocomplete="current-password"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Bearer Token Authentication -->
|
||||
<template v-else-if="authType === 'TA'">
|
||||
<v-textarea
|
||||
v-model="bearerToken"
|
||||
label="Bearer Token"
|
||||
hint="Enter your API token or bearer token"
|
||||
persistent-hint
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-key"
|
||||
class="mb-4"
|
||||
rows="3"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- OAuth 2.0 -->
|
||||
<template v-else-if="authType === 'OA'">
|
||||
<v-alert type="warning" variant="tonal" class="mb-4">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-alert</v-icon>
|
||||
</template>
|
||||
<div class="text-caption">
|
||||
OAuth 2.0 implementation is pending. This will launch a browser window
|
||||
for secure authentication with your JMAP provider.
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<v-btn
|
||||
v-if="!oauthSuccess"
|
||||
color="primary"
|
||||
size="large"
|
||||
block
|
||||
@click="initiateOAuth"
|
||||
:loading="oauthLoading"
|
||||
:disabled="true"
|
||||
>
|
||||
<v-icon start>mdi-login</v-icon>
|
||||
Authorize with OAuth 2.0
|
||||
</v-btn>
|
||||
|
||||
<div v-else class="text-center py-4">
|
||||
<v-icon color="success" size="64">mdi-check-circle</v-icon>
|
||||
<p class="text-subtitle-1 mt-2">OAuth Authorized Successfully</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.jmap-auth-panel {
|
||||
max-width: 800px;
|
||||
|
||||
Reference in New Issue
Block a user