From 8fcae3cda4c3520bc858a77feb4fae50460d2c12 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 31 Oct 2021 15:09:37 +0100
Subject: [PATCH 1/5] feat: add option for default registries when
 `SINGLE_REGISTRY=false`

---
 src/components/dialogs/add-registry-url.riot  |  6 ++--
 .../dialogs/change-registry-url.riot          |  5 ++--
 .../dialogs/remove-registry-url.riot          |  6 ++--
 src/components/docker-registry-ui.riot        |  7 ++++-
 src/index.html                                |  3 +-
 src/scripts/utils.js                          | 30 +++++++++++++++++--
 6 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/dialogs/add-registry-url.riot b/src/components/dialogs/add-registry-url.riot
index 620da6e8..10b1804f 100644
--- a/src/components/dialogs/add-registry-url.riot
+++ b/src/components/dialogs/add-registry-url.riot
@@ -32,7 +32,7 @@
   </material-popup>
   <script>
     import {
-      getRegistryServers
+      addRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
 
@@ -51,9 +51,7 @@
         if (!input.value.startsWith('http')) {
           return this.props.onNotify('The input field should start with http:// or https://.', true);
         }
-        const url = input.value.trim().replace(/\/*$/, '');
-        const registryServer = getRegistryServers().filter(e => e !== url);
-        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
+        const url = addRegistryServers(input.value);
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()
diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot
index e52ff9c4..9aac35bc 100644
--- a/src/components/dialogs/change-registry-url.riot
+++ b/src/components/dialogs/change-registry-url.riot
@@ -33,6 +33,7 @@
   </material-popup>
   <script>
     import {
+      addRegistryServers,
       getRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
@@ -45,9 +46,7 @@
         if (!select.value.startsWith('http')) {
           return this.props.onNotify('The select field should start with http:// or https://.', true);
         }
-        const url = select.value.trim().replace(/\/*$/, '');
-        const registryServer = getRegistryServers().filter(e => e !== url);
-        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
+        const url = addRegistryServers(select.value);
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()
diff --git a/src/components/dialogs/remove-registry-url.riot b/src/components/dialogs/remove-registry-url.riot
index ca188f15..8bfbad19 100644
--- a/src/components/dialogs/remove-registry-url.riot
+++ b/src/components/dialogs/remove-registry-url.riot
@@ -38,13 +38,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </material-popup>
   <script>
     import {
-      getRegistryServers
+      getRegistryServers,
+      removeRegistryServers
     } from '../../scripts/utils';
     export default {
       remove(event) {
         const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;
-        const registryServer = getRegistryServers().filter(e => e !== url);
-        localStorage.setItem('registryServer', JSON.stringify(registryServer));
+        removeRegistryServers(url);
         setTimeout(() => this.update(), 100);
       },
       getRegistryServers
diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot
index 81170978..917042b7 100644
--- a/src/components/docker-registry-ui.riot
+++ b/src/components/docker-registry-ui.riot
@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="logo">Docker Registry UI</div>
       <search-bar on-search="{ onSearch }"></search-bar>
       <dialogs-menu if="{props.singleRegistry !== 'true'}" on-notify="{ notifySnackbar }"
-        on-server-change="{ onServerChange }"></dialogs-menu>
+        on-server-change="{ onServerChange }" default-registries="{ props.defaultRegistries }"></dialogs-menu>
     </material-navbar>
   </header>
   <main>
@@ -77,6 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import {
       stripHttps,
       getRegistryServers,
+      setRegistryServers,
       truthy
     } from '../scripts/utils';
     import router from '../scripts/router';
@@ -96,6 +97,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         state.snackbarMessage = undefined;
       },
       onBeforeMount(props) {
+        if (props.defaultRegistries && props.defaultRegistries.length > 0) {
+          setRegistryServers(props.defaultRegistries);
+        }
+
         // props.singleRegistry === 'true' means old static version 
         const registryUrl = props.registryUrl ||
           (props.singleRegistry === 'true' ? undefined : (router.getUrlQueryParam() || getRegistryServers(0))) ||
diff --git a/src/index.html b/src/index.html
index 2fda90bf..0ceff62f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -37,7 +37,8 @@
   <!-- build:keep production -->
   <docker-registry-ui registry-url="${REGISTRY_URL}" name="${REGISTRY_TITLE}" pull-url="${PULL_URL}"
     show-content-digest="${SHOW_CONTENT_DIGEST}" is-image-remove-activated="${DELETE_IMAGES}"
-    catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}" single-registry="${SINGLE_REGISTRY}">
+    catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}" single-registry="${SINGLE_REGISTRY}"
+    default-registries="${DEFAULT_REGISTRIES}">
   </docker-registry-ui>
   <!-- endbuild -->
   <!-- build:keep developement -->
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index e567e474..ac820900 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -1,3 +1,5 @@
+const LOCAL_STORAGE_KEY = 'registryServer';
+
 export function bytesToSize(bytes) {
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == undefined || isNaN(bytes)) {
@@ -152,7 +154,7 @@ export const ERROR_CAN_NOT_READ_CONTENT_DIGEST = {
 
 export function getRegistryServers(i) {
   try {
-    const res = JSON.parse(localStorage.getItem('registryServer'));
+    const res = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
     if (res instanceof Array) {
       return !isNaN(i) ? res[i] : res.map((url) => url.trim().replace(/\/*$/, ''));
     }
@@ -160,6 +162,28 @@ export function getRegistryServers(i) {
   return !isNaN(i) ? '' : [];
 }
 
+export function setRegistryServers(registries) {
+  if (typeof registries === 'string') {
+    registries = registries.split(',');
+  } else if (!Array.isArray(registries)) {
+    throw new Error('setRegistries must be called with string or array parameter');
+  }
+  registries = registries.map((registry) => registry.replace(/\/*$/, ''));
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(registries));
+}
+
+export function addRegistryServers(registry) {
+  const url = registry.trim().replace(/\/*$/, '');
+  const registryServer = getRegistryServers().filter((e) => e !== url);
+  setRegistryServers([url].concat(registryServer));
+  return url;
+}
+
+export function removeRegistryServers(registry) {
+  const registryServers = getRegistryServers().filter((e) => e !== registry);
+  setRegistryServers(registryServers);
+}
+
 export function encodeURI(url) {
   if (!url) {
     return;
@@ -175,5 +199,5 @@ export function decodeURI(url) {
 }
 
 export function truthy(value) {
-  return value === true || value === "true";
-}
\ No newline at end of file
+  return value === true || value === 'true';
+}

From dd26bf66a227a5528a16ad03c3f7e8f6ce7a4a0f Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 1 Nov 2021 10:55:55 +0100
Subject: [PATCH 2/5] feat: default registries is set only when there is no
 registries

---
 src/components/docker-registry-ui.riot | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot
index 917042b7..c191d09c 100644
--- a/src/components/docker-registry-ui.riot
+++ b/src/components/docker-registry-ui.riot
@@ -97,7 +97,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         state.snackbarMessage = undefined;
       },
       onBeforeMount(props) {
-        if (props.defaultRegistries && props.defaultRegistries.length > 0) {
+        if (props.defaultRegistries && props.defaultRegistries.length > 0 && getRegistryServers().length === 0) {
           setRegistryServers(props.defaultRegistries);
         }
 

From 992328eae9006335c735e6e563361e442fcf4597 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Tue, 2 Nov 2021 22:51:32 +0100
Subject: [PATCH 3/5] fix: should update the catalog when the server is changed

---
 src/components/catalog/catalog.riot | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/catalog/catalog.riot b/src/components/catalog/catalog.riot
index c20553c6..8cd1d9db 100644
--- a/src/components/catalog/catalog.riot
+++ b/src/components/catalog/catalog.riot
@@ -26,12 +26,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div if="{ !state.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
-  <catalog-element each="{ item in state.repositories }" item="{ item }" filter-results="{ props.filterResults }"/>
+  <catalog-element each="{ item in state.repositories }" item="{ item }" filter-results="{ props.filterResults }" />
   <script>
     import CatalogElement from './catalog-element.riot'
     import {
       Http
     } from '../../scripts/http';
+    import {
+      getRegistryServers
+    } from '../../scripts/utils';
 
     export default {
       components: {
@@ -41,18 +44,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         registryName: '',
         length: 0,
         loadend: false,
-        repositories: []
+        repositories: [],
+        registryUrl: ''
       },
 
       onBeforeMount(props) {
         this.state.registryName = props.registryName;
         this.state.catalogElementsLimit = props.catalogElementsLimit;
       },
-      onMounted(props) {
-        this.display(props, this.state)
+      onMounted(props, state) {
+        this.display(props, state)
+      },
+      onUpdated(props, state) {
+        this.display(props, state);
       },
-
       display(props, state) {
+        if (props.registryUrl === state.registryUrl) {
+          return;
+        }
+        state.registryUrl = props.registryUrl;
         let repositories = [];
         const self = this;
         const oReq = new Http({

From b323dc6c049f81854deacc58cacdf94324b8f2e8 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 4 Nov 2021 00:48:33 +0100
Subject: [PATCH 4/5] feat: add new option `READ_ONLY_REGISTRIES` available
 when `SINGLE_REGISTRY=false`

---
 bin/entrypoint                           |  2 ++
 src/components/dialogs/dialogs-menu.riot | 15 +++++++++------
 src/components/docker-registry-ui.riot   |  6 ++++--
 src/index.html                           |  2 +-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/bin/entrypoint b/bin/entrypoint
index 13eb78d8..ba003911 100755
--- a/bin/entrypoint
+++ b/bin/entrypoint
@@ -6,6 +6,8 @@ sed -i "s,\${PULL_URL},${PULL_URL}," index.html
 sed -i "s,\${SINGLE_REGISTRY},${SINGLE_REGISTRY}," index.html
 sed -i "s/\${CATALOG_ELEMENTS_LIMIT}/${CATALOG_ELEMENTS_LIMIT}/" index.html
 sed -i "s/\${SHOW_CONTENT_DIGEST}/${SHOW_CONTENT_DIGEST}/" index.html
+sed -i "s/\${DEFAULT_REGISTRIES}/${DEFAULT_REGISTRIES}/" index.html
+sed -i "s/\${READ_ONLY_REGISTRIES}/${READ_ONLY_REGISTRIES}/" index.html
 
 if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then
   sed -i "s/\${DELETE_IMAGES}/false/" index.html
diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot
index ffbc6ddd..c560f542 100644
--- a/src/components/dialogs/dialogs-menu.riot
+++ b/src/components/dialogs/dialogs-menu.riot
@@ -15,17 +15,17 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <dialogs-menu>
-  <add-registry-url opened="{ state['add-registry-url'] }" on-close="{ onClose('add-registry-url') }"
+  <add-registry-url if="{ !props.readOnlyRegistries }" opened="{ state['add-registry-url'] }" on-close="{ onClose('add-registry-url') }"
     on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></add-registry-url>
   <change-registry-url opened="{ state['change-registry-url'] }" on-close="{ onClose('change-registry-url') }"
     on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></change-registry-url>
-  <remove-registry-url opened="{ state['remove-registry-url'] }" on-close="{ onClose('remove-registry-url') }"
+  <remove-registry-url if="{ !props.readOnlyRegistries }" opened="{ state['remove-registry-url'] }" on-close="{ onClose('remove-registry-url') }"
     on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></remove-registry-url>
   <div class="container">
     <material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
       <i class="material-icons">more_vert</i>
     </material-button>
-    <material-dropdown-list items="{ dropdownItems }" onSelect="{ onDropdownSelect }"
+    <material-dropdown-list items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }" onSelect="{ onDropdownSelect }"
       opened="{ state.isDropdownOpened }" />
   </div>
   <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
@@ -42,13 +42,16 @@
       },
       dropdownItems: [{
         title: 'Add URL',
-        name: 'add-registry-url'
+        name: 'add-registry-url',
+        ro: false
       }, {
         title: 'Change URL',
-        name: 'change-registry-url'
+        name: 'change-registry-url',
+        ro: true
       }, {
         title: 'Remove URL',
-        name: 'remove-registry-url'
+        name: 'remove-registry-url',
+        ro: false
       }],
       onDropdownSelect(key, item) {
         this.update({
diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot
index c191d09c..66da81c3 100644
--- a/src/components/docker-registry-ui.riot
+++ b/src/components/docker-registry-ui.riot
@@ -20,7 +20,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="logo">Docker Registry UI</div>
       <search-bar on-search="{ onSearch }"></search-bar>
       <dialogs-menu if="{props.singleRegistry !== 'true'}" on-notify="{ notifySnackbar }"
-        on-server-change="{ onServerChange }" default-registries="{ props.defaultRegistries }"></dialogs-menu>
+        on-server-change="{ onServerChange }" default-registries="{ props.defaultRegistries }"
+        read-only-registries="{ truthy(props.readOnlyRegistries) }"></dialogs-menu>
     </material-navbar>
   </header>
   <main>
@@ -97,7 +98,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         state.snackbarMessage = undefined;
       },
       onBeforeMount(props) {
-        if (props.defaultRegistries && props.defaultRegistries.length > 0 && getRegistryServers().length === 0) {
+        if ((props.defaultRegistries && props.defaultRegistries.length > 0 && getRegistryServers().length === 0) ||
+          truthy(props.readOnlyRegistries)) {
           setRegistryServers(props.defaultRegistries);
         }
 
diff --git a/src/index.html b/src/index.html
index 0ceff62f..e647d121 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@
   <docker-registry-ui registry-url="${REGISTRY_URL}" name="${REGISTRY_TITLE}" pull-url="${PULL_URL}"
     show-content-digest="${SHOW_CONTENT_DIGEST}" is-image-remove-activated="${DELETE_IMAGES}"
     catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}" single-registry="${SINGLE_REGISTRY}"
-    default-registries="${DEFAULT_REGISTRIES}">
+    default-registries="${DEFAULT_REGISTRIES}" read-only-registries="${READ_ONLY_REGISTRIES}">
   </docker-registry-ui>
   <!-- endbuild -->
   <!-- build:keep developement -->

From 29c17b1baa5c9ad75b1328cc4cc757f34e4d6dd6 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Fri, 5 Nov 2021 22:39:19 +0100
Subject: [PATCH 5/5] docs: add documentation + example for DEFAULT_REGISTRIES
 and READ_ONLY_REGISTRIES

---
 README.md                          |  7 +++++-
 bin/entrypoint                     | 16 ++++++------
 examples/README.md                 |  3 ++-
 examples/pr-219/README.md          | 14 +++++++++++
 examples/pr-219/docker-compose.yml | 39 ++++++++++++++++++++++++++++++
 5 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 examples/pr-219/README.md
 create mode 100644 examples/pr-219/docker-compose.yml

diff --git a/README.md b/README.md
index 4c3a3059..767b35be 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,8 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
 -   Show/Hide content digest in taglist via `SHOW_CONTENT_DIGEST` (values are: [`true`, `false`], default: `false`) (see [#126](https://github.com/Joxit/docker-registry-ui/issues/126)).
 -   Limit the number of elements in the image list via `CATALOG_ELEMENTS_LIMIT` (see [#127](https://github.com/Joxit/docker-registry-ui/pull/127)).
 -   Multi arch support in history page (see [#130](https://github.com/Joxit/docker-registry-ui/issues/130) and [#134](https://github.com/Joxit/docker-registry-ui/pull/134))
+-   Set a list of default registries with `DEFAULT_REGISTRIES` (see [#219](https://github.com/Joxit/docker-registry-ui/pull/219)).
+-   Desactivate add and remove regisitries with `READ_ONLY_REGISTRIES` (see [#219](https://github.com/Joxit/docker-registry-ui/pull/219)).
 
 ## FAQ
 
@@ -85,9 +87,11 @@ Some env options are available for use this interface for **only one server**.
 - `DELETE_IMAGES`: Set if we can delete images from the UI. (default: `false`)
 - `SHOW_CONTENT_DIGEST`: Show content digest in docker tag list. (default: `false`)
 - `CATALOG_ELEMENTS_LIMIT`: Limit the number of elements in the catalog page. (default: `100000`).
-- `SINGLE_REGISTRY`: Remove the menu that show the dialogs to add, remove and change the endpoint of your docker registry. (default `false`)
+- `SINGLE_REGISTRY`: Remove the menu that show the dialogs to add, remove and change the endpoint of your docker registry. (default: `false`).
 - `NGINX_PROXY_PASS_URL`: Update the default Nginx configuration and set the **proxy_pass** to your backend docker registry (this avoid CORS configuration). This is usually the name of your registry container in the form `http://registry:5000`.
 - `NGINX_PROXY_HEADER_*`: Update the default Nginx configuration and set **custom headers** for your backend docker registry. Only when `NGINX_PROXY_PASS_URL` is used.
+- `DEFAULT_REGISTRIES`: List of comma separated registry URLs (e.g `http://registry.example.com,http://registry:5000`), available only when `SINGLE_REGISTRY=false`. (default: ` `).
+- `READ_ONLY_REGISTRIES`: Desactivate dialog for remove and add new registries, available only when `SINGLE_REGISTRY=false`. (default: `false`).
 
 There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-standalone/).
 
@@ -182,3 +186,4 @@ check out the [Electron](examples/electron/README.md) standalone application.
 - [UI showing same sha256 content digest for all tags + Delete is not working](https://github.com/Joxit/docker-registry-ui/tree/main/examples/issue-116) ([#116](https://github.com/Joxit/docker-registry-ui/issues/116))
 - [Electron-based Standalone Application](https://github.com/Joxit/docker-registry-ui/tree/main/examples/electron) ([#129](https://github.com/Joxit/docker-registry-ui/pull/129))
 - [Use docker-registry-ui as proxy with read-only right](https://github.com/Joxit/docker-registry-ui/tree/main/examples/read-only-auth) ([#47](https://github.com/Joxit/docker-registry-ui/issues/47))
+- [Use DEFAULT_REGISTRIES and READ_ONLY_REGISTRIES](https://github.com/Joxit/docker-registry-ui/tree/main/examples/pr-219) ([#219](https://github.com/Joxit/docker-registry-ui/issues/219))
diff --git a/bin/entrypoint b/bin/entrypoint
index ba003911..1cb40e5a 100755
--- a/bin/entrypoint
+++ b/bin/entrypoint
@@ -1,13 +1,13 @@
 #!/bin/sh
 
-sed -i "s,\${REGISTRY_URL},${REGISTRY_URL}," index.html
-sed -i "s,\${REGISTRY_TITLE},${REGISTRY_TITLE}," index.html
-sed -i "s,\${PULL_URL},${PULL_URL}," index.html
-sed -i "s,\${SINGLE_REGISTRY},${SINGLE_REGISTRY}," index.html
-sed -i "s/\${CATALOG_ELEMENTS_LIMIT}/${CATALOG_ELEMENTS_LIMIT}/" index.html
-sed -i "s/\${SHOW_CONTENT_DIGEST}/${SHOW_CONTENT_DIGEST}/" index.html
-sed -i "s/\${DEFAULT_REGISTRIES}/${DEFAULT_REGISTRIES}/" index.html
-sed -i "s/\${READ_ONLY_REGISTRIES}/${READ_ONLY_REGISTRIES}/" index.html
+sed -i "s~\${REGISTRY_URL}~${REGISTRY_URL}~" index.html
+sed -i "s~\${REGISTRY_TITLE}~${REGISTRY_TITLE}~" index.html
+sed -i "s~\${PULL_URL}~${PULL_URL}~" index.html
+sed -i "s~\${SINGLE_REGISTRY}~${SINGLE_REGISTRY}~" index.html
+sed -i "s~\${CATALOG_ELEMENTS_LIMIT}~${CATALOG_ELEMENTS_LIMIT}~" index.html
+sed -i "s~\${SHOW_CONTENT_DIGEST}~${SHOW_CONTENT_DIGEST}~" index.html
+sed -i "s~\${DEFAULT_REGISTRIES}~${DEFAULT_REGISTRIES}~" index.html
+sed -i "s~\${READ_ONLY_REGISTRIES}~${READ_ONLY_REGISTRIES}~" index.html
 
 if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then
   sed -i "s/\${DELETE_IMAGES}/false/" index.html
diff --git a/examples/README.md b/examples/README.md
index 1439e1cd..197cfad7 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -10,4 +10,5 @@
 - [Add custom headers bases on environment variable and/or file when the ui is used as proxy](https://github.com/Joxit/docker-registry-ui/tree/main/examples/proxy-headers) ([#89](https://github.com/Joxit/docker-registry-ui/pull/89))
 - [UI showing same sha256 content digest for all tags + Delete is not working](https://github.com/Joxit/docker-registry-ui/tree/main/examples/issue-116) ([#116](https://github.com/Joxit/docker-registry-ui/issues/116))
 - [Electron-based Standalone Application](https://github.com/Joxit/docker-registry-ui/tree/main/examples/electron) ([#129](https://github.com/Joxit/docker-registry-ui/pull/129))
-- [Use docker-registry-ui as proxy with read-only right](https://github.com/Joxit/docker-registry-ui/tree/main/examples/read-only-auth) ([#47](https://github.com/Joxit/docker-registry-ui/issues/47))
\ No newline at end of file
+- [Use docker-registry-ui as proxy with read-only right](https://github.com/Joxit/docker-registry-ui/tree/main/examples/read-only-auth) ([#47](https://github.com/Joxit/docker-registry-ui/issues/47))
+- [Use DEFAULT_REGISTRIES and READ_ONLY_REGISTRIES](https://github.com/Joxit/docker-registry-ui/tree/main/examples/pr-219) ([#219](https://github.com/Joxit/docker-registry-ui/issues/219))
\ No newline at end of file
diff --git a/examples/pr-219/README.md b/examples/pr-219/README.md
new file mode 100644
index 00000000..9acc51c9
--- /dev/null
+++ b/examples/pr-219/README.md
@@ -0,0 +1,14 @@
+# Example for pull request #219
+
+Basic usage for `DEFAULT_REGISTRIES` and `READ_ONLY_REGISTRIES`.
+
+Behaviors: 
+- `DEFAULT_REGISTRIES`:
+    - will set the list of registries in the localstorage when the localstorage is empty.
+    - will overwrite the list of registries every time when  `READ_ONLY_REGISTRIES=true`
+- `READ_ONLY_REGISTRIES`:
+    - will remove dialog for Add and Remove registries
+
+These options works only when `SINGLE_REGISTRY=false`
+
+See [#219](https://github.com/Joxit/docker-registry-ui/pull/219)
\ No newline at end of file
diff --git a/examples/pr-219/docker-compose.yml b/examples/pr-219/docker-compose.yml
new file mode 100644
index 00000000..4812a001
--- /dev/null
+++ b/examples/pr-219/docker-compose.yml
@@ -0,0 +1,39 @@
+version: '2'
+
+services:
+  registry_1:
+    image: registry:latest
+    restart: always
+    ports:
+    - 5000:5000
+    container_name: registry_1
+    environment:
+      REGISTRY_HTTP_HEADERS_Access-Control-Allow-Origin: "['*']"
+      REGISTRY_STORAGE_DELETE_ENABLED: 'true'
+    volumes:
+      - ./data:/var/lib/registry
+
+  registry_2:
+    image: registry:latest
+    restart: always
+    ports:
+    - 5001:5000
+    container_name: registry_2
+    environment:
+      REGISTRY_HTTP_HEADERS_Access-Control-Allow-Origin: "['*']"
+      REGISTRY_STORAGE_DELETE_ENABLED: 'true'
+    volumes:
+      - ./data:/var/lib/registry
+
+  ui:
+    image: joxit/docker-registry-ui:latest
+    restart: always
+    container_name: registry-ui
+    environment:
+      - REGISTRY_TITLE=Private Docker Registry
+      - DEFAULT_REGISTRIES=http://localhost:5000,http://localhost:5001
+      - DELETE_IMAGES=true
+      - READ_ONLY_REGISTRIES=true
+      - SINGLE_REGISTRY=false
+    ports:
+      - 80:80
\ No newline at end of file