https://cubicle-solutions.co.jp/js/user/project/register_user_info.js

1import { getProjectData } from "./create_user_info.js";
2import { toggleSpinner } from "../../utils/common.js";
3
4$(document).ready(() => {
5  $("#register_account_form").on("submit", handleRegistrationFormSubmit);
6});
7
8function handleRegistrationFormSubmit(event) {
9  event.preventDefault();
10  toggleSpinner(true);
11
12  clearErrorMessages();
13
14  const projectData = getProjectData("register_account_form");
15  const userData = userFormData(this);
16
17  submitRegistrationData($(this).attr("action"), $(this).attr("method"), {
18    project: projectData,
19    user: userData,
20  });
21}
22
23function clearErrorMessages() {
24  const errorFields = [
25    "registration_company_name_error",
26    "registration_first_name_error",
27    "registration_last_name_error",
28    "registration_email_error",
29    "registration_password_error",
30    "registration_phone_number_error",
31    "registration_ward_error",
32    "registration_street_error",
33    "registration_building_error",
34    'registration_cfm_password_error',
35    "request_type_error",
36    "prefecture_id_error",
37    "ward_error",
38    "street_error",
39    "deadline_at_error",
40    'address_error',
41  ];
42
43  errorFields.forEach((field) => {
44    $(`#${field}`).text("").css("display", "none");
45  });
46}
47
48function userFormData(userFormElement) {
49  const formData = new FormData($(userFormElement)[0]);
50  const data = {};
51  for (const [key, value] of formData.entries()) {
52    data[key] = value;
53  }
54  return data;
55}
56
57function submitRegistrationData(url, method, data) {
58  $.ajax({
59    url,
60    type: method,
61    data,
62    success: handleSuccess,
63    error: handleError,
64  });
65}
66
67function handleSuccess(data) {
68  toggleSpinner(false);
69  if (data.error) {
70    const messages = Alpine.store("messages")
71    window.dispatchEvent(
72      new CustomEvent("add_notification", {
73        detail: {
74          text: messages.errors.auth.email_already_exists,
75        },
76      })
77    );
78  } else {
79    localStorage.removeItem("projectData");
80    window.location.href = "/users/projects/registration/success";
81  }
82}
83
84function handleError(xhr) {
85  const constants = Alpine.store("constants");
86  const messages = Alpine.store("messages")
87
88  // Handle unprocessable entity status code (422) for form validation errors.
89  if (xhr.status == constants.HTTP_REQUEST_STATUS.UNPROCESSABLE_ENTITY && xhr.responseJSON) {
90    displayFormErrors(xhr.responseJSON?.errors);
91  } else {
92    window.dispatchEvent(
93      new CustomEvent("add_notification", {
94        detail: {
95          text: messages.errors.something_wrong,
96        },
97      })
98    );
99  }
100  toggleSpinner(false);
101}
102
103function displayFormErrors(errors) {
104  if (!errors) return;
105  window.dispatchEvent(
106    new CustomEvent("add_notification", {
107      detail: {
108        text: 'ご依頼内容にエラーがあります。<br>もう一度ご確認ください。'
109      },
110    })
111  );
112  $.each(errors, (field, messages) => {
113    const prefix = field.split(".")[0];
114    if (prefix == "user") {
115      const fieldName = field.split(".")[1];
116      $(`#registration_${fieldName}_error`)
117        .text(messages[0])
118        .css("display", "block");
119    }
120    if (prefix == "project") {
121      const fieldName = field.split(".")[1];
122      $(`#${fieldName}_error`)
123        .text(messages[0])
124        .css("display", "block");
125    }
126  });
127}