309 lines
16 KiB
JavaScript
309 lines
16 KiB
JavaScript
|
"use strict";
|
||
|
|
exports.id = 1926;
|
||
|
|
exports.ids = [1926];
|
||
|
|
exports.modules = {
|
||
|
|
|
||
|
|
/***/ 1926:
|
||
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||
|
|
|
||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||
|
|
/* harmony export */ "Z": () => (/* binding */ DbCreateDbUserForm)
|
||
|
|
/* harmony export */ });
|
||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
||
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
||
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
||
|
|
/* harmony import */ var _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6729);
|
||
|
|
/* harmony import */ var _general_FormAlertBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7037);
|
||
|
|
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264);
|
||
|
|
/* harmony import */ var _form_FormInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7901);
|
||
|
|
/* harmony import */ var _UserImage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2733);
|
||
|
|
// @ts-check
|
||
|
|
/**
|
||
|
|
* ==============================================================================
|
||
|
|
* Imports
|
||
|
|
* ==============================================================================
|
||
|
|
*/
|
||
|
|
|
||
|
|
////////////////////////////////////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////
|
||
|
|
/** @type {any} */ let timeout;
|
||
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
||
|
|
* ==============================================================================
|
||
|
|
* Main Component { Functional }
|
||
|
|
* ==============================================================================
|
||
|
|
* @param {Object} props - Server props
|
||
|
|
* @param {string} props.targetDb
|
||
|
|
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
|
||
|
|
* @param {import("@/package-shared/types").UserType} [props.user]
|
||
|
|
* @param {any} props.userImage
|
||
|
|
* @param {React.Dispatch<React.SetStateAction<any>>} props.setUserImage
|
||
|
|
*/ function DbCreateDbUserForm({ targetDb , database , user , userImage , setUserImage , }) {
|
||
|
|
/**
|
||
|
|
* Get Contexts
|
||
|
|
*
|
||
|
|
* @abstract { React.useContext }
|
||
|
|
*/ ////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* Javascript Variables
|
||
|
|
*
|
||
|
|
* @abstract Non hook variables and functions
|
||
|
|
*/ ////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* React Hooks
|
||
|
|
*
|
||
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
||
|
|
*/ /** @type {[ alert: string | null, setAlert: React.Dispatch<React.SetStateAction<string | null>> ]} */ // @ts-ignore
|
||
|
|
const [alert, setAlert] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
|
||
|
|
const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
/**
|
||
|
|
* Function Return
|
||
|
|
*
|
||
|
|
* @abstract Main Function Return
|
||
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
||
|
|
children: [
|
||
|
|
loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}),
|
||
|
|
alert && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_FormAlertBlock__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
|
||
|
|
message: alert
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h3", {
|
||
|
|
className: "m-0 text-lg font-semibold mb-1 text-slate-600 mt-4",
|
||
|
|
children: "User information"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "First Name",
|
||
|
|
inputType: "text",
|
||
|
|
name: "first_name",
|
||
|
|
autoComplete: "given-name",
|
||
|
|
onInputHandler: (e)=>{
|
||
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
||
|
|
const inputEl = e.target;
|
||
|
|
if (inputEl.value.match(/./)) {
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
setAlert(null);
|
||
|
|
} else {
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
||
|
|
htmlFor: "last_name",
|
||
|
|
children: "Last Name"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
||
|
|
type: "text",
|
||
|
|
name: "last_name",
|
||
|
|
id: "last_name",
|
||
|
|
placeholder: "Last Name",
|
||
|
|
autoComplete: "family-name",
|
||
|
|
onInput: (e)=>{
|
||
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
||
|
|
const inputEl = e.target;
|
||
|
|
if (inputEl.value.match(/./)) {
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
setAlert(null);
|
||
|
|
} else {
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
||
|
|
htmlFor: "username",
|
||
|
|
children: "Username"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
||
|
|
type: "text",
|
||
|
|
name: "username",
|
||
|
|
id: "username",
|
||
|
|
placeholder: "Username",
|
||
|
|
autoComplete: "username",
|
||
|
|
onInput: (e)=>{
|
||
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
||
|
|
const inputEl = e.target;
|
||
|
|
if (inputEl.value.match(/./)) {
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
setAlert(null);
|
||
|
|
} else {
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
}
|
||
|
|
window.clearTimeout(timeout);
|
||
|
|
timeout = setTimeout(()=>{
|
||
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(`/api/checkDuplicateData?type=username&value=${inputEl.value}&tableName=users&dbFullName=${targetDb}`).then((res)=>{
|
||
|
|
// console.log(res);
|
||
|
|
if (res?.result) {
|
||
|
|
setAlert("Username Already Exists");
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
} else {
|
||
|
|
setAlert(null);
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
||
|
|
htmlFor: "email_address",
|
||
|
|
children: "Email Address"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
||
|
|
type: "email",
|
||
|
|
name: "email_address",
|
||
|
|
id: "email_address",
|
||
|
|
placeholder: "Email Address",
|
||
|
|
autoComplete: "email",
|
||
|
|
onInput: (e)=>{
|
||
|
|
window.clearTimeout(timeout);
|
||
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
||
|
|
const inputEl = e.target;
|
||
|
|
timeout = setTimeout(()=>{
|
||
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(`/api/checkDuplicateData?type=email&value=${inputEl.value}&tableName=users&dbFullName=${targetDb}`).then((res)=>{
|
||
|
|
// console.log(res);
|
||
|
|
if (res?.result) {
|
||
|
|
setAlert("Email Already Exists");
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
} else {
|
||
|
|
setAlert(null);
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
},
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "Phone Number",
|
||
|
|
inputType: "text",
|
||
|
|
name: "phone",
|
||
|
|
autoComplete: "tel"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "Address",
|
||
|
|
name: "address",
|
||
|
|
autoComplete: "address"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex-wrap xl:flex-nowrap",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "City",
|
||
|
|
name: "city",
|
||
|
|
autoComplete: "city"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "State",
|
||
|
|
name: "state",
|
||
|
|
autoComplete: "state"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "Country",
|
||
|
|
name: "country",
|
||
|
|
autoComplete: "country"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
|
||
|
|
title: "Zip Code",
|
||
|
|
name: "zip_code",
|
||
|
|
autoComplete: "zip_code"
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
||
|
|
htmlFor: "password",
|
||
|
|
children: "Password"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
||
|
|
type: "password",
|
||
|
|
name: "password",
|
||
|
|
id: "password",
|
||
|
|
placeholder: "Password",
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
||
|
|
htmlFor: "confirm_password",
|
||
|
|
children: "Confirm Password"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
||
|
|
type: "password",
|
||
|
|
name: "confirm_password",
|
||
|
|
id: "confirm_password",
|
||
|
|
placeholder: "Confirm Password",
|
||
|
|
onInput: (e)=>{
|
||
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
||
|
|
const inputEl = e.target;
|
||
|
|
let passwordInput = inputEl.closest("form")?.["password"].value;
|
||
|
|
let passwordRepeatInput = inputEl.value;
|
||
|
|
if (passwordInput === passwordRepeatInput) {
|
||
|
|
inputEl.classList.remove("warning");
|
||
|
|
} else {
|
||
|
|
inputEl.classList.add("warning");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
||
|
|
className: "paper",
|
||
|
|
children: [
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h3", {
|
||
|
|
className: "m-0 text-lg font-semibold mb-1 text-slate-600",
|
||
|
|
children: "User Image"
|
||
|
|
}),
|
||
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_UserImage__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
|
||
|
|
userImage: userImage,
|
||
|
|
setUserImage: setUserImage,
|
||
|
|
className: "w-full"
|
||
|
|
})
|
||
|
|
]
|
||
|
|
})
|
||
|
|
]
|
||
|
|
});
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
||
|
|
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
};
|
||
|
|
;
|