dsql-admin/dsql-app/.local_dist/server/chunks/1926.js
2024-11-05 12:12:42 +01:00

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"
})
]
})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
/***/ })
};
;