bug: fixing infinate loading bug by adding proper exception handling

[yashchaud]

It will now properly show exception message instead of keep loading

Fixes #613

[greptile-apps]

Confidence Score: 3/5

The fix correctly stops the infinite loader on error, but the error display introduces an XSS vector that should be resolved before merging.

Rendering raw server error strings with v-html bypasses Vue's escaping on the Setup page. While the attack surface is limited (errors from the team-creation endpoint), any user-controlled content in those messages — now or in a future API change — would execute in the browser. The fix itself is straightforward to apply.

frontend/src/pages/Setup.vue — specifically the v-html usage on the error paragraph.

Security Review

• XSS via v-html (frontend/src/pages/Setup.vue line 20): createTeam.error.messages?.[0] is rendered as raw HTML. Frappe error messages can embed user-supplied values; any unsanitised input in the message would execute as JavaScript in the victim's browser. Replace v-html with text interpolation.

Important Files Changed

Filename	Overview
frontend/src/pages/Setup.vue	Wraps createTeam.submit in onMounted and adds an error state display, but uses v-html to render server error messages (XSS risk) and leaves several stale imports.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant Browser
    participant SetupVue as Setup.vue (onMounted)
    participant FrappeUI as frappe-ui createResource
    participant API as drive.api.product.create_team

    Browser->>SetupVue: component mounted
    SetupVue->>FrappeUI: "createTeam.submit({ personal: 1 })"
    FrappeUI->>API: POST create_team
    alt Success
        API-->>FrappeUI: data
        FrappeUI-->>SetupVue: onSuccess(data)
        SetupVue->>Browser: window.location.replace('/drive')
    else Error
        API-->>FrappeUI: error
        FrappeUI-->>SetupVue: createTeam.error set
        SetupVue->>Browser: render error message (v-html ⚠️)
    end

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant Browser
    participant SetupVue as Setup.vue (onMounted)
    participant FrappeUI as frappe-ui createResource
    participant API as drive.api.product.create_team

    Browser->>SetupVue: component mounted
    SetupVue->>FrappeUI: "createTeam.submit({ personal: 1 })"
    FrappeUI->>API: POST create_team
    alt Success
        API-->>FrappeUI: data
        FrappeUI-->>SetupVue: onSuccess(data)
        SetupVue->>Browser: window.location.replace('/drive')
    else Error
        API-->>FrappeUI: error
        FrappeUI-->>SetupVue: createTeam.error set
        SetupVue->>Browser: render error message (v-html ⚠️)
    end

Loading

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
frontend/src/pages/Setup.vue:20
XSS risk via `v-html` — `createTeam.error.messages?.[0]` is a server-returned string that may embed user-supplied values (e.g. usernames, email addresses). Rendering it with `v-html` bypasses Vue's auto-escaping. If any user-controlled input ever surfaces in the error message, a crafted payload would execute in the victim's browser. Use text interpolation or `v-text` instead.

```suggestion
              <p class="text-sm text-center text-ink-red-3">{{ createTeam.error.messages?.[0] }}</p>
```

### Issue 2 of 2
frontend/src/pages/Setup.vue:34-38
Several imports are unused after the refactor: `createResource`, `FormControl`, `ref`, `computed`, and `useStore` are all brought in but never referenced in the component.

```suggestion
import { LoadingIndicator } from 'frappe-ui'
import FrappeDriveLogo from '@/components/FrappeDriveLogo.vue'
import { useRoute } from 'vue-router'
```

_{Reviews (1): Last reviewed commit: "bug: fixing infinate loading bug by addi..." | Re-trigger Greptile}

[greptile-apps]

XSS risk via v-html — createTeam.error.messages?.[0] is a server-returned string that may embed user-supplied values (e.g. usernames, email addresses). Rendering it with v-html bypasses Vue's auto-escaping. If any user-controlled input ever surfaces in the error message, a crafted payload would execute in the victim's browser. Use text interpolation or v-text instead.

Suggested change

	<p class="text-sm text-center text-ink-red-3" v-html="createTeam.error.messages?.[0]"></p>
	<p class="text-sm text-center text-ink-red-3">{{ createTeam.error.messages?.[0] }}</p>

Prompt To Fix With AI

This is a comment left during a code review.
Path: frontend/src/pages/Setup.vue
Line: 20

Comment:
XSS risk via `v-html` — `createTeam.error.messages?.[0]` is a server-returned string that may embed user-supplied values (e.g. usernames, email addresses). Rendering it with `v-html` bypasses Vue's auto-escaping. If any user-controlled input ever surfaces in the error message, a crafted payload would execute in the victim's browser. Use text interpolation or `v-text` instead.

```suggestion
              <p class="text-sm text-center text-ink-red-3">{{ createTeam.error.messages?.[0] }}</p>
```

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!