Skip to content

Commit 5e4d7c4

Browse files
antfuantfu
authored
feat: global auth (#139)
1 parent 0617c88 commit 5e4d7c4

File tree

33 files changed

+731
-169
lines changed

33 files changed

+731
-169
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@iconify-json/catppuccin": "catalog:icons",
2929
"@iconify-json/codicon": "catalog:icons",
3030
"@iconify-json/fluent": "catalog:icons",
31+
"@iconify-json/fluent-emoji-flat": "catalog:icons",
3132
"@iconify-json/logos": "catalog:icons",
3233
"@iconify-json/octicon": "catalog:icons",
3334
"@iconify-json/ph": "catalog:icons",

‎packages/core/src/client/standalone/App.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
4-
import { markRaw, useTemplateRef } from 'vue'
4+
import { markRaw, ref, useTemplateRef, watch } from 'vue'
55
import DockEntries from '../webcomponents/components/DockEntries.vue'
66
import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
7+
import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
78
import ViewEntry from '../webcomponents/components/ViewEntry.vue'
89
import { createDocksContext } from '../webcomponents/state/context'
910
import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
@@ -21,11 +22,25 @@ const context: DocksContext = await createDocksContext(
2122
rpc,
2223
)
2324
24-
context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
25+
const isRpcTrusted = ref(context.rpc.isTrusted)
26+
context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
27+
isRpcTrusted.value = isTrusted
28+
})
29+
30+
watch(
31+
() => context.docks.entries,
32+
() => {
33+
context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
34+
},
35+
{ immediate: true },
36+
)
2537
</script>
2638

2739
<template>
28-
<div class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
40+
<div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
41+
<ViewBuiltinClientAuthNotice :context="context" />
42+
</div>
43+
<div v-else class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
2944
<div class="border-r border-base flex flex-col">
3045
<div class="p2 border-b border-base flex">
3146
<VitePlus class="w-7 h-7 ma" />

