| 1 | /** |
| 2 | * Codifica un texto para que cambie los caracteres |
| 3 | * especiales y no se pueda interpretar como |
| 4 | * etiiqueta HTML. Esta técnica evita la inyección |
| 5 | * de código. |
| 6 | * @param { string } texto |
| 7 | * @returns { string } un texto que no puede |
| 8 | * interpretarse como HTML. */ |
| 9 | export function htmlentities(texto) { |
| 10 | return texto.replace(/[<>"']/g, textoDetectado => { |
| 11 | switch (textoDetectado) { |
| 12 | case "<": return "<" |
| 13 | case ">": return ">" |
| 14 | case '"': return """ |
| 15 | case "'": return "'" |
| 16 | default: return textoDetectado |
| 17 | } |
| 18 | }) |
| 19 | } |
| 20 | // Permite que los eventos de html usen la función. |
| 21 | window["htmlentities"] = htmlentities |
| 1 | import { |
| 2 | JsonResponse, JsonResponse_Created, JsonResponse_NoContent, JsonResponse_OK |
| 3 | } from "./JsonResponse.js" |
| 4 | import { |
| 5 | ProblemDetails, ProblemDetails_InternalServerError |
| 6 | } from "./ProblemDetails.js" |
| 7 | |
| 8 | /** |
| 9 | * Espera a que la promesa de un fetch termine. Si |
| 10 | * hay error, lanza una excepción. Si no hay error, |
| 11 | * interpreta la respuesta del servidor como JSON y |
| 12 | * la convierte en una literal de objeto. |
| 13 | * @param { string | Promise<Response> } servicio |
| 14 | */ |
| 15 | export async function invocaServicio(servicio) { |
| 16 | let f = servicio |
| 17 | if (typeof servicio === "string") { |
| 18 | f = fetch(servicio, { |
| 19 | headers: { "Accept": "application/json, application/problem+json" } |
| 20 | }) |
| 21 | } else if (!(f instanceof Promise)) { |
| 22 | throw new Error("Servicio de tipo incorrecto.") |
| 23 | } |
| 24 | const respuesta = await f |
| 25 | if (respuesta.ok) { |
| 26 | if (respuesta.status === JsonResponse_NoContent) { |
| 27 | return new JsonResponse(JsonResponse_NoContent) |
| 28 | } |
| 29 | const texto = await respuesta.text() |
| 30 | try { |
| 31 | const body = JSON.parse(texto) |
| 32 | if (respuesta.status === JsonResponse_Created) { |
| 33 | const location = respuesta.headers.get("location") |
| 34 | return new JsonResponse(JsonResponse_Created, body, |
| 35 | location === null ? undefined : location) |
| 36 | } else { |
| 37 | return new JsonResponse(JsonResponse_OK, body) |
| 38 | } |
| 39 | } catch (error) { |
| 40 | // El contenido no es JSON. Probablemente sea texto. |
| 41 | throw new ProblemDetails(ProblemDetails_InternalServerError, |
| 42 | "Problema interno en el servidor.", texto) |
| 43 | } |
| 44 | } else { |
| 45 | const texto = await respuesta.text() |
| 46 | try { |
| 47 | const { type, title, detail } = JSON.parse(texto) |
| 48 | throw new ProblemDetails(respuesta.status, |
| 49 | typeof title === "string" ? title : "", |
| 50 | typeof detail === "string" ? detail : undefined, |
| 51 | typeof type === "string" ? type : undefined) |
| 52 | } catch (error) { |
| 53 | if (error instanceof ProblemDetails) { |
| 54 | throw error |
| 55 | } else { |
| 56 | // El contenido no es JSON. Probablemente sea texto. |
| 57 | throw new ProblemDetails(respuesta.status, respuesta.statusText, texto) |
| 58 | } |
| 59 | } |
| 60 | } |
| 61 | } |
| 62 | |
| 63 | // Permite que los eventos de html usen la función. |
| 64 | window["invocaServicio"] = invocaServicio |
| 1 | export const JsonResponse_OK = 200 |
| 2 | export const JsonResponse_Created = 201 |
| 3 | export const JsonResponse_NoContent = 204 |
| 4 | |
| 5 | export class JsonResponse { |
| 6 | |
| 7 | /** |
| 8 | * @param {number} status |
| 9 | * @param {any} [body] |
| 10 | * @param {string} [location] |
| 11 | */ |
| 12 | constructor(status, body, location) { |
| 13 | /** @readonly */ |
| 14 | this.status = status |
| 15 | /** @readonly */ |
| 16 | this.body = body |
| 17 | /** @readonly */ |
| 18 | this.location = location |
| 19 | } |
| 20 | |
| 21 | } |
| 1 | import { ProblemDetails } from "./ProblemDetails.js" |
| 2 | |
| 3 | /** |
| 4 | * Muestra un error en la consola y en un cuadro de |
| 5 | * alerta el mensaje de una excepción. |
| 6 | * @param { ProblemDetails | Error | null } error descripción del error. |
| 7 | */ |
| 8 | export function muestraError(error) { |
| 9 | if (error === null) { |
| 10 | console.log("Error") |
| 11 | alert("Error") |
| 12 | } else if (error instanceof ProblemDetails) { |
| 13 | let mensaje = error.title |
| 14 | if (error.detail) { |
| 15 | mensaje += `\n\n${error.detail}` |
| 16 | } |
| 17 | mensaje += `\n\nCódigo: ${error.status}` |
| 18 | if (error.type) { |
| 19 | mensaje += ` ${error.type}` |
| 20 | } |
| 21 | console.error(mensaje) |
| 22 | console.error(error) |
| 23 | alert(mensaje) |
| 24 | } else { |
| 25 | console.error(error) |
| 26 | alert(error.message) |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | // Permite que los eventos de html usen la función. |
| 31 | window["muestraError"] = muestraError |
| 1 | export const ProblemDetails_BadRequest = 400 |
| 2 | export const ProblemDetails_NotFound = 404 |
| 3 | export const ProblemDetails_InternalServerError = 500 |
| 4 | |
| 5 | export class ProblemDetails extends Error { |
| 6 | |
| 7 | /** |
| 8 | * @param {number} status |
| 9 | * @param {string} title |
| 10 | * @param {string} [detail] |
| 11 | * @param {string} [type] |
| 12 | */ |
| 13 | constructor(status, title, detail, type) { |
| 14 | super(title) |
| 15 | /** @readonly */ |
| 16 | this.status = status |
| 17 | /** @readonly */ |
| 18 | this.type = type |
| 19 | /** @readonly */ |
| 20 | this.title = title |
| 21 | /** @readonly */ |
| 22 | this.detail = detail |
| 23 | } |
| 24 | |
| 25 | } |
| 1 | import { invocaServicio } from "./invocaServicio.js" |
| 2 | |
| 3 | /** |
| 4 | * Envía los datos de la forma a la url usando la codificación |
| 5 | * multipart/form-data. |
| 6 | * @param {string} url |
| 7 | * @param {Event} event |
| 8 | * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS" |
| 9 | * | "CONNECT" | "HEAD" } metodoHttp |
| 10 | */ |
| 11 | export function submitForm(url, event, metodoHttp = "POST") { |
| 12 | event.preventDefault() |
| 13 | const form = event.target |
| 14 | if (!(form instanceof HTMLFormElement)) |
| 15 | throw new Error("event.target no es una form.") |
| 16 | return invocaServicio(fetch(url, { |
| 17 | method: metodoHttp, |
| 18 | headers: { "Accept": "application/json, application/problem+json" }, |
| 19 | body: new FormData(form) |
| 20 | })) |
| 21 | } |
| 22 | |
| 23 | // Permite que los eventos de html usen la función. |
| 24 | window["submitForm"] = submitForm |