53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
|
<div class="container mt-5">
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h2 class="mb-3 text-center">Create New User</h2>
|
||
|
|
|
||
|
|
<%= form_for(@user, url: admin_users_path, html: { class: 'needs-validation', novalidate: true }) do |f| %>
|
||
|
|
<div class="mb-3">
|
||
|
|
<%= f.label :email, class: 'form-label' %>
|
||
|
|
<%= f.email_field :email, class: 'form-control', placeholder: 'Enter email', required: true %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<%= f.label :password, class: 'form-label' %>
|
||
|
|
<%= f.password_field :password, class: 'form-control', placeholder: 'Password', required: true %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<%= f.label :password_confirmation, "Confirm Password", class: 'form-label' %>
|
||
|
|
<%= f.password_field :password_confirmation, class: 'form-control', placeholder: 'Confirm Password', required: true %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="actions text-center">
|
||
|
|
<%= f.submit "Create User", class: 'btn btn-dark' %>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<%# This is to indicate to the User if the passwords didn't match %>
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
const password = document.querySelector('#user_password');
|
||
|
|
const confirmPassword = document.querySelector('#user_password_confirmation');
|
||
|
|
const messageContainer = document.createElement('div');
|
||
|
|
messageContainer.style.color = 'red';
|
||
|
|
|
||
|
|
// Append the messageContainer below the confirmPassword field
|
||
|
|
confirmPassword.parentNode.insertBefore(messageContainer, confirmPassword.nextSibling);
|
||
|
|
|
||
|
|
function validatePassword(){
|
||
|
|
if(password.value !== confirmPassword.value) {
|
||
|
|
messageContainer.textContent = "Passwords need to match!";
|
||
|
|
} else {
|
||
|
|
messageContainer.textContent = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
password.onchange = validatePassword;
|
||
|
|
confirmPassword.onkeyup = validatePassword;
|
||
|
|
});
|
||
|
|
</script>
|