2 files changed, 54 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/packs/admin.js b/app/javascript/flavours/glitch/packs/admin.js
new file mode 100644
index 000000000..b26df932c
--- /dev/null
+++ b/app/javascript/flavours/glitch/packs/admin.js
@@ -0,0 +1,48 @@
+import 'packs/public-path';
+import loadPolyfills from 'flavours/glitch/util/load_polyfills';
+import ready from 'flavours/glitch/util/ready';
+import loadKeyboardExtensions from 'flavours/glitch/util/load_keyboard_extensions';
+
+function main() {
+  const { delegate } = require('@rails/ujs');
+
+  ready(() => {
+    const React    = require('react');
+    const ReactDOM = require('react-dom');
+
+    [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
+      const componentName  = element.getAttribute('data-admin-component');
+      const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
+
+      import('flavours/glitch/containers/admin_component').then(({ default: AdminComponent }) => {
+        return import('flavours/glitch/components/admin/' + componentName).then(({ default: Component }) => {
+          ReactDOM.render((
+            <AdminComponent locale={locale}>
+              <Component {...componentProps} />
+            </AdminComponent>
+          ), element);
+        });
+      }).catch(error => {
+        console.error(error);
+      });
+    });
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'click', () => {
+    const target = document.querySelector('.sidebar ul');
+
+    if (target.style.display === 'block') {
+      target.style.display = 'none';
+    } else {
+      target.style.display = 'block';
+    }
+  });
+}
+
+loadPolyfills()
+  .then(main)
+  .then(loadKeyboardExtensions)
+  .catch(error => {
+    console.error(error);
+
+  });
diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index dccdbc8d0..a92f3d5a8 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -99,7 +99,9 @@ function main() {
     delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => {
       const password = document.getElementById('registration_user_password');
       const confirmation = document.getElementById('registration_user_password_confirmation');
-      if (password.value && password.value !== confirmation.value) {
+      if (confirmation.value && confirmation.value.length > password.maxLength) {
+        confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format());
+      } else if (password.value && password.value !== confirmation.value) {
         confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format());
       } else {
         confirmation.setCustomValidity('');
@@ -111,7 +113,9 @@ function main() {
       const confirmation = document.getElementById('user_password_confirmation');
       if (!confirmation) return;
 
-      if (password.value && password.value !== confirmation.value) {
+      if (confirmation.value && confirmation.value.length > password.maxLength) {
+        confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format());
+      } else if (password.value && password.value !== confirmation.value) {
         confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format());
       } else {
         confirmation.setCustomValidity('');