‎packages/core/src/client/standalone/vite.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export default defineConfig({
1818
name: 'setup',
1919
async configureServer(viteDevServer) {
2020
const context = await createDevToolsContext(viteDevServer.config, viteDevServer)
21+
const host = viteDevServer.config.server.host === true
22+
? '0.0.0.0'
23+
: viteDevServer.config.server.host || 'localhost'
2124
const { middleware } = await createDevToolsMiddleware({
2225
cwd: viteDevServer.config.root,
26+
hostWebSocket: host,
2327
context,
2428
})
2529
viteDevServer.middlewares.use('/.devtools', middleware)

‎packages/core/src/client/webcomponents/.generated/css.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/core/src/client/webcomponents/components/Dock.vue‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { useEventListener, useScreenSafeArea } from '@vueuse/core'
44
import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
5+
import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
56
import DockEntries from './DockEntries.vue'
67
import BracketLeft from './icons/BracketLeft.vue'
78
import BracketRight from './icons/BracketRight.vue'
@@ -64,6 +65,13 @@ function onPointerDown(e: PointerEvent) {
6465
draggingOffset.y = e.clientY - top - height / 2
6566
}
6667
68+
const isRpcTrusted = ref(context.rpc.isTrusted)
69+
context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
70+
isRpcTrusted.value = isTrusted
71+
if (isTrusted && context.docks.selected?.id === BUILTIN_ENTRY_CLIENT_AUTH_NOTICE.id)
72+
context.docks.switchEntry(null)
73+
})
74+
6775
onMounted(() => {
6876
windowSize.width = window.innerWidth
6977
windowSize.height = window.innerHeight
@@ -220,7 +228,10 @@ const panelStyle = computed(() => {
220228
})
221229
222230
onMounted(() => {
223-
bringUp()
231+
if (context.panel.store.open && !isRpcTrusted.value)
232+
context.panel.store.open = false
233+
if (isRpcTrusted.value)
234+
bringUp()
224235
recalculateCounter.value++
225236
})
226237
</script>
@@ -264,13 +275,39 @@ onMounted(() => {
264275
class="vite-devtools-dock-bracket absolute right--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300"
265276
:class="context.panel.isVertical ? 'scale-y--100' : ''"
266277
/>
267-
<VitePlusCore
278+
<div
268279
class="w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300"
269-
:class="isMinimized ? 'op100' : 'op0'"
270-
/>
280+
:class="[
281+
isMinimized ? 'op100' : 'op0',
282+
context.panel.isVertical ? 'rotate-270' : 'rotate-0',
283+
]"
284+
>
285+
<VitePlusCore />
286+
<div v-if="!isRpcTrusted" class="i-fluent-emoji-flat-warning absolute bottom-0 right--1px w-1.5 h-1.5" />
287+
</div>
288+
<div
289+
v-if="!isRpcTrusted"
290+
class="transition duration-300 delay-200"
291+
:class="isMinimized ? 'opacity-0 pointer-events-none ws-nowrap text-sm text-orange of-hidden' : 'opacity-100'"
292+
>
293+
<button
294+
class="p2 transition hover:bg-active rounded-full px4"
295+
@click="context.docks.toggleEntry(BUILTIN_ENTRY_CLIENT_AUTH_NOTICE.id)"
296+
>
297+
<div class="flex items-center gap-1">
298+
<div
299+
class="i-fluent-emoji-flat-warning flex-none"
300+
:class="context.panel.isVertical ? 'rotate-270' : 'rotate-0'"
301+
/>
302+
<div class="ws-nowrap text-amber">
303+
Unauthorized
304+
</div>
305+
</div>
306+
</button>
307+
</div>
271308
<DockEntries
272309
:entries="context.docks.entries"
273-
class="transition duration-200 flex items-center w-full h-full justify-center"
310+
class="transition duration-200 flex items-center w-full h-full justify-center px3"
274311
:class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
275312
:is-vertical="context.panel.isVertical"
276313
:selected="context.docks.selected"

‎packages/core/src/client/webcomponents/components/DockPanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ onMounted(() => {
163163
<div
164164
v-show="context.docks.selected && context.docks.selected.type !== 'action'"
165165
ref="dockPanel"
166-
class="bg-glass rounded-lg border border-base shadow"
166+
class="bg-glass:75 rounded-lg border border-base shadow"
167167
:style="panelStyle"
168168
>
169169
<DockPanelResizer :panel="context.panel" />

‎packages/core/src/client/webcomponents/components/ViewBuiltinClientAuthNotice.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import type { DocksContext } from '@vitejs/devtools-kit/client'
3+
import VitePlus from './icons/VitePlus.vue'
4+
5+
defineProps<{
6+
context: DocksContext
7+
}>()
8+
</script>
9+
10+
<template>
11+
<div class="w-full h-full flex flex-col items-center justify-center p20">
12+
<div class="max-w-150 flex flex-col items-center justify-center gap-2">
13+
<VitePlus class="w-20 h-20" />
14+
<h1 class="text-2xl font-bold text-violet mb2">
15+
Vite DevTools is Unauthorized
16+
</h1>
17+
<p class="op75">
18+
Vite DevTools offers advanced features that can access your server, view your filesystem, and execute commands.
19+
</p>
20+
<p class="op75">
21+
To protect your project from unauthorized access, please authorize your browser before proceeding.
22+
</p>
23+
<p class="font-bold bg-green:5 p1 px3 rounded mt8 text-green">
24+
Check your terminal for the authorization prompt and come back.
25+
</p>
26+
</div>
27+
</div>
28+
</template>

‎packages/core/src/client/webcomponents/components/ViewEntry.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
33
import type { DocksContext } from '@vitejs/devtools-kit/client'
44
import type { CSSProperties } from 'vue'
55
import type { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
6+
import ViewBuiltinClientAuthNotice from './ViewBuiltinClientAuthNotice.vue'
67
import ViewBuiltinTerminals from './ViewBuiltinTerminals.vue'
78
import ViewCustomRenderer from './ViewCustomRenderer.vue'
89
import ViewIframe from './ViewIframe.vue'
@@ -24,6 +25,10 @@ defineProps<{
2425
:context
2526
:entry
2627
/>
28+
<ViewBuiltinClientAuthNotice
29+
v-else-if="entry.id === '~client-auth-notice'"
30+
:context
31+
/>
2732
<div v-else>
2833
Unknown builtin entry: {{ entry }}
2934
</div>

‎packages/core/src/client/webcomponents/components/icons/VitePlus.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<path d="M21.6002 31.5389C23.0982 32.7047 26.7882 30.4688 29.842 26.5449C32.8958 22.621 34.1571 18.4949 32.6591 17.3291C31.1611 16.1633 27.4711 18.3991 24.4173 22.3231C21.3635 26.247 20.1022 30.3731 21.6002 31.5389Z" fill="#2BFDD2" />
5252
</g>
5353
</g>
54-
<path d="M6.95763 10C3.02563 15.628 3.00263 24.351 6.95763 30H9.61363C5.65963 24.35 5.68363 15.627 9.61363 10H6.95763ZM33.9386 20H36.5956C36.5946 16.407 35.6056 12.816 33.6386 10H30.9826C32.9486 12.816 33.9366 16.407 33.9386 20ZM38.6276 24.907H35.9626C36.1589 24.1665 36.3102 23.4148 36.4156 22.656H33.7586C33.6531 23.4148 33.5019 24.1665 33.3056 24.907H30.6366C30.3961 25.8176 30.0804 26.7067 29.6926 27.565H32.3616C31.9785 28.4179 31.5165 29.2331 30.9816 30H33.6376C34.1725 29.2331 34.6345 28.4179 35.0176 27.565H37.6826C38.0686 26.714 38.3836 25.823 38.6276 24.907Z" fill="#08060D" />
54+
<path d="M6.95763 10C3.02563 15.628 3.00263 24.351 6.95763 30H9.61363C5.65963 24.35 5.68363 15.627 9.61363 10H6.95763ZM33.9386 20H36.5956C36.5946 16.407 35.6056 12.816 33.6386 10H30.9826C32.9486 12.816 33.9366 16.407 33.9386 20ZM38.6276 24.907H35.9626C36.1589 24.1665 36.3102 23.4148 36.4156 22.656H33.7586C33.6531 23.4148 33.5019 24.1665 33.3056 24.907H30.6366C30.3961 25.8176 30.0804 26.7067 29.6926 27.565H32.3616C31.9785 28.4179 31.5165 29.2331 30.9816 30H33.6376C34.1725 29.2331 34.6345 28.4179 35.0176 27.565H37.6826C38.0686 26.714 38.3836 25.823 38.6276 24.907Z" fill="#08060D" class="fill-hex-08060D dark:fill-hex-fff" />
5555
<defs>
5656
<filter id="filter0_f_3_2" x="1.62683" y="17.2322" width="25.6599" height="17.8001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
5757
<feFlood flood-opacity="0" result="BackgroundImageFix" />

‎packages/core/src/client/webcomponents/constants.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
2+
3+
export const BUILTIN_ENTRY_CLIENT_AUTH_NOTICE: DevToolsViewBuiltin = Object.freeze({
4+
type: '~builtin',
5+
id: '~client-auth-notice',
6+
title: 'Unauthorized',
7+
icon: 'i-fluent-emoji-flat-warning',
8+
})
9+
10+
export const BUILTIN_ENTRIES: readonly DevToolsViewBuiltin[] = Object.freeze([
11+
BUILTIN_ENTRY_CLIENT_AUTH_NOTICE,
12+
])

0 commit comments

Comments
 (0)