<section class="panel"> <h2><i data-feather="key"></i> {% if has_password %}Change{% else %}Set{% endif %} password</h2> <form action="{{ route('change-password') }}" method="POST" id="change-password-form"> {% if has_password %} {{ macros.field(_locals, 'password', 'current_password', null, 'Current password') }} <p><a href="javascript: void(0);" class="switch-form-link">Forgot your password?</a></p> {% endif %} {{ macros.field(_locals, 'password', 'new_password', null, 'New password') }} {{ macros.field(_locals, 'password', 'new_password_confirmation', null, 'New password confirmation') }} <button type="submit"><i data-feather="save"></i> Save</button> {{ macros.csrf(getCsrfToken) }} </form> {% if has_password %} <form action="{{ route('remove-password') }}" method="POST" id="remove-password-form" class="hidden"> <p><a href="javascript: void(0);" class="switch-form-link">Go back</a></p> <button type="submit" class="danger"><i data-feather="trash"></i> Remove password</button> {{ macros.csrf(getCsrfToken) }} </form> <script> document.addEventListener('DOMContentLoaded', () => { const changePasswordForm = document.getElementById('change-password-form'); const removePasswordLink = changePasswordForm.querySelector('a.switch-form-link'); const removePasswordForm = document.getElementById('remove-password-form'); const changePasswordLink = removePasswordForm.querySelector('a.switch-form-link'); removePasswordLink.addEventListener('click', () => { changePasswordForm.classList.add('hidden'); removePasswordForm.classList.remove('hidden'); }); changePasswordLink.addEventListener('click', () => { removePasswordForm.classList.add('hidden'); changePasswordForm.classList.remove('hidden'); }); }); </script> {% endif %} </section>