Skip to content

Fix TokenCreated dialog for null tokens #6441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GogoVega wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −10
Open

Fix TokenCreated dialog for null tokens #6441

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions frontend/src/pages/account/Security/dialogs/TokenCreated.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<ff-dialog ref="dialog" data-el="add-token-confirmation" header="Token Created">
<template #default>
<p>Your token is <code>{{ token.token }}</code></p>
<p>Your token is <code>{{ token?.token }}</code></p>
Copy link
Contributor

@AllanOricil AllanOricil Dec 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Component is called TokenCreated because it means there should exist a token already when the component is created. If you add "?." It means, semantically, that this component could possibly display "Your token is ", which isn't right. A proper fix is to ensure that the whole TokenCreated is rendered only if token is set. I believe the error occurs because TokenCreated is created and mounted when Token isn't even available, which triggers 1 rendering cycle and the evaluation of the {{ token.token }} expression. This is a waste of rendering cycle. Could you check if it is possible to create TokenCreated only when token is available?

Copy link
Contributor

@AllanOricil AllanOricil Dec 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@GogoVega

The issue is that TokenCreated is created and mounted to the dom when it isn't even needed, wasting a rendering cycle for nothing

https://github.com/FlowFuse/flowfuse/blob/main/frontend%2Fsrc%2Fpages%2Faccount%2FSecurity%2FTokens.vue#L28

It would be more efficient to just create and mount the component with a v-if in this case, since it is a very small component Users wouldn't notice the time spent rendering and mounting a small template to the dom. You can define a new state variable called "showCreatedToken", and use it in v-if. When the following method is called, you could set showCreatedToken to true, then call showToken. If calling showToken in the same tick doesn't work, put it on the nextTick callback.

https://github.com/FlowFuse/flowfuse/blob/main/frontend%2Fsrc%2Fpages%2Faccount%2FSecurity%2FTokens.vue#L81-L84

Another solution is to control the rendering of the component inside its own template. In other words add v-if inside of it instead of in the parent, then trigger the rendering when calling showToken from the parent. The trade-off is that vue will again spend time mounting something that isn't used yet.

<p>This is the only time it will be shown, so please ensure you make a note</p>
</template>
<template #actions>
Expand All @@ -18,14 +18,6 @@ import Alerts from '../../../../services/alerts.js'
export default {
name: 'TokenCreated',
mixins: [clipboardMixin],
setup () {
return {
showToken (token) {
this.token = token
this.$refs.dialog.show()
}
}
},
data () {
return {
token: null
Expand All @@ -34,7 +26,7 @@ export default {
methods: {
close () {
this.$refs.dialog.close()
this.token = undefined
this.token = null
},
copy () {
this.copyToClipboard(this.token.token).then(() => {
Expand All @@ -43,6 +35,10 @@ export default {
console.warn('Clipboard write permission denied: ', err)
Alerts.emit('Clipboard write permission denied.', 'warning')
})
},
showToken (token) {
this.token = token
this.$refs.dialog.show()
}
}
}
Expand Down