Fix TokenCreated dialog for null tokens

[GogoVega]

Description

By default, token is null, which triggers an error when the default template is mounted due to the evaluation of the expression {{ token.token }}.

showToken is declared in setup and uses this which is theoretically not possible.

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.45%. Comparing base (428ed67) to head (d1d91e4).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6441      +/-   ##
==========================================
+ Coverage   76.42%   76.45%   +0.02%     
==========================================
  Files         396      396              
  Lines       19885    19885              
  Branches     4766     4766              
==========================================
+ Hits        15198    15203       +5     
+ Misses       4687     4682       -5     

Flag	Coverage Δ
backend	76.45% <ø> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[AllanOricil]

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?

[AllanOricil]

@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.