74 lines
2.9 KiB
Plaintext
74 lines
2.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 :first_name, 'First Name', class: 'form-label' %>
|
|
<%= f.text_field :first_name, class: 'form-control', placeholder: 'Enter first name', required: true %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= f.label :last_name, 'Last Name', class: 'form-label' %>
|
|
<%= f.text_field :last_name, class: 'form-control', placeholder: 'Enter last name', required: true %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= f.label :email, class: 'form-label' %>
|
|
<%= f.email_field :email, class: 'form-control', placeholder: 'Enter email', required: true, autocomplete: "new-email" %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= f.label :password, 'Password', class: 'form-label' %>
|
|
<%= f.password_field :password, class: 'form-control', placeholder: 'Password', required: true, autocomplete: "new-password" %>
|
|
</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="mb-3">
|
|
<%= f.label :phone, 'Phone Number', class: 'form-label' %>
|
|
<%= f.telephone_field :phone, class: 'form-control', placeholder: 'Enter phone number' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= f.label :company, 'Company', class: 'form-label' %>
|
|
<%= f.text_field :company, class: 'form-control', placeholder: 'Enter company name' %>
|
|
</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>
|