From 08682563a79dce7fdb019d5e9a281c9408bc2cb7 Mon Sep 17 00:00:00 2001 From: veypi Date: Tue, 30 Jul 2024 19:38:41 +0800 Subject: [PATCH] add login page of oaer --- oaer/index.html | 1 + oaer/lib/api/app.ts | 28 ++++ oaer/lib/api/axios.ts | 113 +++++++++++++++ oaer/lib/api/index.ts | 35 +++++ oaer/lib/api/nats.ts | 20 +++ oaer/lib/api/tsdb.ts | 26 ++++ oaer/lib/api/user.ts | 24 +++ oaer/lib/assets/css/animate.scss | 39 +++++ oaer/lib/assets/css/oaer.scss | 242 +++++++++++++++++++++++++++++++ oaer/lib/assets/favicon.ico | Bin 0 -> 3694 bytes oaer/lib/assets/favicon.svg | 6 + oaer/lib/assets/img/github.svg | 6 + oaer/lib/assets/img/google.svg | 6 + oaer/lib/assets/img/wechat.svg | 9 ++ oaer/lib/cfg.ts | 9 +- oaer/lib/css/animate.scss | 28 ---- oaer/lib/css/oaer.scss | 32 ---- oaer/lib/main.ts | 70 ++++++++- oaer/package.json | 5 +- oaer/public/favicon.svg | 6 + oaer/public/vite.svg | 1 - oaer/src/style.css | 9 +- oaer/yarn.lock | 57 ++++++++ 23 files changed, 694 insertions(+), 78 deletions(-) create mode 100644 oaer/lib/api/app.ts create mode 100644 oaer/lib/api/axios.ts create mode 100644 oaer/lib/api/index.ts create mode 100644 oaer/lib/api/nats.ts create mode 100644 oaer/lib/api/tsdb.ts create mode 100644 oaer/lib/api/user.ts create mode 100644 oaer/lib/assets/css/animate.scss create mode 100644 oaer/lib/assets/css/oaer.scss create mode 100644 oaer/lib/assets/favicon.ico create mode 100644 oaer/lib/assets/favicon.svg create mode 100644 oaer/lib/assets/img/github.svg create mode 100644 oaer/lib/assets/img/google.svg create mode 100644 oaer/lib/assets/img/wechat.svg delete mode 100644 oaer/lib/css/animate.scss delete mode 100644 oaer/lib/css/oaer.scss create mode 100644 oaer/public/favicon.svg delete mode 100644 oaer/public/vite.svg diff --git a/oaer/index.html b/oaer/index.html index 089cf6b..4e650ad 100644 --- a/oaer/index.html +++ b/oaer/index.html @@ -5,6 +5,7 @@ OAer Dev + diff --git a/oaer/lib/api/app.ts b/oaer/lib/api/app.ts new file mode 100644 index 0000000..186dc66 --- /dev/null +++ b/oaer/lib/api/app.ts @@ -0,0 +1,28 @@ +/* +* @name: app +* @author: veypi +* @date: 2021-11-17 14:44 +* @description：ap +* @update: 2021-11-17 14:44 +*/ +import ajax from './axios' +import cfg from '../cfg' + +export default { + local: () => cfg.BaseUrl() + '/app/', + getKey(uuid: string) { + return ajax.get(this.local() + uuid, { option: 'key' }) + }, + get(uuid: string) { + return ajax.get(this.local() + uuid) + }, + list() { + return ajax.get(this.local()) + }, + users(uuid: string, user_id: string, data?: any) { + if (uuid === '') { + uuid = '-' + } + return ajax.get(this.local() + uuid + '/user/' + user_id, data) + }, +} diff --git a/oaer/lib/api/axios.ts b/oaer/lib/api/axios.ts new file mode 100644 index 0000000..f050662 --- /dev/null +++ b/oaer/lib/api/axios.ts @@ -0,0 +1,113 @@ +/* + * axios.ts + * Copyright (C) 2023 veypi + * 2023-09-22 20:22 + * Distributed under terms of the MIT license. + */ + +import axios, { AxiosError, AxiosResponse } from 'axios'; +import cfg from '../cfg'; + +// Be careful when using SSR for cross-request state pollution +// due to creating a Singleton instance here; +// If any client changes this (global) instance, it might be a +// good idea to move this instance creation inside of the +// "export default () => {}" function below (which runs individually +// for each client) + +axios.defaults.withCredentials = true +const proxy = axios.create({ + withCredentials: true, + headers: { + 'content-type': 'application/json;charset=UTF-8', + }, +}); + + +// 请求拦截 +const beforeRequest = (config: any) => { + // 设置 token + const token = cfg.token + config.retryTimes = 3 + // NOTE 添加自定义头部 + token && (config.headers.Authorization = `Bearer ${token}`) + // config.headers['auth_token'] = '' + return config +} +proxy.interceptors.request.use(beforeRequest) + +// 响应拦截器 +const responseSuccess = (response: AxiosResponse) => { + // eslint-disable-next-line yoda + // 这里没有必要进行判断，axios 内部已经判断 + // const isOk = 200 <= response.status && response.status < 300 + let data = response.data + if (response.config.method === 'head') { + data = JSON.parse(JSON.stringify(response.headers)) + } + return Promise.resolve(data) +} + +const responseFailed = (error: AxiosError) => { + const { response, config } = error + if (!window.navigator.onLine) { + + alert('没有网络') + return Promise.reject(new Error('请检查网络连接')) + } + + // @ts-ignore + if (!config || !config.retryTimes) { + return Promise.reject(response?.data || response?.headers.error) + }; + // @ts-ignore + const { __retryCount = 0, retryDelay = 300, retryTimes } = config; + // 在请求对象上设置重试次数 + // @ts-ignore + config.__retryCount = __retryCount; + // 判断是否超过了重试次数 + if (__retryCount >= retryTimes) { + return Promise.reject(response?.data || response?.headers.error) + } + // 增加重试次数 + // @ts-ignore + config.__retryCount++; + // 延时处理 + const delay = new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, retryDelay); + }); + // 重新发起请求 + return delay.then(function() { + return axios(config); + }); +} + +proxy.interceptors.response.use(responseSuccess, responseFailed) + + +const ajax = { + get(url: string, data = {}, header?: any) { + return proxy.get(url, { params: data, headers: header }) + }, + head(url: string, data = {}, header?: any) { + return proxy.head(url, { params: data, headers: header }) + }, + delete(url: string, data = {}, header?: any) { + return proxy.delete(url, { params: data, headers: header }) + }, + + post(url: string, data = {}, header?: any) { + return proxy.post(url, data, { headers: header }) + }, + put(url: string, data = {}, header?: any) { + return proxy.put(url, data, { headers: header }) + }, + patch(url: string, data = {}, header?: any) { + return proxy.patch(url, data, { headers: header }) + }, +} + +export default ajax + diff --git a/oaer/lib/api/index.ts b/oaer/lib/api/index.ts new file mode 100644 index 0000000..a930c06 --- /dev/null +++ b/oaer/lib/api/index.ts @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2019 light + * + * Distributed under terms of the MIT license. + */ + +import user from './user' +import app from './app' +import cfg from '../cfg' +import ajax from './axios' +import nats from './nats' +import tsdb from './tsdb' + + +const api = { + nats: nats, + tsdb: tsdb, + user: user, + app: app, + info: () => { + return ajax.get(cfg.BaseUrl() + '/info') + }, + refresh_token: () => { + ajax.post(cfg.BaseUrl() + '/app/' + cfg.uuid + '/token/', { app_id: cfg.uuid, token: cfg.refresh }).then(e => { + cfg.token = e + // bus.emit('sync', e) + }).catch(e => { + console.warn(e) + // bus.emit('logout', 'get token failed ' + e) + }) + } +} + +export { api } +export default api diff --git a/oaer/lib/api/nats.ts b/oaer/lib/api/nats.ts new file mode 100644 index 0000000..6ee3ed6 --- /dev/null +++ b/oaer/lib/api/nats.ts @@ -0,0 +1,20 @@ +/* + * nats.ts + * Copyright (C) 2023 veypi + * 2023-10-19 21:36 + * Distributed under terms of the MIT license. + */ + + +import cfg from '../cfg' +import ajax from './axios' + +export default { + local: () => cfg.BaseUrl() + '/nats/', + general() { + return ajax.get(this.local() + 'varz') + }, + conns() { + return ajax.get(this.local() + 'connz', { subs: true }) + }, +} diff --git a/oaer/lib/api/tsdb.ts b/oaer/lib/api/tsdb.ts new file mode 100644 index 0000000..9feb20a --- /dev/null +++ b/oaer/lib/api/tsdb.ts @@ -0,0 +1,26 @@ +/* + * tsdb.ts + * Copyright (C) 2023 veypi + * 2023-10-20 23:21 + * Distributed under terms of the MIT license. + */ + + +import cfg from '../cfg' +import ajax from './axios' + +export default { + local: () => cfg.BaseUrl() + '/ts/', + range(query: string, props?: { start?: string, end?: string, step?: string, query?: string }) { + if (query !== undefined) { + // @ts-ignore + props.query = query + } else { + props = { query: query } + } + return ajax.get(this.local() + 'query_range', props) + }, + query(query: string) { + return ajax.get(this.local() + 'query', { query: query }) + } +} diff --git a/oaer/lib/api/user.ts b/oaer/lib/api/user.ts new file mode 100644 index 0000000..10380cc --- /dev/null +++ b/oaer/lib/api/user.ts @@ -0,0 +1,24 @@ +/* + * user.ts + * Copyright (C) 2023 veypi + * 2023-10-05 15:37 + * Distributed under terms of the MIT license. + */ + + + +import ajax from './axios' +import cfg from '../cfg' + + + +export default { + local: () => cfg.BaseUrl() + '/user/', + search(q: string) { + return ajax.get(this.local(), { username: q }) + }, + get(id: number) { + return ajax.get(this.local() + id) + }, +} + diff --git a/oaer/lib/assets/css/animate.scss b/oaer/lib/assets/css/animate.scss new file mode 100644 index 0000000..1ce66c4 --- /dev/null +++ b/oaer/lib/assets/css/animate.scss @@ -0,0 +1,39 @@ +/* + * animate.css + * Copyright (C) 2024 veypi + * + * Distributed under terms of the MIT license. + */ + +@keyframes scale-up { + 0% { + transform: scale(0); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes scale-off { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0); + opacity: 0; + } +} + +@keyframes slide-in { + 0% { + transform: translateX(200%) scale(0); + opacity: 0; + } + 100% { + transform: translateX(0) scale(1); + opacity: 1; + } +} diff --git a/oaer/lib/assets/css/oaer.scss b/oaer/lib/assets/css/oaer.scss new file mode 100644 index 0000000..c6a3e59 --- /dev/null +++ b/oaer/lib/assets/css/oaer.scss @@ -0,0 +1,242 @@ +/* + * oaer.css + * Copyright (C) 2024 veypi + * + * Distributed under terms of the MIT license. + */ + +@import "./animate.scss"; + +.voa { + user-select: none; + cursor: pointer; + height: 4rem; + width: 4rem; + display: flex; + justify-content: center; + align-items: center; + .voa-off { + } + .voa-on { + border-radius: 100%; + background: #999; + animation: scale-up 100ms ease-out forwards; + } + :hover { + opacity: 0.9; + } +} + +.voa-scale-off { + transform-origin: center center; + animation: scale-off 200ms ease-out forwards !important; +} +.voa-scale-up { + animation: scale-up 200ms ease-in; +} + +.hover-line-b { + cursor: pointer; + position: relative; + &:hover { + opacity: 0.7; + } + + &:after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 0.1em; + background-color: #000; + transition: all 0.3s; + } + + &:hover::after { + left: 0px; + width: 100%; + } +} + +.voa-modal { + user-select: none; + position: fixed; + top: 50%; + left: 50%; + translate: -50% -50%; + padding: 2rem; + z-index: 10000; + width: 40%; + min-width: 20rem; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 2rem; + background-color: rgba(240, 240, 240, 0.5); + backdrop-filter: blur(20px); /* 模糊效果 */ + z-index: -1; + } + .header { + line-height: 2rem; + width: 100%; + display: flex; + justify-content: start; + align-items: center; + gap: 0.5rem; + .voa-logo { + height: 4rem; + width: 4rem; + } + .txt { + font-size: 1.5rem; + } + } + .username, + .password { + margin: 2rem 0; + position: relative; + width: 100%; + input { + height: 2.5rem; + line-height: 2.5rem; + font-size: 1.5rem; + width: 100%; + margin: 0 1rem; + border: none; + outline: none; + background: none; + } + &:after { + content: ""; + position: absolute; + bottom: 0; + left: 1rem; + width: calc(100% - 2rem); + height: 0.1em; + background-color: #000; + transition: all 0.3s; + } + &:hover::after { + left: 0%; + width: 100%; + background-color: #00ffff; + } + } + .ok { + cursor: pointer; + line-height: 3rem; + font-size: 1.5rem; + height: 3rem; + margin: 2rem auto; + width: 40%; + background: #0a0; + border-radius: 1.5rem; + } + .last { + display: flex; + justify-content: space-between; + padding: 0 1rem; + height: 3rem; + .icos { + display: flex; + align-items: center; + gap: 1rem; + div { + opacity: 0.5; + cursor: pointer; + height: 2rem; + width: 2rem; + background-size: cover; + background-position: center; + &:hover { + opacity: 1; + } + } + .github { + background-image: url("../img/github.svg"); + } + .google { + background-image: url("../img/google.svg"); + } + .wechat { + background-image: url("../img/wechat.svg"); + } + } + .txt { + height: 1.5rem; + line-height: 1.5rem; + font-size: 1rem; + div { + cursor: pointer; + opacity: 0.5; + &:hover { + opacity: 1; + } + } + } + } + .close { + height: 2rem; + width: 2rem; + position: absolute; + opacity: 0.5; + top: 1rem; + right: 1rem; + cursor: pointer; + &:active { + opacity: 0.8; + } + } +} + +#voa-mask { + position: fixed; + display: none; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 999; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.01); /* 半透明白色遮罩 */ + backdrop-filter: blur(1px); /* 模糊效果 */ + } +} + +.voa-logo { + background-image: url("../favicon.svg"); + background-size: cover; + background-position: center; +} + +.voa-btn { + position: relative; + text-align: center; + display: block; + border: none; + &::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + transition: 0.3s; + } + &:active::after { + box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.5); + /* opacity: 0; */ + } + &:active { + opacity: 0.8; + } +} diff --git a/oaer/lib/assets/favicon.ico b/oaer/lib/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..e26bc40e2c5fe25f828982150e79a809d3fb68f8 GIT binary patch literal 3694 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 GdF>ys{&!RW literal 0 HcmV?d00001 diff --git a/oaer/lib/assets/favicon.svg b/oaer/lib/assets/favicon.svg new file mode 100644 index 0000000..7a505b0 --- /dev/null +++ b/oaer/lib/assets/favicon.svg @@ -0,0 +1,6 @@ + + + diff --git a/oaer/lib/assets/img/github.svg b/oaer/lib/assets/img/github.svg new file mode 100644 index 0000000..54382ad --- /dev/null +++ b/oaer/lib/assets/img/github.svg @@ -0,0 +1,6 @@ + + + diff --git a/oaer/lib/assets/img/google.svg b/oaer/lib/assets/img/google.svg new file mode 100644 index 0000000..b5b80b3 --- /dev/null +++ b/oaer/lib/assets/img/google.svg @@ -0,0 +1,6 @@ + + + diff --git a/oaer/lib/assets/img/wechat.svg b/oaer/lib/assets/img/wechat.svg new file mode 100644 index 0000000..bc1c2fc --- /dev/null +++ b/oaer/lib/assets/img/wechat.svg @@ -0,0 +1,9 @@ + + + + diff --git a/oaer/lib/cfg.ts b/oaer/lib/cfg.ts index f7414b2..4072c72 100644 --- a/oaer/lib/cfg.ts +++ b/oaer/lib/cfg.ts @@ -6,14 +6,13 @@ */ let cfg = { - self: '', - uuid: '', - app_data: {}, + refresh: '', + token: '', + + app_data: {}, ready: false, - token: '', - oa_token: '', local_user: {}, host: '', diff --git a/oaer/lib/css/animate.scss b/oaer/lib/css/animate.scss deleted file mode 100644 index 4903ee5..0000000 --- a/oaer/lib/css/animate.scss +++ /dev/null @@ -1,28 +0,0 @@ -/* - * animate.css - * Copyright (C) 2024 veypi - * - * Distributed under terms of the MIT license. - */ - -@keyframes scale-up { - 0% { - transform: scale(0); - opacity: 0; - } - 100% { - transform: scale(1); - opacity: 1; - } -} - -@keyframes scale-off { - 0% { - transform: scale(1); - opacity: 1; - } - 100% { - transform: scale(0); - opacity: 0; - } -} diff --git a/oaer/lib/css/oaer.scss b/oaer/lib/css/oaer.scss deleted file mode 100644 index 43283ab..0000000 --- a/oaer/lib/css/oaer.scss +++ /dev/null @@ -1,32 +0,0 @@ -/* - * oaer.css - * Copyright (C) 2024 veypi - * - * Distributed under terms of the MIT license. - */ - -@import './animate.scss'; - -.voa { - user-select: none; - cursor: pointer; - height: 4rem; - width: 4rem; - display: flex; - justify-content: center; - align-items: center; - .voa-off{ - } - .voa-on { - border-radius: 100%; - background: #999; - animation: scale-up 100ms ease-out forwards; - } - :hover{ - opacity: 0.9; - } -} - -.voa-animate-off-scale-off { - animation: scale-off 100ms ease-out forwards; -} diff --git a/oaer/lib/main.ts b/oaer/lib/main.ts index eb5d99f..e135950 100644 --- a/oaer/lib/main.ts +++ b/oaer/lib/main.ts @@ -5,22 +5,28 @@ * Distributed under terms of the MIT license. */ -import './css/oaer.scss' +import './assets/css/oaer.scss' + export class OAer { domid: string id: string dom: { + mask: HTMLDivElement frame: HTMLDivElement b0?: HTMLDivElement b1?: HTMLDivElement + login_box?: HTMLDivElement } constructor(id: string, domid?: string) { this.id = id this.domid = domid || 'oaer' this.dom = { - frame: document.querySelector(`#${this.domid}`)! + frame: document.querySelector(`#${this.domid}`)!, + mask: document.createElement('div'), } + this.dom.mask.id = 'voa-mask' + document.body.appendChild(this.dom.mask) this.dom.frame.classList.add('voa') this.build_b0() this.dom.frame.appendChild(this.dom.b0!) @@ -28,18 +34,66 @@ export class OAer { } build_b0() { this.dom.b0 = document.createElement('div') - this.dom.b0.classList.add('voa-off') + this.dom.b0.classList.add('hover-line-b') this.dom.b0.onclick = () => { - this.dom.b1?.classList.add('voa-animate-scale-off') - this.build_b1() - this.dom.frame.replaceChild(this.dom.b1!, this.dom.b0!) + console.log('click b0') + this.build_login() + // this.dom.b1?.classList.add('voa-animate-scale-off') + // this.build_b1() + // this.dom.frame.replaceChild(this.dom.b1!, this.dom.b0!) } this.dom.b0.innerHTML = ` - 登录 - ` } + build_login() { + if (this.dom.login_box) { + return + } + this.dom.login_box = document.createElement('div') + this.dom.login_box.classList.add('voa-modal', 'voa-scale-up') + this.dom.login_box.innerHTML = ` + +` + document.body.appendChild(this.dom.login_box) + document.querySelector('.voa-login-box .close')?.addEventListener('click', () => { + this.dom.login_box?.classList.add('voa-scale-off') + setTimeout(() => { + this.dom.login_box?.remove() + this.dom.login_box = undefined + }, 300) + }) + let uin = document.querySelector('.voa-login-box .username input') as HTMLInputElement + console.log(uin) + } build_b1() { this.dom.b1 = document.createElement('div') this.dom.b1.classList.add('voa-on') diff --git a/oaer/package.json b/oaer/package.json index 5c75bf1..ca21ce7 100644 --- a/oaer/package.json +++ b/oaer/package.json @@ -28,5 +28,8 @@ "type": "git", "url": "https://github.com/veypi/oneauth/oaer" }, - "license": "Apache-2.0" + "license": "Apache-2.0", + "dependencies": { + "axios": "^1.7.2" + } } diff --git a/oaer/public/favicon.svg b/oaer/public/favicon.svg new file mode 100644 index 0000000..7a505b0 --- /dev/null +++ b/oaer/public/favicon.svg @@ -0,0 +1,6 @@ + + + diff --git a/oaer/public/vite.svg b/oaer/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/oaer/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/oaer/src/style.css b/oaer/src/style.css index f714006..0e503e2 100644 --- a/oaer/src/style.css +++ b/oaer/src/style.css @@ -1,4 +1,5 @@ :root { + font-size: 16px; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -18,6 +19,10 @@ body { padding: 0; height: 100vh; width: 100vw; + background: url("https://picsum.photos/960/540"); + background-size: cover; + background-position: center; + /* backdrop-filter: blur(5px); */ } #app { @@ -25,7 +30,5 @@ body { padding-right: 20px; } #oaer { - float:right; + float: right; } - - diff --git a/oaer/yarn.lock b/oaer/yarn.lock index a143c9a..a777a67 100644 --- a/oaer/yarn.lock +++ b/oaer/yarn.lock @@ -210,6 +210,20 @@ anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + +axios@^1.7.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621" + integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw== + dependencies: + follow-redirects "^1.15.6" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + binary-extensions@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" @@ -237,6 +251,18 @@ braces@~3.0.2: optionalDependencies: fsevents "~2.3.2" +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + esbuild@^0.21.3: version "0.21.5" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d" @@ -273,6 +299,20 @@ fill-range@^7.1.1: dependencies: to-regex-range "^5.0.1" +follow-redirects@^1.15.6: + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fsevents@~2.3.2, fsevents@~2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" @@ -314,6 +354,18 @@ is-number@^7.0.0: resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" + nanoid@^3.3.7: version "3.3.7" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" @@ -343,6 +395,11 @@ postcss@^8.4.39: picocolors "^1.0.1" source-map-js "^1.2.0" +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + readdirp@~3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"