starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-21 08:59:07 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

JWT auth plugin and necessary updates

Browse Source
This commit is contained in:
Gregory Schier
2025-01-17 08:02:55 -08:00
parent bd322162c8
commit 07ff709429
24 changed files with 327 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/plugin-runtime-types/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@yaakapp/api",
"version": "0.2.26",
"version": "0.2.27",
"main": "lib/index.js",
"typings": "./lib/index.d.ts",
"files": [

30
packages/plugin-runtime-types/src/bindings/events.ts
View File

@@ -29,6 +29,8 @@ export type Color = "custom" | "default" | "primary" | "secondary" | "info" | "s
export type CopyTextRequest = { text: string, };
export type EditorLanguage = "text" | "javascript" | "json" | "html" | "xml" | "graphql" | "markdown";
export type EmptyPayload = {};
export type ExportHttpRequestRequest = { httpRequest: HttpRequest, };
@@ -49,7 +51,7 @@ export type FindHttpResponsesRequest = { requestId: string, limit?: number, };
export type FindHttpResponsesResponse = { httpResponses: Array<HttpResponse>, };
export type FormInput = { "type": "text" } & FormInputText | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest;
export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest;
export type FormInputBase = { name: string,
/**
@@ -79,6 +81,24 @@ label?: string,
*/
defaultValue?: string, };
export type FormInputEditor = {
/**
* Placeholder for the text input
*/
placeholder?: string | null, language: EditorLanguage, name: string,
/**
* Whether the user must fill in the argument
*/
optional?: boolean,
/**
* The label of the input
*/
label?: string,
/**
* The default value
*/
defaultValue?: string, };
export type FormInputFile = {
/**
* The title of the file selection window
@@ -139,7 +159,11 @@ export type FormInputText = {
/**
* Placeholder for the text input
*/
placeholder?: string | null, name: string,
placeholder?: string | null,
/**
* Placeholder for the text input
*/
password?: boolean, name: string,
/**
* Whether the user must fill in the argument
*/
@@ -153,7 +177,7 @@ label?: string,
*/
defaultValue?: string, };
export type GetHttpAuthenticationResponse = { name: string, pluginName: string, config: Array<FormInput>, };
export type GetHttpAuthenticationResponse = { name: string, label: string, shortLabel: string, config: Array<FormInput>, };
export type GetHttpRequestActionsRequest = Record<string, never>;

8
packages/plugin-runtime/src/index.worker.ts
View File

@@ -304,11 +304,13 @@ async function initialize() {
}
if (payload.type === 'get_http_authentication_request' && mod.plugin?.authentication) {
const auth = mod.plugin.authentication;
const replyPayload: InternalEventPayload = {
...auth,
type: 'get_http_authentication_response',
name: mod.plugin.authentication.name,
pluginName: pkg.name,
config: mod.plugin.authentication.config,
// Remove unneeded attrs
onApply: undefined,
};
sendPayload(windowContext, replyPayload, replyId);
return;

14
src-tauri/src/http_request.rs
View File

@@ -369,14 +369,8 @@ pub async fn send_http_request<R: Runtime>(
};
// Apply authentication
// Map legacy auth name values from before they were plugins
let auth_plugin_name = match request.authentication_type.clone() {
Some(s) if s == "basic" => Some("@yaakapp/auth-basic".to_string()),
Some(s) if s == "bearer" => Some("@yaakapp/auth-bearer".to_string()),
_ => request.authentication_type.to_owned(),
};
if let Some(plugin_name) = auth_plugin_name {
if let Some(auth_name) = request.authentication_type.to_owned() {
let req = CallHttpAuthenticationRequest {
config: serde_json::to_value(&request.authentication)
.unwrap()
@@ -395,13 +389,13 @@ pub async fn send_http_request<R: Runtime>(
.collect(),
};
let plugin_result =
match plugin_manager.call_http_authentication(window, &plugin_name, req).await {
match plugin_manager.call_http_authentication(window, &auth_name, req).await {
Ok(r) => r,
Err(e) => {
return Ok(response_err(&*response.lock().await, e.to_string(), window).await);
}
};
{
let url = sendable_req.url_mut();
*url = Url::parse(&plugin_result.url).unwrap();

21
src-tauri/src/lib.rs
View File

@@ -235,19 +235,10 @@ async fn cmd_grpc_go<R: Runtime>(
metadata.insert(h.name, h.value);
}
// Map legacy auth name values from before they were plugins
let auth_plugin_name = match req.authentication_type.clone() {
Some(s) if s == "basic" => Some("@yaakapp/auth-basic".to_string()),
Some(s) if s == "bearer" => Some("@yaakapp/auth-bearer".to_string()),
_ => req.authentication_type.to_owned(),
};
if let Some(plugin_name) = auth_plugin_name {
if let Some(auth_name) = req.authentication_type.clone() {
let auth = req.authentication.clone();
let plugin_req = CallHttpAuthenticationRequest {
config: serde_json::to_value(&req.authentication)
.unwrap()
.as_object()
.unwrap()
.to_owned(),
config: serde_json::to_value(&auth).unwrap().as_object().unwrap().to_owned(),
method: "POST".to_string(),
url: req.url.clone(),
headers: metadata
@@ -259,7 +250,7 @@ async fn cmd_grpc_go<R: Runtime>(
.collect(),
};
let plugin_result = plugin_manager
.call_http_authentication(&window, &plugin_name, plugin_req)
.call_http_authentication(&window, &auth_name, plugin_req)
.await
.map_err(|e| e.to_string())?;
@@ -980,7 +971,9 @@ async fn cmd_get_http_authentication<R: Runtime>(
window: WebviewWindow<R>,
plugin_manager: State<'_, PluginManager>,
) -> Result<Vec<GetHttpAuthenticationResponse>, String> {
plugin_manager.get_http_authentication(&window).await.map_err(|e| e.to_string())
let results =
plugin_manager.get_http_authentication(&window).await.map_err(|e| e.to_string())?;
Ok(results.into_iter().map(|(_, a)| a).collect())
}
#[tauri::command]

5
src-tauri/src/template_callback.rs
View File

@@ -46,9 +46,10 @@ impl TemplateCallback for PluginTemplateCallback {
let mut args_with_defaults = args.clone();
// Fill in default values for all args
for a_def in function.args {
let base = match a_def {
for arg in function.args {
let base = match arg {
FormInput::Text(a) => a.base,
FormInput::Editor(a) => a.base,
FormInput::Select(a) => a.base,
FormInput::Checkbox(a) => a.base,
FormInput::File(a) => a.base,

7
src-tauri/vendored/plugins/auth-basic/build/index.js generated
View File

@@ -25,7 +25,9 @@ __export(src_exports, {
module.exports = __toCommonJS(src_exports);
var plugin = {
authentication: {
name: "Basic",
name: "basic",
label: "Basic Auth",
shortLabel: "Basic",
config: [{
type: "text",
name: "username",
@@ -35,7 +37,8 @@ var plugin = {
type: "text",
name: "password",
label: "Password",
optional: true
optional: true,
password: true
}],
async onApply(_ctx, args) {
const { username, password } = args.config;

7
src-tauri/vendored/plugins/auth-bearer/build/index.js generated
View File

@@ -25,12 +25,15 @@ __export(src_exports, {
module.exports = __toCommonJS(src_exports);
var plugin = {
authentication: {
name: "Bearer",
name: "bearer",
label: "Bearer Token",
shortLabel: "Bearer",
config: [{
type: "text",
name: "token",
label: "Token",
optional: true
optional: true,
password: true
}],
async onApply(_ctx, args) {
const { token } = args.config;

56
src-tauri/vendored/plugins/auth-jwt/build/index.js generated
View File

@@ -3793,17 +3793,57 @@ __export(src_exports, {
});
module.exports = __toCommonJS(src_exports);
var import_jsonwebtoken = __toESM(require_jsonwebtoken());
var algorithms = [
"HS256",
"HS384",
"HS512",
"RS256",
"RS384",
"RS512",
"PS256",
"PS384",
"PS512",
"ES256",
"ES384",
"ES512"
];
var defaultAlgorithm = algorithms[0];
var plugin = {
authentication: {
name: "JWT",
config: [{
type: "text",
name: "foo",
label: "Foo",
optional: true
}],
name: "jwt",
label: "JWT Bearer",
shortLabel: "JWT",
config: [
{
type: "select",
name: "algorithm",
label: "Algorithm",
defaultValue: defaultAlgorithm,
options: algorithms.map((value) => ({ name: value, value }))
},
{
type: "text",
name: "secret",
label: "Secret",
optional: true
},
{
type: "checkbox",
name: "secretBase64",
label: "Secret Base64 Encoded"
},
{
type: "editor",
name: "payload",
label: "Payload",
language: "json",
optional: true
}
],
async onApply(_ctx, args) {
const token = import_jsonwebtoken.default.sign({ foo: "bar" }, null);
const { algorithm, secret: _secret, secretBase64, payload } = args.config;
const secret = secretBase64 ? Buffer.from(`${_secret}`, "base64") : `${_secret}`;
const token = import_jsonwebtoken.default.sign(`${payload}`, secret, { algorithm });
return {
url: args.url,
headers: [{ name: "Authorization", value: `Bearer ${token}` }]

2
src-tauri/yaak-grpc/Cargo.toml
View File

@@ -13,7 +13,7 @@ tokio-stream = "0.1.14"
prost-types = "0.13.4"
serde = { version = "1.0.196", features = ["derive"] }
serde_json = "1.0.113"
prost-reflect = { version = "0.14.4", features = ["serde", "derive"] }
prost-reflect = { version = "0.14.4", default-features = false, features = ["serde", "derive"] }
log = "0.4.20"
anyhow = "1.0.79"
hyper = "1.5.2"

30
src-tauri/yaak-plugins/bindings/events.ts
View File

@@ -29,6 +29,8 @@ export type Color = "custom" | "default" | "primary" | "secondary" | "info" | "s
export type CopyTextRequest = { text: string, };
export type EditorLanguage = "text" | "javascript" | "json" | "html" | "xml" | "graphql" | "markdown";
export type EmptyPayload = {};
export type ExportHttpRequestRequest = { httpRequest: HttpRequest, };
@@ -49,7 +51,7 @@ export type FindHttpResponsesRequest = { requestId: string, limit?: number, };
export type FindHttpResponsesResponse = { httpResponses: Array<HttpResponse>, };
export type FormInput = { "type": "text" } & FormInputText | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest;
export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest;
export type FormInputBase = { name: string,
/**
@@ -79,6 +81,24 @@ label?: string,
*/
defaultValue?: string, };
export type FormInputEditor = {
/**
* Placeholder for the text input
*/
placeholder?: string | null, language: EditorLanguage, name: string,
/**
* Whether the user must fill in the argument
*/
optional?: boolean,
/**
* The label of the input
*/
label?: string,
/**
* The default value
*/
defaultValue?: string, };
export type FormInputFile = {
/**
* The title of the file selection window
@@ -139,7 +159,11 @@ export type FormInputText = {
/**
* Placeholder for the text input
*/
placeholder?: string | null, name: string,
placeholder?: string | null,
/**
* Placeholder for the text input
*/
password?: boolean, name: string,
/**
* Whether the user must fill in the argument
*/
@@ -153,7 +177,7 @@ label?: string,
*/
defaultValue?: string, };
export type GetHttpAuthenticationResponse = { name: string, pluginName: string, config: Array<FormInput>, };
export type GetHttpAuthenticationResponse = { name: string, label: string, shortLabel: string, config: Array<FormInput>, };
export type GetHttpRequestActionsRequest = Record<string, never>;

3
src-tauri/yaak-plugins/src/error.rs
View File

@@ -25,6 +25,9 @@ pub enum Error {
#[error("Plugin not found: {0}")]
PluginNotFoundErr(String),
#[error("Auth plugin not found: {0}")]
AuthPluginNotFound(String),
#[error("Plugin error: {0}")]
PluginErr(String),

41
src-tauri/yaak-plugins/src/events.rs
View File

@@ -298,7 +298,8 @@ pub enum Icon {
#[ts(export, export_to = "events.ts")]
pub struct GetHttpAuthenticationResponse {
pub name: String,
pub plugin_name: String,
pub label: String,
pub short_label: String,
pub config: Vec<FormInput>,
}
@@ -356,6 +357,7 @@ pub struct TemplateFunction {
#[ts(export, export_to = "events.ts")]
pub enum FormInput {
Text(FormInputText),
Editor(FormInputEditor),
Select(FormInputSelect),
Checkbox(FormInputCheckbox),
File(FormInputFile),
@@ -391,6 +393,43 @@ pub struct FormInputText {
/// Placeholder for the text input
#[ts(optional = nullable)]
pub placeholder: Option<String>,
/// Placeholder for the text input
#[ts(optional)]
pub password: Option<bool>,
}
#[derive(Debug, Clone, Serialize, Deserialize, TS)]
#[serde(rename_all = "snake_case")]
#[ts(export, export_to = "events.ts")]
pub enum EditorLanguage {
Text,
Javascript,
Json,
Html,
Xml,
Graphql,
Markdown,
}
impl Default for EditorLanguage {
fn default() -> Self {
Self::Text
}
}
#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
#[serde(default, rename_all = "camelCase")]
#[ts(export, export_to = "events.ts")]
pub struct FormInputEditor {
#[serde(flatten)]
pub base: FormInputBase,
/// Placeholder for the text input
#[ts(optional = nullable)]
pub placeholder: Option<String>,
pub language: EditorLanguage,
}
#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]

48
src-tauri/yaak-plugins/src/manager.rs
View File

@@ -1,9 +1,11 @@
use crate::error::Error::{ClientNotInitializedErr, PluginErr, PluginNotFoundErr, UnknownEventErr};
use crate::error::Error::{
AuthPluginNotFound, ClientNotInitializedErr, PluginErr, PluginNotFoundErr, UnknownEventErr,
};
use crate::error::Result;
use crate::events::{
BootRequest, CallHttpAuthenticationRequest, CallHttpAuthenticationResponse,
CallHttpRequestActionRequest, CallTemplateFunctionArgs, CallTemplateFunctionRequest,
CallTemplateFunctionResponse, EmptyPayload, FilterRequest, FilterResponse,
CallTemplateFunctionResponse, EmptyPayload, FilterRequest, FilterResponse, FormInput,
GetHttpAuthenticationResponse, GetHttpRequestActionsResponse, GetTemplateFunctionsResponse,
ImportRequest, ImportResponse, InternalEvent, InternalEventPayload, RenderPurpose,
WindowContext,
@@ -462,7 +464,7 @@ impl PluginManager {
pub async fn get_http_authentication<R: Runtime>(
&self,
window: &WebviewWindow<R>,
) -> Result<Vec<GetHttpAuthenticationResponse>> {
) -> Result<Vec<(PluginHandle, GetHttpAuthenticationResponse)>> {
let window_context = WindowContext::from_window(window);
let reply_events = self
.send_and_wait(
@@ -474,7 +476,11 @@ impl PluginManager {
let mut results = Vec::new();
for event in reply_events {
if let InternalEventPayload::GetHttpAuthenticationResponse(resp) = event.payload {
results.push(resp.clone());
let plugin = self
.get_plugin_by_ref_id(&event.plugin_ref_id)
.await
.ok_or(PluginNotFoundErr(event.plugin_ref_id))?;
results.push((plugin, resp.clone()));
}
}
@@ -484,13 +490,37 @@ impl PluginManager {
pub async fn call_http_authentication<R: Runtime>(
&self,
window: &WebviewWindow<R>,
plugin_name: &str,
auth_name: &str,
req: CallHttpAuthenticationRequest,
) -> Result<CallHttpAuthenticationResponse> {
let plugin = self
.get_plugin_by_name(plugin_name)
.await
.ok_or(PluginNotFoundErr(plugin_name.to_string()))?;
let handlers = self.get_http_authentication(window).await?;
let (plugin, authentication) = handlers
.iter()
.find(|(_, a)| a.name == auth_name)
.ok_or(AuthPluginNotFound(auth_name.to_string()))?;
// Clone for mutability
let mut req = req.clone();
// Fill in default values
for arg in authentication.config.clone() {
let base = match arg {
FormInput::Text(a) => a.base,
FormInput::Editor(a) => a.base,
FormInput::Select(a) => a.base,
FormInput::Checkbox(a) => a.base,
FormInput::File(a) => a.base,
FormInput::HttpRequest(a) => a.base,
};
if let None = req.config.get(base.name.as_str()) {
let default = match base.default_value {
None => serde_json::Value::Null,
Some(s) => serde_json::Value::String(s),
};
req.config.insert(base.name, default);
}
}
let event = self
.send_to_plugin_and_wait(
WindowContext::from_window(window),

71
src-web/components/DynamicForm.tsx
View File

@@ -2,19 +2,24 @@ import type { Folder, HttpRequest } from '@yaakapp-internal/models';
import type {
FormInput,
FormInputCheckbox,
FormInputEditor,
FormInputFile,
FormInputHttpRequest,
FormInputSelect,
FormInputText,
} from '@yaakapp-internal/plugins';
import classNames from 'classnames';
import { useCallback } from 'react';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useFolders } from '../hooks/useFolders';
import { useHttpRequests } from '../hooks/useHttpRequests';
import { fallbackRequestName } from '../lib/fallbackRequestName';
import { Checkbox } from './core/Checkbox';
import { Editor } from './core/Editor/Editor';
import { Input } from './core/Input';
import { Label } from './core/Label';
import { Select } from './core/Select';
import { VStack } from './core/Stacks';
import { SelectFile } from './SelectFile';
// eslint-disable-next-line react-refresh/only-export-components
@@ -41,7 +46,7 @@ export function DynamicForm<T extends Record<string, string | boolean>>({
);
return (
<div>
<VStack space={3}>
{config.map((a, i) => {
switch (a.type) {
case 'select':
@@ -50,7 +55,7 @@ export function DynamicForm<T extends Record<string, string | boolean>>({
key={i + stateKey}
arg={a}
onChange={(v) => setDataAttr(a.name, v)}
value={data[a.name] ? String(data[a.name]) : '__ERROR__'}
value={data[a.name] ? String(data[a.name]) : DYNAMIC_FORM_NULL_ARG}
/>
);
case 'text':
@@ -64,6 +69,17 @@ export function DynamicForm<T extends Record<string, string | boolean>>({
value={data[a.name] ? String(data[a.name]) : ''}
/>
);
case 'editor':
return (
<EditorArg
key={i}
stateKey={stateKey}
arg={a}
useTemplating={useTemplating || false}
onChange={(v) => setDataAttr(a.name, v)}
value={data[a.name] ? String(data[a.name]) : ''}
/>
);
case 'checkbox':
return (
<CheckboxArg
@@ -93,7 +109,7 @@ export function DynamicForm<T extends Record<string, string | boolean>>({
);
}
})}
</div>
</VStack>
);
}
@@ -123,10 +139,11 @@ function TextArg({
onChange={handleChange}
defaultValue={value === DYNAMIC_FORM_NULL_ARG ? '' : value}
require={!arg.optional}
type={arg.password ? 'password' : 'text'}
label={
<>
{arg.label ?? arg.name}
{arg.optional && <span> (optional)</span>}
{arg.optional && <span className="text-xs text-text-subtlest"> (optional)</span>}
</>
}
hideLabel={arg.label == null}
@@ -138,6 +155,50 @@ function TextArg({
);
}
function EditorArg({
arg,
onChange,
value,
useTemplating,
stateKey,
}: {
arg: FormInputEditor;
value: string;
onChange: (v: string) => void;
useTemplating: boolean;
stateKey: string;
}) {
const handleChange = useCallback(
(value: string) => {
onChange(value === '' ? DYNAMIC_FORM_NULL_ARG : value);
},
[onChange],
);
const id = `input-${arg.name}`;
return (
<div className="w-full grid grid-rows-[auto_minmax(0,1fr)]">
<Label htmlFor={id}>{arg.label}</Label>
<Editor
id={id}
className={classNames(
'border border-border rounded-md overflow-hidden px-2 py-1.5',
'focus-within:border-border-focus',
)}
language={arg.language}
onChange={handleChange}
heightMode="auto"
defaultValue={value === DYNAMIC_FORM_NULL_ARG ? '' : value}
placeholder={arg.placeholder ?? arg.defaultValue ?? ''}
useTemplating={useTemplating}
stateKey={stateKey}
forceUpdateKey={stateKey}
/>
</div>
);
}
function SelectArg({
arg,
value,
@@ -155,7 +216,7 @@ function SelectArg({
value={value}
options={[
...arg.options.map((a) => ({
label: a.name + (arg.defaultValue === a.value ? ' (default)' : ''),
label: a.name,
value: a.value === arg.defaultValue ? DYNAMIC_FORM_NULL_ARG : a.value,
})),
]}

5
src-web/components/GrpcConnectionSetupPane.tsx
View File

@@ -143,8 +143,9 @@ export function GrpcConnectionSetupPane({
value: activeRequest.authenticationType,
items: [
...authentication.map((a) => ({
label: a.name,
value: a.pluginName,
label: a.label || 'UNKNOWN',
shortLabel: a.shortLabel,
value: a.name,
})),
{ type: 'separator' },
{ label: 'No Authentication', shortLabel: 'Auth', value: null },

2
src-web/components/HttpAuthenticationEditor.tsx
View File

@@ -14,7 +14,7 @@ export function HttpAuthenticationEditor({ request }: Props) {
const updateHttpRequest = useUpdateAnyHttpRequest();
const updateGrpcRequest = useUpdateAnyGrpcRequest();
const auths = useHttpAuthentication();
const auth = auths.find((a) => a.pluginName === request.authenticationType);
const auth = auths.find((a) => a.name === request.authenticationType);
const handleChange = useCallback(
(authentication: Record<string, boolean>) => {

5
src-web/components/RequestPane.tsx
View File

@@ -235,8 +235,9 @@ export const RequestPane = memo(function RequestPane({
value: activeRequest.authenticationType,
items: [
...authentication.map((a) => ({
label: a.name,
value: a.pluginName,
label: a.label || 'UNKNOWN',
shortLabel: a.shortLabel,
value: a.name,
})),
{ type: 'separator' },
{ label: 'No Authentication', shortLabel: 'Auth', value: null },

38
src-web/components/core/Editor/Editor.tsx
View File

@@ -7,7 +7,7 @@ import { emacs } from '@replit/codemirror-emacs';
import { vim } from '@replit/codemirror-vim';
import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
import type { EditorKeymap, EnvironmentVariable } from '@yaakapp-internal/models';
import type { TemplateFunction } from '@yaakapp-internal/plugins';
import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
import classNames from 'classnames';
import { EditorView } from 'codemirror';
import type { MutableRefObject, ReactNode } from 'react';
@@ -51,16 +51,7 @@ export interface EditorProps {
type?: 'text' | 'password';
className?: string;
heightMode?: 'auto' | 'full';
language?:
| 'javascript'
| 'json'
| 'html'
| 'xml'
| 'graphql'
| 'url'
| 'pairs'
| 'text'
| 'markdown';
language?: EditorLanguage | 'pairs';
forceUpdateKey?: string | number;
autoFocus?: boolean;
autoSelect?: boolean;
@@ -90,10 +81,6 @@ const stateFields = { history: historyField, folds: foldState };
const emptyVariables: EnvironmentVariable[] = [];
const emptyExtension: Extension = [];
// NOTE: For some reason, the cursor doesn't appear if the field is empty and there is no
// placeholder. So we set it to a space to force it to show.
const emptyPlaceholder = ' ';
export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
{
readOnly,
@@ -178,11 +165,11 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
useEffect(
function configurePlaceholder() {
if (cm.current === null) return;
const ext = placeholderExt(placeholderElFromText(placeholder || emptyPlaceholder));
const ext = placeholderExt(placeholderElFromText(placeholder ?? '', type));
const effect = placeholderCompartment.current.reconfigure(ext);
cm.current?.view.dispatch({ effects: effect });
},
[placeholder],
[placeholder, type],
);
// Update vim
@@ -354,7 +341,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
const extensions = [
languageCompartment.of(langExt),
placeholderCompartment.current.of(
placeholderExt(placeholderElFromText(placeholder || emptyPlaceholder)),
placeholderExt(placeholderElFromText(placeholder ?? '', type)),
),
wrapLinesCompartment.current.of(wrapLines ? EditorView.lineWrapping : []),
keymapCompartment.current.of(
@@ -592,18 +579,21 @@ function getExtensions({
];
}
const placeholderElFromText = (text: string) => {
const placeholderElFromText = (text: string, type: EditorProps['type']) => {
const el = document.createElement('div');
el.innerHTML = text.replaceAll('\n', '<br/>');
if (type === 'password') {
// Will be obscured (dots) so just needs to be something to take up space
el.innerHTML = 'aaaaaaaaaa';
el.setAttribute('aria-hidden', 'true');
} else {
el.innerHTML = text ? text.replaceAll('\n', '<br/>') : ' ';
}
return el;
};
function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
if (!stateKey || state == null) return;
sessionStorage.setItem(
computeFullStateKey(stateKey),
JSON.stringify(state.toJSON(stateFields)),
);
sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(state.toJSON(stateFields)));
}
function getCachedEditorState(doc: string, stateKey: string | null) {

7
src-web/components/core/Input.tsx
View File

@@ -3,6 +3,7 @@ import type { EditorView } from 'codemirror';
import type { ReactNode } from 'react';
import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import { generateId } from '../../lib/generateId';
import type { EditorProps } from './Editor/Editor';
import { Editor } from './Editor/Editor';
import { IconButton } from './IconButton';
@@ -94,7 +95,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
onBlur?.();
}, [onBlur]);
const id = `input-${label}`;
const id = useRef(`input-${generateId()}`);
const editorClassName = classNames(
className,
'!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
@@ -140,7 +141,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
labelPosition === 'top' && 'flex-row gap-0.5',
)}
>
<Label htmlFor={id} className={classNames(labelClassName, hideLabel && 'sr-only')}>
<Label htmlFor={id.current} className={classNames(labelClassName, hideLabel && 'sr-only')}>
{label}
</Label>
<HStack
@@ -168,7 +169,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
>
<Editor
ref={editorRef}
id={id}
id={id.current}
singleLine
stateKey={stateKey}
wrapLines={wrapLines}

1
src-web/components/core/RadioDropdown.tsx
View File

@@ -38,7 +38,6 @@ export function RadioDropdown<T = string | null>({
return {
key: item.value,
label: item.label,
shortLabel: item.shortLabel,
rightSlot: item.rightSlot,
onSelect: () => onChange(item.value),
leftSlot: <Icon icon={value === item.value ? 'check' : 'empty'} />,

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -114,7 +114,7 @@ export function Tabs({
}
className={btnClassName}
>
{option && 'shortLabel' in option
{option && 'shortLabel' in option && option.shortLabel
? option.shortLabel
: (option?.label ?? 'Unknown')}
{t.rightSlot}

17
src-web/hooks/useHttpAuthentication.ts
View File

@@ -4,6 +4,7 @@ import { useAtomValue } from 'jotai';
import { atom, useSetAtom } from 'jotai/index';
import { useState } from 'react';
import { invokeCmd } from '../lib/tauri';
import { showErrorToast } from '../lib/toast';
const httpAuthenticationAtom = atom<GetHttpAuthenticationResponse[]>([]);
const orderedHttpAuthenticationAtom = atom((get) =>
@@ -27,12 +28,16 @@ export function useSubscribeHttpAuthentication() {
refetchInterval: numResults > 0 ? Infinity : 1000,
refetchOnMount: true,
queryFn: async () => {
const result = await invokeCmd<GetHttpAuthenticationResponse[]>(
'cmd_get_http_authentication',
);
setNumResults(result.length);
setAtom(result);
return result;
try {
const result = await invokeCmd<GetHttpAuthenticationResponse[]>(
'cmd_get_http_authentication',
);
setNumResults(result.length);
setAtom(result);
return result;
} catch (err) {
showErrorToast('http-authentication-error', err);
}
},
});
}

9
src-web/lib/toast.ts
View File

@@ -34,3 +34,12 @@ export function hideToast(id: string) {
return all.filter((t) => t.id !== id);
});
}
export function showErrorToast<T>(id: string, message: T) {
return showToast({
id,
message: String(message),
timeout: 8000,
color: 'danger',
});
}