Tidy up

- Add help docs for most sections
- Add translations documentation
- Fix up todos
- Remove german translation

frontend/src/locale/IntlProvider.tsx

@@ -1,5 +1,4 @@
 import { createIntl, createIntlCache } from "react-intl";
-import langDe from "./lang/de.json";
 import langEn from "./lang/en.json";
 import langFa from "./lang/fa.json";
 import langList from "./lang/lang-list.json";
@@ -9,15 +8,12 @@ import langList from "./lang/lang-list.json";
 // Remember when adding to this list, also update check-locales.js script
 const localeOptions = [
 	["en", "en-US"],
-	["de", "de-DE"],
 	["fa", "fa-IR"],
 ];
 
 const loadMessages = (locale?: string): typeof langList & typeof langEn => {
 	const thisLocale = locale || "en";
 	switch (thisLocale.slice(0, 2)) {
-		case "de":
-			return Object.assign({}, langList, langEn, langDe);
 		case "fa":
 			return Object.assign({}, langList, langEn, langFa);
 		default:
@@ -27,9 +23,6 @@ const loadMessages = (locale?: string): typeof langList & typeof langEn => {
 
 const getFlagCodeForLocale = (locale?: string) => {
 	switch (locale) {
-		case "de-DE":
-		case "de":
-			return "DE";
 		case "fa-IR":
 		case "fa":
 			return "IR";

frontend/src/locale/README.md

@@ -1,23 +1,48 @@
 # Internationalisation support
 
+## Before you start
+
+It's highly recommended that you spin up a development instance of this project
+on your docker capable server. It's pretty easy:
+
+```bash
+git clone https://github.com/NginxProxyManager/nginx-proxy-manager.git
+cd nginx-proxy-manager
+./scripts/start-dev -f
+```
+
+Then after a while, you can access http://yourserverip:3081
+
+This stack will watch the file system for changes, especially to language files,
+and reload the site you have open in the browser.
+
+
 ## Adding new translations
 
 Modify the files in the `src` folder. Follow the conventions already there.
 
+When the development stack is running, it will sort the locale lang files
+for you when you save.
+
 
 ## After making changes
 
-You will need to run `yarn locale-compile` in this frontend folder for
+If you're NOT running the development stack, you will need to run
+`yarn locale-compile` in the `frontend` folder for
 the new translations to be compiled into the `lang` folder.
 
-When running in dev mode, this should automatically happen within Vite.
+
+## Adding a whole new language
+
+There's a fair bit you'll need to touch. Here's a list that may
+not be complete by the time you're reading this:
+
+- frontend/src/locale/src/[yourlang].json
+- frontend/src/locale/src/lang-list.json
+- frontend/src/locale/src/HelpDoc/*
+- frontend/src/locale/IntlProvider.tsx
 
 
-## Checking for missing translations in other languages
+## Checking for missing translations in languages
 
 Run `node check-locales.cjs` in this frontend folder.
-
-
-## Adding new languages
-
-todo

frontend/src/locale/lang/de.json

@@ -1,3 +0,0 @@
-{
-  "dashboard": "Armaturenbrett"
-}

frontend/src/locale/lang/en.json

@@ -100,7 +100,11 @@
   "error.invalid-auth": "Invalid email or password",
   "error.invalid-domain": "Invalid domain: {domain}",
   "error.invalid-email": "Invalid email address",
+  "error.max-character-length": "Maximum length is {max} character{max, plural, one {} other {s}}",
   "error.max-domains": "Too many domains, max is {max}",
+  "error.maximum": "Maximum is {max}",
+  "error.min-character-length": "Minimum length is {min} character{min, plural, one {} other {s}}",
+  "error.minimum": "Minimum is {min}",
   "error.passwords-must-match": "Passwords must match",
   "error.required": "This is required",
   "expires.on": "Expires: {date}",

frontend/src/locale/src/HelpDoc/en/AccessLists.md

@@ -0,0 +1,7 @@
+## What is an Access List?
+
+Access Lists provide a blacklist or whitelist of specific client IP addresses along with authentication for the Proxy Hosts via Basic HTTP Authentication.
+
+You can configure multiple client rules, usernames and passwords for a single Access List and then apply that to one or more _Proxy Hosts_.
+
+This is most useful for forwarded web services that do not have authentication mechanisms built in or when you want to protect from unknown clients.

frontend/src/locale/src/HelpDoc/en/Certificates.md

@@ -0,0 +1,32 @@
+## Certificates Help
+
+### HTTP Certificate
+
+A HTTP validated certificate means Let's Encrypt servers will
+attempt to reach your domains over HTTP (not HTTPS!) and if successful, they
+will issue your certificate.
+
+For this method, you will have to have a _Proxy Host_ created for your domains(s) that
+is accessible with HTTP and pointing to this Nginx installation. After a certificate
+has been given, you can modify the _Proxy Host_ to also use this certificate for HTTPS
+connections. However, the _Proxy Host_ will still need to be configured for HTTP access
+in order for the certificate to renew.
+
+This process _does not_ support wildcard domains.
+
+### DNS Certificate
+
+A DNS validated certificate requires you to use a DNS Provider plugin. This DNS
+Provider will be used to create temporary records on your domain and then Let's
+Encrypt will query those records to be sure you're the owner and if successful, they
+will issue your certificate.
+
+You do not need a _Proxy Host_ to be created prior to requesting this type of
+certificate. Nor do you need to have your _Proxy Host_ configured for HTTP access.
+
+This process _does_ support wildcard domains.
+
+### Custom Certificate
+
+Use this option to upload your own SSL Certificate, as provided by your own
+Certificate Authority.

frontend/src/locale/src/HelpDoc/en/DeadHosts.md

@@ -0,0 +1,10 @@
+## What is a 404 Host?
+
+A 404 Host is simply a host setup that shows a 404 page.
+
+This can be useful when your domain is listed in search engines and you want
+to provide a nicer error page or specifically to tell the search indexers that
+the domain pages no longer exist.
+
+Another benefit of having this host is to track the logs for hits to it and
+view the referrers.

frontend/src/locale/src/HelpDoc/en/ProxyHosts.md

@@ -0,0 +1,7 @@
+## What is a Proxy Host?
+
+A Proxy Host is the incoming endpoint for a web service that you want to forward.
+
+It provides optional SSL termination for your service that might not have SSL support built in.
+
+Proxy Hosts are the most common use for the Nginx Proxy Manager.

frontend/src/locale/src/HelpDoc/en/RedirectionHosts.md

@@ -0,0 +1,7 @@
+## What is a Redirection Host?
+
+A Redirection Host will redirect requests from the incoming domain and push the
+viewer to another domain.
+
+The most common reason to use this type of host is when your website changes
+domains but you still have search engine or referrer links pointing to the old domain.

frontend/src/locale/src/HelpDoc/en/Streams.md

@@ -0,0 +1,6 @@
+## What is a Stream?
+
+A relatively new feature for Nginx, a Stream will serve to forward TCP/UDP
+traffic directly to another computer on the network.
+
+If you're running game servers, FTP or SSH servers this can come in handy.

frontend/src/locale/src/HelpDoc/en/index.ts

@@ -0,0 +1,6 @@
+export * as AccessLists from "./AccessLists.md";
+export * as Certificates from "./Certificates.md";
+export * as DeadHosts from "./DeadHosts.md";
+export * as ProxyHosts from "./ProxyHosts.md";
+export * as RedirectionHosts from "./RedirectionHosts.md";
+export * as Streams from "./Streams.md";

frontend/src/locale/src/HelpDoc/index.ts

@@ -0,0 +1,20 @@
+// import * as de from "./de/index";
+// import * as fa from "./fa/index";
+import * as en from "./en/index";
+
+const items: any = { en };
+
+const fallbackLang = "en";
+
+export const getHelpFile = (lang: string, section: string): string => {
+	if (typeof items[lang] !== "undefined" && typeof items[lang][section] !== "undefined") {
+		return items[lang][section].default;
+	}
+	// Fallback to English
+	if (typeof items[fallbackLang] !== "undefined" && typeof items[fallbackLang][section] !== "undefined") {
+		return items[fallbackLang][section].default;
+	}
+	throw new Error(`Cannot load help doc for ${lang}-${section}`);
+};
+
+export default items;

frontend/src/locale/src/de.json

@@ -1,5 +0,0 @@
-{
-	"dashboard": {
-		"defaultMessage": "Armaturenbrett"
-	}
-}

frontend/src/locale/src/en.json

@@ -302,9 +302,21 @@
 	"error.invalid-email": {
 		"defaultMessage": "Invalid email address"
 	},
+	"error.max-character-length": {
+		"defaultMessage": "Maximum length is {max} character{max, plural, one {} other {s}}"
+	},
 	"error.max-domains": {
 		"defaultMessage": "Too many domains, max is {max}"
 	},
+	"error.maximum": {
+		"defaultMessage": "Maximum is {max}"
+	},
+	"error.min-character-length": {
+		"defaultMessage": "Minimum length is {min} character{min, plural, one {} other {s}}"
+	},
+	"error.minimum": {
+		"defaultMessage": "Minimum is {min}"
+	},
 	"error.passwords-must-match": {
 		"defaultMessage": "Passwords must match"
 	},