Auth view: merge register forms in one with js switch

views/auth/auth.njk

@@ -16,7 +16,7 @@
         {% endif %}
 
         <section class="panel">
-            <h2>Log in</h2>
+            <h2><i data-feather="log-in"></i> Log in</h2>
 
             <form action="{{ route('login') + queryStr }}" method="POST" id="login-form">
                 {{ macros.field(_locals, 'text', 'identifier', query.identifier or '', 'Your email address or username', null, 'required') }}
@@ -32,7 +32,7 @@
         </section>
 
         <section class="panel">
-            <h2>Register with email</h2>
+            <h2><i data-feather="user-plus"></i> Register</h2>
 
             <form action="{{ route('register') + queryStr }}" method="POST" id="register-form">
                 <input type="hidden" name="auth_method" value="magic_link">
@@ -42,38 +42,69 @@
                     {{ macros.field(_locals, 'text', 'name', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
                 {% endif %}
 
+                <div id="register-magic_link_method_fields">
                     {{ macros.field(_locals, 'email', 'identifier', null, 'Your email address', null, 'required') }}
+                    <a href="javascript: void(0);">Use password instead</a>
+                </div>
+
+                <div id="register-password_method_fields" class="hidden">
+                    {{ macros.field(_locals, 'password', 'password', null, 'Choose a password', null, 'required disabled') }}
+                    {{ macros.field(_locals, 'password', 'password_confirmation', null, 'Confirm your password', null, 'required disabled') }}
+                    <a href="javascript: void(0);">Use email address instead</a>
+                </div>
 
                 {{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.' | safe, null, 'required') }}
 
                 <button type="submit" class="primary">Register</button>
             </form>
         </section>
-
-        {% if register_with_password %}
-            <section class="panel">
-                <h2>Register with password</h2>
-
-                <form action="{{ route('register') + queryStr }}" method="POST" id="register-form">
-                    <input type="hidden" name="auth_method" value="password">
-                    {{ macros.csrf(getCsrfToken) }}
-
-                    <section class="sub-panel">
-                        <h3>Username</h3>
-                        {{ macros.field(_locals, 'text', 'identifier', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
-                    </section>
-
-                    <section class="sub-panel">
-                        <h3>Password</h3>
-                        {{ macros.field(_locals, 'password', 'password', null, 'Choose a password', null, 'required') }}
-                        {{ macros.field(_locals, 'password', 'password_confirmation', null, 'Confirm your password', null, 'required') }}
-                    </section>
-
-                    {{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.' | safe, null, 'required') }}
-
-                    <button type="submit" class="primary">Register</button>
-                </form>
-            </section>
-        {% endif %}
     </div>
 {% endblock %}
+
+{% block scripts %}
+    <script>
+        // Register form dynamics
+        document.addEventListener('DOMContentLoaded', () => {
+            const form = document.getElementById('register-form');
+            const authMethodField = form.querySelector('input[name=auth_method]');
+            const usernameField = form.querySelector('input[name=name]');
+            const magicLinkFields = document.getElementById('register-magic_link_method_fields');
+            const passwordFields = document.getElementById('register-password_method_fields');
+
+            let switchToPassword;
+            magicLinkFields.querySelector('a').addEventListener('click', switchToPassword = () => {
+                authMethodField.value = 'password';
+                usernameField.name = 'identifier';
+
+                magicLinkFields.classList.add('hidden');
+                magicLinkFields.querySelectorAll('input').forEach(el => {
+                    el.disabled = true;
+                });
+
+                passwordFields.classList.remove('hidden');
+                passwordFields.querySelectorAll('input').forEach(el => {
+                    el.disabled = false;
+                });
+            });
+
+            passwordFields.querySelector('a').addEventListener('click', () => {
+                authMethodField.value = 'magic_link';
+                usernameField.name = 'name';
+
+                magicLinkFields.classList.remove('hidden');
+                magicLinkFields.querySelectorAll('input').forEach(el => {
+                    el.disabled = false;
+                });
+
+                passwordFields.classList.add('hidden');
+                passwordFields.querySelectorAll('input').forEach(el => {
+                    el.disabled = true;
+                });
+            });
+
+            if (`{{ _locals.previousFormData()['auth_method'] | default('') }}` === 'password') {
+                switchToPassword();
+            }
+        });
+    </script>
+{% endblock %}