shortcut-next 0.2.2 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -2
- package/templates/base/@core/configs/clientConfig.ts +1 -1
- package/templates/base/@core/context/AuthContext.tsx +21 -28
- package/templates/base/@core/hooks/useAbility.ts +58 -0
- package/templates/base/app/(dashboard)/dashboard/page.tsx +104 -0
- package/templates/base/app/(dashboard)/layout.tsx +97 -0
- package/templates/base/app/home/page.tsx +112 -0
- package/templates/base/app/login/page.tsx +296 -0
- package/templates/base/app/unauthorized/page.tsx +120 -0
- package/templates/base/components/MSWProvider.tsx +54 -0
- package/templates/base/components/auth/LoginForm.tsx +279 -0
- package/templates/base/components/auth/SignupForm.tsx +348 -0
- package/templates/base/components/loaders/Spinner.tsx +5 -24
- package/templates/base/components/ui/ErrorMessage.tsx +17 -0
- package/templates/base/components/ui/FormFieldWrapper.tsx +27 -0
- package/templates/base/docs/AuthorizationDocumentation.md +348 -0
- package/templates/base/lib/abilities/checkAuthorization.ts +74 -0
- package/templates/base/lib/abilities/index.ts +27 -0
- package/templates/base/lib/abilities/roles.ts +75 -0
- package/templates/base/lib/abilities/routeMap.ts +35 -0
- package/templates/base/lib/abilities/routeMatcher.ts +117 -0
- package/templates/base/lib/abilities/types.ts +68 -0
- package/templates/base/lib/mocks/browser.ts +11 -0
- package/templates/base/lib/mocks/db.ts +124 -0
- package/templates/base/lib/mocks/handlers/auth.ts +203 -0
- package/templates/base/lib/mocks/handlers/index.ts +16 -0
- package/templates/base/lib/mocks/index.ts +34 -0
- package/templates/base/lib/mocks/jwt.ts +99 -0
- package/templates/base/middleware.ts +147 -0
- package/templates/base/package-lock.json +725 -2
- package/templates/base/package.json +13 -2
- package/templates/base/providers/AppProviders.tsx +8 -5
- package/templates/base/public/locales/ar.json +73 -0
- package/templates/base/public/locales/en.json +73 -0
- package/templates/base/public/mockServiceWorker.js +349 -0
|
@@ -9,8 +9,10 @@
|
|
|
9
9
|
"typecheck": "tsc --noEmit"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
+
"@casl/ability": "^6.7.1",
|
|
12
13
|
"@emotion/react": "latest",
|
|
13
14
|
"@emotion/styled": "latest",
|
|
15
|
+
"@hookform/resolvers": "^3.9.1",
|
|
14
16
|
"@iconify/react": "^6.0.0",
|
|
15
17
|
"@mui/icons-material": "latest",
|
|
16
18
|
"@mui/lab": "^7.0.0-beta.16",
|
|
@@ -18,10 +20,12 @@
|
|
|
18
20
|
"@mui/x-date-pickers": "^8.10.2",
|
|
19
21
|
"@tanstack/react-query": "latest",
|
|
20
22
|
"axios": "^1.12.2",
|
|
23
|
+
"framer-motion": "^12.33.0",
|
|
21
24
|
"i18next": "^25.4.2",
|
|
22
25
|
"i18next-browser-languagedetector": "^8.2.0",
|
|
23
26
|
"i18next-http-backend": "^3.0.2",
|
|
24
27
|
"i18next-resources-to-backend": "^1.2.1",
|
|
28
|
+
"jose": "^5.2.0",
|
|
25
29
|
"lucide-react": "^0.541.0",
|
|
26
30
|
"negotiator": "^1.0.0",
|
|
27
31
|
"next": "latest",
|
|
@@ -29,10 +33,12 @@
|
|
|
29
33
|
"react-dom": "latest",
|
|
30
34
|
"react-hook-form": "latest",
|
|
31
35
|
"react-i18next": "^15.7.3",
|
|
32
|
-
"stylis-plugin-rtl": "^2.1.1"
|
|
36
|
+
"stylis-plugin-rtl": "^2.1.1",
|
|
37
|
+
"yup": "^1.7.1"
|
|
33
38
|
},
|
|
34
39
|
"devDependencies": {
|
|
35
40
|
"@types/i18next-browser-languagedetector": "^2.0.2",
|
|
41
|
+
"msw": "^2.7.0",
|
|
36
42
|
"@types/negotiator": "^0.6.4",
|
|
37
43
|
"@types/node": "latest",
|
|
38
44
|
"@types/react": "latest",
|
|
@@ -40,5 +46,10 @@
|
|
|
40
46
|
"eslint": "latest",
|
|
41
47
|
"eslint-config-next": "latest",
|
|
42
48
|
"typescript": "latest"
|
|
49
|
+
},
|
|
50
|
+
"msw": {
|
|
51
|
+
"workerDirectory": [
|
|
52
|
+
"public"
|
|
53
|
+
]
|
|
43
54
|
}
|
|
44
|
-
}
|
|
55
|
+
}
|
|
@@ -9,6 +9,7 @@ import HydrationGate from '@/components/HydrationGate'
|
|
|
9
9
|
import { useSettings } from '@/@core/hooks/useSettings'
|
|
10
10
|
import Spinner from '@/components/loaders/Spinner'
|
|
11
11
|
import { AuthProvider } from '@/@core/context/AuthContext'
|
|
12
|
+
import MSWProvider from '@/components/MSWProvider'
|
|
12
13
|
|
|
13
14
|
function ThemedProviders({ children, client }: { children: React.ReactNode; client: QueryClient }) {
|
|
14
15
|
const { settings } = useSettings()
|
|
@@ -27,10 +28,12 @@ export default function AppProviders({ children }: { children: React.ReactNode }
|
|
|
27
28
|
const [client] = useState(() => new QueryClient())
|
|
28
29
|
|
|
29
30
|
return (
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
<MSWProvider>
|
|
32
|
+
<AuthProvider>
|
|
33
|
+
<SettingsProvider>
|
|
34
|
+
<ThemedProviders client={client}>{children}</ThemedProviders>
|
|
35
|
+
</SettingsProvider>
|
|
36
|
+
</AuthProvider>
|
|
37
|
+
</MSWProvider>
|
|
35
38
|
)
|
|
36
39
|
}
|
|
@@ -47,5 +47,78 @@
|
|
|
47
47
|
"english": "الإنجليزية",
|
|
48
48
|
"arabic": "العربية",
|
|
49
49
|
"loading": "جار التحميل"
|
|
50
|
+
},
|
|
51
|
+
"validation": {
|
|
52
|
+
"invalidEmail": "عنوان البريد الإلكتروني غير صالح",
|
|
53
|
+
"emailRequired": "البريد الإلكتروني مطلوب",
|
|
54
|
+
"passwordMin6": "يجب أن تكون كلمة المرور على الأقل 6 أحرف",
|
|
55
|
+
"passwordMin8": "يجب أن تكون كلمة المرور على الأقل 8 أحرف",
|
|
56
|
+
"passwordRequired": "كلمة المرور مطلوبة",
|
|
57
|
+
"firstNameRequired": "الاسم الأول مطلوب",
|
|
58
|
+
"lastNameRequired": "اسم العائلة مطلوب",
|
|
59
|
+
"phoneRequired": "رقم الهاتف مطلوب",
|
|
60
|
+
"roleRequired": "الدور مطلوب",
|
|
61
|
+
"passwordsDoNotMatch": "كلمتا المرور غير متطابقتين",
|
|
62
|
+
"confirmPasswordRequired": "يرجى تأكيد كلمة المرور"
|
|
63
|
+
},
|
|
64
|
+
"login": {
|
|
65
|
+
"brand": "مرحباً بعودتك",
|
|
66
|
+
"subtitle": "سجل الدخول للمتابعة إلى حسابك",
|
|
67
|
+
"signInWithGoogle": "تسجيل الدخول باستخدام Google",
|
|
68
|
+
"signInWithMicrosoft": "تسجيل الدخول باستخدام Microsoft",
|
|
69
|
+
"or": "أو",
|
|
70
|
+
"signInWithEmail": "تسجيل الدخول بالبريد الإلكتروني",
|
|
71
|
+
"dontHaveAccount": "ليس لديك حساب؟",
|
|
72
|
+
"signUp": "إنشاء حساب",
|
|
73
|
+
"email": "البريد الإلكتروني",
|
|
74
|
+
"emailPlaceholder": "your@email.com",
|
|
75
|
+
"password": "كلمة المرور",
|
|
76
|
+
"signIn": "تسجيل الدخول",
|
|
77
|
+
"backToSocial": "العودة إلى تسجيل الدخول الاجتماعي",
|
|
78
|
+
"heroBefore": {
|
|
79
|
+
"overline": "مرحباً بعودتك",
|
|
80
|
+
"title": "سجل الدخول إلى حسابك",
|
|
81
|
+
"subtitle": "الوصول إلى لوحة التحكم وإدارة أعمالك",
|
|
82
|
+
"card1": {
|
|
83
|
+
"title": "لوحة التحليلات",
|
|
84
|
+
"desc": "تتبع أدائك من خلال رؤى في الوقت الفعلي"
|
|
85
|
+
},
|
|
86
|
+
"card2": {
|
|
87
|
+
"title": "وصول آمن",
|
|
88
|
+
"desc": "بياناتك محمية بأمان على مستوى المؤسسات"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"heroAfter": {
|
|
92
|
+
"overline": "ابدأ الآن",
|
|
93
|
+
"title": "أنشئ حسابك",
|
|
94
|
+
"subtitle": "انضم إلى الآلاف من الشركات التي تستخدم منصتنا بالفعل",
|
|
95
|
+
"card1": {
|
|
96
|
+
"title": "إعداد سريع",
|
|
97
|
+
"desc": "ابدأ في دقائق من خلال عملية الإعداد البسيطة"
|
|
98
|
+
},
|
|
99
|
+
"card2": {
|
|
100
|
+
"title": "التعاون الجماعي",
|
|
101
|
+
"desc": "ادعُ فريقك واعملوا معاً بسلاسة"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"signup": {
|
|
106
|
+
"title": "إنشاء حساب",
|
|
107
|
+
"subtitle": "قم بالتسجيل للبدء",
|
|
108
|
+
"firstName": "الاسم الأول",
|
|
109
|
+
"firstNamePlaceholder": "أحمد",
|
|
110
|
+
"lastName": "اسم العائلة",
|
|
111
|
+
"lastNamePlaceholder": "محمد",
|
|
112
|
+
"email": "البريد الإلكتروني",
|
|
113
|
+
"emailPlaceholder": "your@email.com",
|
|
114
|
+
"phone": "الهاتف",
|
|
115
|
+
"phonePlaceholder": "+966 50 123 4567",
|
|
116
|
+
"role": "الدور",
|
|
117
|
+
"roleHelp": "اختر دوراً لاختبار التفويض",
|
|
118
|
+
"password": "كلمة المرور",
|
|
119
|
+
"confirmPassword": "تأكيد كلمة المرور",
|
|
120
|
+
"create": "إنشاء حساب",
|
|
121
|
+
"alreadyHaveAccount": "هل لديك حساب بالفعل؟",
|
|
122
|
+
"signIn": "تسجيل الدخول"
|
|
50
123
|
}
|
|
51
124
|
}
|
|
@@ -47,5 +47,78 @@
|
|
|
47
47
|
"english": "English",
|
|
48
48
|
"arabic": "Arabic",
|
|
49
49
|
"loading": "Loading"
|
|
50
|
+
},
|
|
51
|
+
"validation": {
|
|
52
|
+
"invalidEmail": "Invalid email address",
|
|
53
|
+
"emailRequired": "Email is required",
|
|
54
|
+
"passwordMin6": "Password must be at least 6 characters",
|
|
55
|
+
"passwordMin8": "Password must be at least 8 characters",
|
|
56
|
+
"passwordRequired": "Password is required",
|
|
57
|
+
"firstNameRequired": "First name is required",
|
|
58
|
+
"lastNameRequired": "Last name is required",
|
|
59
|
+
"phoneRequired": "Phone is required",
|
|
60
|
+
"roleRequired": "Role is required",
|
|
61
|
+
"passwordsDoNotMatch": "Passwords do not match",
|
|
62
|
+
"confirmPasswordRequired": "Please confirm your password"
|
|
63
|
+
},
|
|
64
|
+
"login": {
|
|
65
|
+
"brand": "Welcome Back",
|
|
66
|
+
"subtitle": "Sign in to continue to your account",
|
|
67
|
+
"signInWithGoogle": "Sign in with Google",
|
|
68
|
+
"signInWithMicrosoft": "Sign in with Microsoft",
|
|
69
|
+
"or": "or",
|
|
70
|
+
"signInWithEmail": "Sign in with Email",
|
|
71
|
+
"dontHaveAccount": "Don't have an account?",
|
|
72
|
+
"signUp": "Sign Up",
|
|
73
|
+
"email": "Email",
|
|
74
|
+
"emailPlaceholder": "your@email.com",
|
|
75
|
+
"password": "Password",
|
|
76
|
+
"signIn": "Sign In",
|
|
77
|
+
"backToSocial": "Back to social login",
|
|
78
|
+
"heroBefore": {
|
|
79
|
+
"overline": "Welcome Back",
|
|
80
|
+
"title": "Sign in to your account",
|
|
81
|
+
"subtitle": "Access your dashboard and manage your business",
|
|
82
|
+
"card1": {
|
|
83
|
+
"title": "Analytics Dashboard",
|
|
84
|
+
"desc": "Track your performance with real-time insights"
|
|
85
|
+
},
|
|
86
|
+
"card2": {
|
|
87
|
+
"title": "Secure Access",
|
|
88
|
+
"desc": "Your data is protected with enterprise-grade security"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"heroAfter": {
|
|
92
|
+
"overline": "Get Started",
|
|
93
|
+
"title": "Create your account",
|
|
94
|
+
"subtitle": "Join thousands of businesses already using our platform",
|
|
95
|
+
"card1": {
|
|
96
|
+
"title": "Quick Setup",
|
|
97
|
+
"desc": "Get started in minutes with our simple onboarding"
|
|
98
|
+
},
|
|
99
|
+
"card2": {
|
|
100
|
+
"title": "Team Collaboration",
|
|
101
|
+
"desc": "Invite your team and work together seamlessly"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"signup": {
|
|
106
|
+
"title": "Create Account",
|
|
107
|
+
"subtitle": "Sign up to get started",
|
|
108
|
+
"firstName": "First Name",
|
|
109
|
+
"firstNamePlaceholder": "John",
|
|
110
|
+
"lastName": "Last Name",
|
|
111
|
+
"lastNamePlaceholder": "Doe",
|
|
112
|
+
"email": "Email",
|
|
113
|
+
"emailPlaceholder": "your@email.com",
|
|
114
|
+
"phone": "Phone",
|
|
115
|
+
"phonePlaceholder": "+1 234 567 8900",
|
|
116
|
+
"role": "Role",
|
|
117
|
+
"roleHelp": "Select a role for testing authorization",
|
|
118
|
+
"password": "Password",
|
|
119
|
+
"confirmPassword": "Confirm Password",
|
|
120
|
+
"create": "Create Account",
|
|
121
|
+
"alreadyHaveAccount": "Already have an account?",
|
|
122
|
+
"signIn": "Sign In"
|
|
50
123
|
}
|
|
51
124
|
}
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
/* tslint:disable */
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Mock Service Worker.
|
|
6
|
+
* @see https://github.com/mswjs/msw
|
|
7
|
+
* - Please do NOT modify this file.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
const PACKAGE_VERSION = '2.12.8'
|
|
11
|
+
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
|
|
12
|
+
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
|
|
13
|
+
const activeClientIds = new Set()
|
|
14
|
+
|
|
15
|
+
addEventListener('install', function () {
|
|
16
|
+
self.skipWaiting()
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
addEventListener('activate', function (event) {
|
|
20
|
+
event.waitUntil(self.clients.claim())
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
addEventListener('message', async function (event) {
|
|
24
|
+
const clientId = Reflect.get(event.source || {}, 'id')
|
|
25
|
+
|
|
26
|
+
if (!clientId || !self.clients) {
|
|
27
|
+
return
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const client = await self.clients.get(clientId)
|
|
31
|
+
|
|
32
|
+
if (!client) {
|
|
33
|
+
return
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const allClients = await self.clients.matchAll({
|
|
37
|
+
type: 'window',
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
switch (event.data) {
|
|
41
|
+
case 'KEEPALIVE_REQUEST': {
|
|
42
|
+
sendToClient(client, {
|
|
43
|
+
type: 'KEEPALIVE_RESPONSE',
|
|
44
|
+
})
|
|
45
|
+
break
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
case 'INTEGRITY_CHECK_REQUEST': {
|
|
49
|
+
sendToClient(client, {
|
|
50
|
+
type: 'INTEGRITY_CHECK_RESPONSE',
|
|
51
|
+
payload: {
|
|
52
|
+
packageVersion: PACKAGE_VERSION,
|
|
53
|
+
checksum: INTEGRITY_CHECKSUM,
|
|
54
|
+
},
|
|
55
|
+
})
|
|
56
|
+
break
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
case 'MOCK_ACTIVATE': {
|
|
60
|
+
activeClientIds.add(clientId)
|
|
61
|
+
|
|
62
|
+
sendToClient(client, {
|
|
63
|
+
type: 'MOCKING_ENABLED',
|
|
64
|
+
payload: {
|
|
65
|
+
client: {
|
|
66
|
+
id: client.id,
|
|
67
|
+
frameType: client.frameType,
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
})
|
|
71
|
+
break
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
case 'CLIENT_CLOSED': {
|
|
75
|
+
activeClientIds.delete(clientId)
|
|
76
|
+
|
|
77
|
+
const remainingClients = allClients.filter((client) => {
|
|
78
|
+
return client.id !== clientId
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
// Unregister itself when there are no more clients
|
|
82
|
+
if (remainingClients.length === 0) {
|
|
83
|
+
self.registration.unregister()
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
break
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
addEventListener('fetch', function (event) {
|
|
92
|
+
const requestInterceptedAt = Date.now()
|
|
93
|
+
|
|
94
|
+
// Bypass navigation requests.
|
|
95
|
+
if (event.request.mode === 'navigate') {
|
|
96
|
+
return
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Opening the DevTools triggers the "only-if-cached" request
|
|
100
|
+
// that cannot be handled by the worker. Bypass such requests.
|
|
101
|
+
if (
|
|
102
|
+
event.request.cache === 'only-if-cached' &&
|
|
103
|
+
event.request.mode !== 'same-origin'
|
|
104
|
+
) {
|
|
105
|
+
return
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Bypass all requests when there are no active clients.
|
|
109
|
+
// Prevents the self-unregistered worked from handling requests
|
|
110
|
+
// after it's been terminated (still remains active until the next reload).
|
|
111
|
+
if (activeClientIds.size === 0) {
|
|
112
|
+
return
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const requestId = crypto.randomUUID()
|
|
116
|
+
event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
|
|
117
|
+
})
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* @param {FetchEvent} event
|
|
121
|
+
* @param {string} requestId
|
|
122
|
+
* @param {number} requestInterceptedAt
|
|
123
|
+
*/
|
|
124
|
+
async function handleRequest(event, requestId, requestInterceptedAt) {
|
|
125
|
+
const client = await resolveMainClient(event)
|
|
126
|
+
const requestCloneForEvents = event.request.clone()
|
|
127
|
+
const response = await getResponse(
|
|
128
|
+
event,
|
|
129
|
+
client,
|
|
130
|
+
requestId,
|
|
131
|
+
requestInterceptedAt,
|
|
132
|
+
)
|
|
133
|
+
|
|
134
|
+
// Send back the response clone for the "response:*" life-cycle events.
|
|
135
|
+
// Ensure MSW is active and ready to handle the message, otherwise
|
|
136
|
+
// this message will pend indefinitely.
|
|
137
|
+
if (client && activeClientIds.has(client.id)) {
|
|
138
|
+
const serializedRequest = await serializeRequest(requestCloneForEvents)
|
|
139
|
+
|
|
140
|
+
// Clone the response so both the client and the library could consume it.
|
|
141
|
+
const responseClone = response.clone()
|
|
142
|
+
|
|
143
|
+
sendToClient(
|
|
144
|
+
client,
|
|
145
|
+
{
|
|
146
|
+
type: 'RESPONSE',
|
|
147
|
+
payload: {
|
|
148
|
+
isMockedResponse: IS_MOCKED_RESPONSE in response,
|
|
149
|
+
request: {
|
|
150
|
+
id: requestId,
|
|
151
|
+
...serializedRequest,
|
|
152
|
+
},
|
|
153
|
+
response: {
|
|
154
|
+
type: responseClone.type,
|
|
155
|
+
status: responseClone.status,
|
|
156
|
+
statusText: responseClone.statusText,
|
|
157
|
+
headers: Object.fromEntries(responseClone.headers.entries()),
|
|
158
|
+
body: responseClone.body,
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
responseClone.body ? [serializedRequest.body, responseClone.body] : [],
|
|
163
|
+
)
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
return response
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* Resolve the main client for the given event.
|
|
171
|
+
* Client that issues a request doesn't necessarily equal the client
|
|
172
|
+
* that registered the worker. It's with the latter the worker should
|
|
173
|
+
* communicate with during the response resolving phase.
|
|
174
|
+
* @param {FetchEvent} event
|
|
175
|
+
* @returns {Promise<Client | undefined>}
|
|
176
|
+
*/
|
|
177
|
+
async function resolveMainClient(event) {
|
|
178
|
+
const client = await self.clients.get(event.clientId)
|
|
179
|
+
|
|
180
|
+
if (activeClientIds.has(event.clientId)) {
|
|
181
|
+
return client
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
if (client?.frameType === 'top-level') {
|
|
185
|
+
return client
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
const allClients = await self.clients.matchAll({
|
|
189
|
+
type: 'window',
|
|
190
|
+
})
|
|
191
|
+
|
|
192
|
+
return allClients
|
|
193
|
+
.filter((client) => {
|
|
194
|
+
// Get only those clients that are currently visible.
|
|
195
|
+
return client.visibilityState === 'visible'
|
|
196
|
+
})
|
|
197
|
+
.find((client) => {
|
|
198
|
+
// Find the client ID that's recorded in the
|
|
199
|
+
// set of clients that have registered the worker.
|
|
200
|
+
return activeClientIds.has(client.id)
|
|
201
|
+
})
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* @param {FetchEvent} event
|
|
206
|
+
* @param {Client | undefined} client
|
|
207
|
+
* @param {string} requestId
|
|
208
|
+
* @param {number} requestInterceptedAt
|
|
209
|
+
* @returns {Promise<Response>}
|
|
210
|
+
*/
|
|
211
|
+
async function getResponse(event, client, requestId, requestInterceptedAt) {
|
|
212
|
+
// Clone the request because it might've been already used
|
|
213
|
+
// (i.e. its body has been read and sent to the client).
|
|
214
|
+
const requestClone = event.request.clone()
|
|
215
|
+
|
|
216
|
+
function passthrough() {
|
|
217
|
+
// Cast the request headers to a new Headers instance
|
|
218
|
+
// so the headers can be manipulated with.
|
|
219
|
+
const headers = new Headers(requestClone.headers)
|
|
220
|
+
|
|
221
|
+
// Remove the "accept" header value that marked this request as passthrough.
|
|
222
|
+
// This prevents request alteration and also keeps it compliant with the
|
|
223
|
+
// user-defined CORS policies.
|
|
224
|
+
const acceptHeader = headers.get('accept')
|
|
225
|
+
if (acceptHeader) {
|
|
226
|
+
const values = acceptHeader.split(',').map((value) => value.trim())
|
|
227
|
+
const filteredValues = values.filter(
|
|
228
|
+
(value) => value !== 'msw/passthrough',
|
|
229
|
+
)
|
|
230
|
+
|
|
231
|
+
if (filteredValues.length > 0) {
|
|
232
|
+
headers.set('accept', filteredValues.join(', '))
|
|
233
|
+
} else {
|
|
234
|
+
headers.delete('accept')
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
return fetch(requestClone, { headers })
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// Bypass mocking when the client is not active.
|
|
242
|
+
if (!client) {
|
|
243
|
+
return passthrough()
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// Bypass initial page load requests (i.e. static assets).
|
|
247
|
+
// The absence of the immediate/parent client in the map of the active clients
|
|
248
|
+
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
|
|
249
|
+
// and is not ready to handle requests.
|
|
250
|
+
if (!activeClientIds.has(client.id)) {
|
|
251
|
+
return passthrough()
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// Notify the client that a request has been intercepted.
|
|
255
|
+
const serializedRequest = await serializeRequest(event.request)
|
|
256
|
+
const clientMessage = await sendToClient(
|
|
257
|
+
client,
|
|
258
|
+
{
|
|
259
|
+
type: 'REQUEST',
|
|
260
|
+
payload: {
|
|
261
|
+
id: requestId,
|
|
262
|
+
interceptedAt: requestInterceptedAt,
|
|
263
|
+
...serializedRequest,
|
|
264
|
+
},
|
|
265
|
+
},
|
|
266
|
+
[serializedRequest.body],
|
|
267
|
+
)
|
|
268
|
+
|
|
269
|
+
switch (clientMessage.type) {
|
|
270
|
+
case 'MOCK_RESPONSE': {
|
|
271
|
+
return respondWithMock(clientMessage.data)
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
case 'PASSTHROUGH': {
|
|
275
|
+
return passthrough()
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
return passthrough()
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* @param {Client} client
|
|
284
|
+
* @param {any} message
|
|
285
|
+
* @param {Array<Transferable>} transferrables
|
|
286
|
+
* @returns {Promise<any>}
|
|
287
|
+
*/
|
|
288
|
+
function sendToClient(client, message, transferrables = []) {
|
|
289
|
+
return new Promise((resolve, reject) => {
|
|
290
|
+
const channel = new MessageChannel()
|
|
291
|
+
|
|
292
|
+
channel.port1.onmessage = (event) => {
|
|
293
|
+
if (event.data && event.data.error) {
|
|
294
|
+
return reject(event.data.error)
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
resolve(event.data)
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
client.postMessage(message, [
|
|
301
|
+
channel.port2,
|
|
302
|
+
...transferrables.filter(Boolean),
|
|
303
|
+
])
|
|
304
|
+
})
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/**
|
|
308
|
+
* @param {Response} response
|
|
309
|
+
* @returns {Response}
|
|
310
|
+
*/
|
|
311
|
+
function respondWithMock(response) {
|
|
312
|
+
// Setting response status code to 0 is a no-op.
|
|
313
|
+
// However, when responding with a "Response.error()", the produced Response
|
|
314
|
+
// instance will have status code set to 0. Since it's not possible to create
|
|
315
|
+
// a Response instance with status code 0, handle that use-case separately.
|
|
316
|
+
if (response.status === 0) {
|
|
317
|
+
return Response.error()
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
const mockedResponse = new Response(response.body, response)
|
|
321
|
+
|
|
322
|
+
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
|
|
323
|
+
value: true,
|
|
324
|
+
enumerable: true,
|
|
325
|
+
})
|
|
326
|
+
|
|
327
|
+
return mockedResponse
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/**
|
|
331
|
+
* @param {Request} request
|
|
332
|
+
*/
|
|
333
|
+
async function serializeRequest(request) {
|
|
334
|
+
return {
|
|
335
|
+
url: request.url,
|
|
336
|
+
mode: request.mode,
|
|
337
|
+
method: request.method,
|
|
338
|
+
headers: Object.fromEntries(request.headers.entries()),
|
|
339
|
+
cache: request.cache,
|
|
340
|
+
credentials: request.credentials,
|
|
341
|
+
destination: request.destination,
|
|
342
|
+
integrity: request.integrity,
|
|
343
|
+
redirect: request.redirect,
|
|
344
|
+
referrer: request.referrer,
|
|
345
|
+
referrerPolicy: request.referrerPolicy,
|
|
346
|
+
body: await request.arrayBuffer(),
|
|
347
|
+
keepalive: request.keepalive,
|
|
348
|
+
}
|
|
349
|
+
}
|