Merge pull request #4940 from vsc55/issues_4939

Fix issues #4939, #4938

frontend/src/components/Form/AccessClientFields.tsx

@@ -3,7 +3,7 @@ import cn from "classnames";
 import { useFormikContext } from "formik";
 import { useState } from "react";
 import type { AccessListClient } from "src/api/backend";
-import { T } from "src/locale";
+import { intl, T } from "src/locale";
 
 interface Props {
 	initialValues: AccessListClient[];
@@ -65,8 +65,8 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 									value={client.directive}
 									onChange={(e) => handleChange(idx, "directive", e.target.value)}
 								>
-									<option value="allow">Allow</option>
-									<option value="deny">Deny</option>
+									<option value="allow"><T id="action.allow" /></option>
+									<option value="deny"><T id="action.deny" /></option>
 								</select>
 							</span>
 							<input
@@ -76,7 +76,7 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 								autoComplete="off"
 								value={client.address}
 								onChange={(e) => handleChange(idx, "address", e.target.value)}
-								placeholder="192.168.1.100 or 192.168.1.0/24 or 2001:0db8::/32"
+								placeholder={intl.formatMessage({ id: "access-list.rule-source.placeholder" })}
 							/>
 						</div>
 					</div>
@@ -112,7 +112,7 @@ export function AccessClientFields({ initialValues, name = "clients" }: Props) {
 								value="deny"
 								disabled
 							>
-								<option value="deny">Deny</option>
+								<option value="deny"><T id="action.deny" /></option>
 							</select>
 						</span>
 						<input

frontend/src/components/Form/DNSProviderFields.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import Select, { type ActionMeta } from "react-select";
 import type { DNSProvider } from "src/api/backend";
 import { useDnsProviders } from "src/hooks";
-import { T } from "src/locale";
+import { intl, T } from "src/locale";
 import styles from "./DNSProviderFields.module.css";
 
 interface DNSProviderOption {
@@ -57,7 +57,7 @@ export function DNSProviderFields({ showBoundaryBox = false }: Props) {
 							id="dnsProvider"
 							closeMenuOnSelect={true}
 							isClearable={false}
-							placeholder="Select a Provider..."
+							placeholder={intl.formatMessage({ id: "certificates.dns.provider.placeholder" })}
 							isLoading={isLoading}
 							isSearchable
 							onChange={handleChange}

frontend/src/locale/src/en.json

@@ -1,4 +1,7 @@
 {
+	"aaccess-list.rule-source.placeholder": {
+		"defaultMessage": "192.168.1.100 or 192.168.1.0/24 or 2001:0db8::/32"
+	},
 	"access-list": {
 		"defaultMessage": "Access List"
 	},
@@ -38,12 +41,18 @@
 	"action.add-location": {
 		"defaultMessage": "Add Location"
 	},
+	"action.allow": {
+		"defaultMessage": "Allow"
+	},
 	"action.close": {
 		"defaultMessage": "Close"
 	},
 	"action.delete": {
 		"defaultMessage": "Delete"
 	},
+	"action.deny": {
+		"defaultMessage": "Deny"
+	},
 	"action.disable": {
 		"defaultMessage": "Disable"
 	},
@@ -68,6 +77,9 @@
 	"auditlogs": {
 		"defaultMessage": "Audit Logs"
 	},
+	"auto": {
+		"defaultMessage": "Auto"
+	},
 	"cancel": {
 		"defaultMessage": "Cancel"
 	},
@@ -128,6 +140,9 @@
 	"certificates.dns.provider": {
 		"defaultMessage": "DNS Provider"
 	},
+	"certificates.dns.provider.placeholder": {
+		"defaultMessage": "Select a Provider..."
+	},
 	"certificates.dns.warning": {
 		"defaultMessage": "This section requires some knowledge about Certbot and its DNS plugins. Please consult the respective plugins documentation."
 	},
@@ -518,6 +533,24 @@
 	"redirection-hosts.count": {
 		"defaultMessage": "{count} {count, plural, one {Redirection Host} other {Redirection Hosts}}"
 	},
+	"redirection-hosts.http-code.300": {
+		"defaultMessage": "300 Multiple Choices"
+	},
+	"redirection-hosts.http-code.301": {
+		"defaultMessage": "301 Moved permanently"
+	},
+	"redirection-hosts.http-code.302": {
+		"defaultMessage": "302 Moved temporarily"
+	},
+	"redirection-hosts.http-code.303": {
+		"defaultMessage": "303 See other"
+	},
+	"redirection-hosts.http-code.307": {
+		"defaultMessage": "307 Temporary redirect"
+	},
+	"redirection-hosts.http-code.308": {
+		"defaultMessage": "308 Permanent redirect"
+	},
 	"role.admin": {
 		"defaultMessage": "Administrator"
 	},
@@ -575,6 +608,9 @@
 	"stream.forward-host": {
 		"defaultMessage": "Forward Host"
 	},
+	"stream.forward-host.placeholder": {
+		"defaultMessage": "example.com or 10.0.0.1 or 2001:db8:3333:4444:5555:6666:7777:8888"
+	},
 	"stream.incoming-port": {
 		"defaultMessage": "Incoming Port"
 	},

frontend/src/locale/src/es.json

@@ -23,6 +23,9 @@
 	"access-list.public.subtitle": {
 		"defaultMessage": "No se requiere autenticación básica"
 	},
+	"access-list.rule-source.placeholder": {
+		"defaultMessage": "192.168.1.100 o 192.168.1.0/24 o 2001:0db8::/32"
+	},
 	"access-list.satisfy-any": {
 		"defaultMessage": "Satisfacer Cualquiera"
 	},
@@ -38,12 +41,18 @@
 	"action.add-location": {
 		"defaultMessage": "Añadir Ubicación"
 	},
+	"action.allow": {
+		"defaultMessage": "Permitir"
+	},
 	"action.close": {
 		"defaultMessage": "Cerrar"
 	},
 	"action.delete": {
 		"defaultMessage": "Eliminar"
 	},
+	"action.deny": {
+		"defaultMessage": "Denegar"
+	},
 	"action.disable": {
 		"defaultMessage": "Deshabilitar"
 	},
@@ -68,6 +77,9 @@
 	"auditlogs": {
 		"defaultMessage": "Registros de Auditoría"
 	},
+	"auto": {
+		"defaultMessage": "Auto"
+	},
 	"cancel": {
 		"defaultMessage": "Cancelar"
 	},
@@ -128,6 +140,9 @@
 	"certificates.dns.provider": {
 		"defaultMessage": "Proveedor DNS"
 	},
+	"certificates.dns.provider.placeholder": {
+		"defaultMessage": "Selecciona un Proveedor..."
+	},
 	"certificates.dns.warning": {
 		"defaultMessage": "Esta sección requiere algunos conocimientos sobre Certbot y sus plugins DNS. Consulta la documentación de los plugins respectivos."
 	},
@@ -348,7 +363,7 @@
 		"defaultMessage": "Soporte de Websockets"
 	},
 	"host.forward-port": {
-		"defaultMessage": "Puerto de Reenvío"
+		"defaultMessage": "Puerto"
 	},
 	"host.forward-scheme": {
 		"defaultMessage": "Esquema"
@@ -518,6 +533,24 @@
 	"redirection-hosts.count": {
 		"defaultMessage": "{count} {count, plural, one {Host de Redirección} other {Hosts de Redirección}}"
 	},
+	"redirection-hosts.http-code.300": {
+		"defaultMessage": "300 Multiples Opciones"
+	},
+	"redirection-hosts.http-code.301": {
+		"defaultMessage": "301 Movido permanentemente"
+	},
+	"redirection-hosts.http-code.302": {
+		"defaultMessage": "302 Movido temporalmente"
+	},
+	"redirection-hosts.http-code.303": {
+		"defaultMessage": "303 Ver otro"
+	},
+	"redirection-hosts.http-code.307": {
+		"defaultMessage": "307 Redirección temporal"
+	},
+	"redirection-hosts.http-code.308": {
+		"defaultMessage": "308 Redirección permanente"
+	},
 	"role.admin": {
 		"defaultMessage": "Administrador"
 	},
@@ -575,6 +608,9 @@
 	"stream.forward-host": {
 		"defaultMessage": "Host de Reenvío"
 	},
+	"stream.forward-host.placeholder": {
+		"defaultMessage": "example.com o 10.0.0.1 o 2001:db8:3333:4444:5555:6666:7777:8888"
+	},
 	"stream.incoming-port": {
 		"defaultMessage": "Puerto de Entrada"
 	},

frontend/src/modals/RedirectionHostModal.tsx

@@ -162,7 +162,7 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 																		required
 																		{...field}
 																	>
-																		<option value="auto">Auto</option>
+																		<option value="auto"><T id="auto" /></option>
 																		<option value="http">http</option>
 																		<option value="https">https</option>
 																	</select>
@@ -224,12 +224,12 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 																required
 																{...field}
 															>
-																<option value="300">300 Multiple choices</option>
-																<option value="301">301 Moved permanently</option>
-																<option value="302">302 Moved temporarily</option>
-																<option value="303">303 See other</option>
-																<option value="307">307 Temporary redirect</option>
-																<option value="308">308 Permanent redirect</option>
+																<option value="300"><T id="redirection-hosts.http-code.300" /></option>
+																<option value="301"><T id="redirection-hosts.http-code.301" /></option>
+																<option value="302"><T id="redirection-hosts.http-code.302" /></option>
+																<option value="303"><T id="redirection-hosts.http-code.303" /></option>
+																<option value="307"><T id="redirection-hosts.http-code.307" /></option>
+																<option value="308"><T id="redirection-hosts.http-code.308" /></option>
 															</select>
 															{form.errors.forwardHttpCode ? (
 																<div className="invalid-feedback">

frontend/src/modals/StreamModal.tsx

@@ -5,7 +5,7 @@ import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
 import { Button, Loading, SSLCertificateField, SSLOptionsFields } from "src/components";
 import { useSetStream, useStream } from "src/hooks";
-import { T } from "src/locale";
+import { intl, T } from "src/locale";
 import { validateNumber, validateString } from "src/modules/Validations";
 import { showObjectSuccess } from "src/notifications";
 
@@ -154,7 +154,7 @@ const StreamModal = EasyModal.create(({ id, visible, remove }: Props) => {
 																		type="text"
 																		className={`form-control ${form.errors.forwardingHost && form.touched.forwardingHost ? "is-invalid" : ""}`}
 																		required
-																		placeholder="example.com or 10.0.0.1 or 2001:db8:3333:4444:5555:6666:7777:8888"
+																		placeholder={intl.formatMessage({ id: "stream.forward-host.placeholder" })}
 																		{...field}
 																	/>
 																	{form.errors.forwardingHost ? (

frontend/src/pages/Login/index.tsx

@@ -103,7 +103,7 @@ export default function Login() {
 															required
 															maxLength={255}
 															className={`form-control ${form.errors.password && form.touched.password ? " is-invalid" : ""}`}
-															placeholder="Password"
+															placeholder={intl.formatMessage({ id: "password" })}
 														/>
 														<div className="invalid-feedback">{form.errors.password}</div>
 													</label>