akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: expose read-only access token in profile settings

Browse Source
This commit is contained in:
Shivam Mishra
2026-05-20 13:19:58 +05:30
parent e195f9842f
commit 5d8fce92f7
6 changed files with 119 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+60 -44
View File
@@ -20,6 +20,8 @@ const maskIcon = computed(() => {
return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
});
const hasToken = computed(() => Boolean(props.value));
const onClick = () => {
emit('onCopy', props.value);
};
@@ -31,50 +33,64 @@ const onReset = () => {
<template>
<div class="flex flex-row justify-between gap-4">
<woot-input
name="access_token"
class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
:styles="{
borderRadius: '12px',
fontSize: '14px',
marginBottom: '2px',
}"
:type="inputType"
:model-value="value"
readonly
>
<template #masked>
<button
class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
<template v-if="hasToken">
<woot-input
name="access_token"
class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
:styles="{
borderRadius: '12px',
fontSize: '14px',
marginBottom: '2px',
}"
:type="inputType"
:model-value="value"
readonly
>
<template #masked>
<button
class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
type="button"
@click="toggleMasked"
>
<fluent-icon :icon="maskIcon" :size="16" />
</button>
</template>
</woot-input>
<div class="flex flex-row gap-2">
<NextButton
:label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
slate
outline
type="button"
@click="toggleMasked"
>
<fluent-icon :icon="maskIcon" :size="16" />
</button>
</template>
</woot-input>
<div class="flex flex-row gap-2">
<NextButton
:label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
slate
outline
type="button"
icon="i-lucide-copy"
class="rounded-xl"
@click="onClick"
/>
<ConfirmButton
v-if="showResetButton"
:label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
:confirm-label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')"
:confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
color="slate"
confirm-color="ruby"
variant="outline"
icon="i-lucide-key-round"
class="rounded-xl"
@click="onReset"
/>
</div>
icon="i-lucide-copy"
class="rounded-xl"
@click="onClick"
/>
<ConfirmButton
v-if="showResetButton"
:label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
:confirm-label="
$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')
"
:confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
color="slate"
confirm-color="ruby"
variant="outline"
icon="i-lucide-key-round"
class="rounded-xl"
@click="onReset"
/>
</div>
</template>
<NextButton
v-else
:label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.GENERATE')"
slate
outline
type="button"
icon="i-lucide-key-round"
class="rounded-xl"
@click="onReset"
/>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+34
View File
@@ -200,6 +200,25 @@ export default {
useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_ERROR'));
}
},
async resetReadOnlyAccessToken() {
const hadToken = Boolean(this.currentUser.read_only_access_token);
const success = await this.$store.dispatch('resetReadOnlyAccessToken');
if (success && hadToken) {
useAlert(
this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_RESET_SUCCESS')
);
} else if (success) {
useAlert(
this.$t(
'PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_GENERATE_SUCCESS'
)
);
} else {
useAlert(
this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_RESET_ERROR')
);
}
},
},
};
</script>
@@ -340,5 +359,20 @@ export default {
@on-reset="resetAccessToken"
/>
</SectionLayout>
<SectionLayout
with-border
:title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_TITLE')"
:description="
replaceInstallationName(
$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_NOTE')
)
"
>
<AccessToken
:value="currentUser.read_only_access_token"
@on-copy="onCopyToken"
@on-reset="resetReadOnlyAccessToken"
/>
</SectionLayout>
</div>
</template>