453 lines
21 KiB
PHP
453 lines
21 KiB
PHP
<style>
|
|
.card {
|
|
padding-top: 0px;
|
|
}
|
|
</style>
|
|
<div class="tab-pane fade" id="api-tab">
|
|
<div class="card">
|
|
<!-- <div class="card-header">
|
|
<h5>API Token Management</h5>
|
|
</div> -->
|
|
<div class="card-body">
|
|
<div class="col-md-6">
|
|
<label for="is_api">Enable API Access</label>
|
|
<label class="switch">
|
|
<input <?= isset($api_data) ? "Checked" : "" ?> id="is_api" type="checkbox" name="is_api">
|
|
<span class="slider round" style="height: 27px;"></span>
|
|
</label>
|
|
</div>
|
|
<div id="api-token-section">
|
|
<!-- Generate Token Section -->
|
|
<form id="api-form" data-parsley-validate>
|
|
<input type="hidden" id="apiPK" name="id" value="<?= isset($api_data) ? $api_data['id'] : "" ?>">
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Generate New Token</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<input type="text" name="client_token" value="<?= isset($api_data) ? $api_data['client_token'] : "" ?>" class="form-control" id="client_token" placeholder="Click generate to create token" readonly required>
|
|
</div>
|
|
<div class="form-group col-md-6 d-flex">
|
|
<button class="btn btn-primary me-2" type="button" onclick="generateToken('client_token')">
|
|
<i class="mdi mdi-key-chain-variant me-1"></i> Generate Token
|
|
</button>
|
|
<button class="btn btn-secondary" type="button" onclick="copyToken('client_token')">
|
|
<i class="mdi mdi-content-copy me-1"></i> Copy
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div class="row" style="padding-top:10px">
|
|
<div class="col-md-5">
|
|
<label for="auth_type">Authorization Type</label>
|
|
<input type="text" class="form-control" id="auth_type" value="Authorization - Bearer" readonly>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- <div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<tr>
|
|
<td>Get Individual Employee Data</td>
|
|
<td><?= base_url("getEmpData") ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Get All Employee Data</td>
|
|
<td><?= base_url("getAllEmpData") ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Get Branch Wise Employee Data</td>
|
|
<td><?= base_url("getClientBranchEmpData") ?></td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<!-- Enter Token Section -->
|
|
<hr>
|
|
<div class="mt-5">
|
|
<h5 class="mb-3">Webhooks (PUSH)</h5>
|
|
<div class="form-row">
|
|
<div class="col-md-2">
|
|
<label>Webhook Action</label>
|
|
<input type="text" class="form-control" id="webhook_action" value="Employee" readonly>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Webhook Method Type</label>
|
|
<select class="form-control" name="emp_method">
|
|
<option value="post" <?= isset($api_data['emp_method']) && $api_data['emp_method'] == "post" ? "selected" : "" ?>>POST</option>
|
|
<option value="get" <?= isset($api_data['emp_method']) && $api_data['emp_method'] == "get" ? "selected" : "" ?>>GET</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label>Webhook URL</label>
|
|
<input type="text" name="emp_url" value="<?= isset($api_data) ? $api_data['emp_url'] : "" ?>" class="form-control emp_webhook" onchange="validateWebhookUrlById(this.id)" id="webhook_url" placeholder="Enter Webhook URL">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Token Type</label>
|
|
<select class="form-control" name="emp_tkn_type">
|
|
<option value="bearer" <?= (isset($api_data) && $api_data['emp_tkn_type'] == 'bearer') ? 'selected' : '' ?>>Bearer Token</option>
|
|
<option value="X-API-KEY" <?= (isset($api_data) && $api_data['emp_tkn_type'] == 'X-API-KEY') ? 'selected' : '' ?>>API Key</option>
|
|
<option value="token" <?= (isset($api_data) && $api_data['emp_tkn_type'] == 'token') ? 'selected' : '' ?>>Token</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<label>Authorization Token</label>
|
|
<input type="text" id="client_api_token" name="emp_token" value="<?= isset($api_data) ? $api_data['emp_token'] : "" ?>" class="form-control emp_webhook" placeholder="Enter Client API token" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="client_object_type">Client Object Type</label>
|
|
<textarea class="form-control emp_webhook" name="emp_obj" onchange="checkValidJson(this)" id="client_object_type" rows="3" placeholder="Enter the object type"><?= isset($api_data) ? htmlspecialchars($api_data['emp_obj']) : "" ?></textarea>
|
|
</div>
|
|
<hr>
|
|
<div class="form-row">
|
|
<div class="col-md-2">
|
|
<label>Webhook Action</label>
|
|
<input type="text" class="form-control" id="webhook_action" value="Claims" readonly>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Webhook Method Type</label>
|
|
<select class="form-control" name="claim_method">
|
|
<option value="post" <?= isset($api_data['claim_method']) && $api_data['claim_method'] == "post" ? "selected" : "" ?>>POST</option>
|
|
<option value="get" <?= isset($api_data['claim_method']) && $api_data['claim_method'] == "get" ? "selected" : "" ?>>GET</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label>Webhook URL</label>
|
|
<input type="text" name="claim_url" value="<?= isset($api_data) ? $api_data['claim_url'] : "" ?>" class="form-control claim_webhook" onchange="validateWebhookUrlById(this.id)" id="webhook_url_claims" placeholder="Enter Webhook URL">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Token Type</label>
|
|
<select class="form-control" name="claim_tkn_type">
|
|
<option value="bearer" <?= (isset($api_data) && $api_data['claim_tkn_type'] == 'bearer') ? 'selected' : '' ?>>Bearer Token</option>
|
|
<option value="X-API-KEY" <?= (isset($api_data) && $api_data['claim_tkn_type'] == 'X-API-KEY') ? 'selected' : '' ?>>API Key</option>
|
|
<option value="token" <?= (isset($api_data) && $api_data['claim_tkn_type'] == 'token') ? 'selected' : '' ?>>Token</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<label>Authorization Token</label>
|
|
<input type="text" id="client_api_token" name="claim_token" value="<?= isset($api_data) ? $api_data['claim_token'] : "" ?>" class="form-control claim_webhook" placeholder="Enter Client API token">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="client_object_type">Client Object Type</label>
|
|
<textarea class="form-control claim_webhook" name="claim_obj" onchange="checkValidJson(this)" id="client_object_type_claims" rows="3" placeholder="Enter the object type"><?= isset($api_data) ? htmlspecialchars($api_data['claim_obj']) : "" ?></textarea>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h5 class="mt-5">Webhooks (PULL)</h5>
|
|
<div class="form-row">
|
|
<div class="col-md-2">
|
|
<label>Webhook Action</label>
|
|
<input type="text" class="form-control" id="webhook_action2" value="Employee" readonly>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Webhook Method Type</label>
|
|
<select class="form-control" disabled>
|
|
<option value="post" selected>POST</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label>Webhook URL</label>
|
|
<input type="text" value="<?= base_url("retrieveWebhookDataEmp") ?>" class="form-control" onchange="validateWebhookUrlById(this.id)" id="webhook_url2" readonly placeholder="Enter Webhook URL">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Token Type</label>
|
|
<select class="form-control" disabled>
|
|
<option value="bearer" selected>Bearer Token</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row mt-3">
|
|
<div class="col-md-6">
|
|
<label>Authorization Token</label>
|
|
<input type="text" name="pull_emp_token" value="<?= isset($api_data) ? $api_data['pull_emp_token'] : "" ?>" class="form-control" id="pull_emp_token" placeholder="Click generate to create token" readonly required>
|
|
</div>
|
|
<div class="col-md-6 d-flex align-items-end">
|
|
<button class="btn btn-primary me-2" type="button" onclick="generateToken('pull_emp_token')">
|
|
<i class="mdi mdi-key-chain-variant me-1"></i> Generate Token
|
|
</button>
|
|
<button class="btn btn-secondary" type="button" onclick="copyToken('pull_emp_token')">
|
|
<i class="mdi mdi-content-copy me-1"></i> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group mt-3">
|
|
<label for="pull_emp_obj">Emp Object Type</label>
|
|
<textarea class="form-control" name="pull_emp_obj" onchange="checkValidJson(this)" id="pull_emp_obj" rows="3" placeholder="Enter the object type"><?= isset($api_data) ? htmlspecialchars($api_data['pull_emp_obj']) : "" ?></textarea>
|
|
</div>
|
|
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<label>Webhook Action</label>
|
|
<input type="text" class="form-control" id="webhook_action2" value="Claim" readonly>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Webhook Method Type</label>
|
|
<select class="form-control">
|
|
<option value="post" selected>POST</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label>Webhook URL</label>
|
|
<input type="text" value="<?= base_url("retrieveWebhookDataClaim") ?>" class="form-control" onchange="validateWebhookUrlById(this.id)" id="webhook_url2" readonly placeholder="Enter Webhook URL">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Token Type</label>
|
|
<select class="form-control">
|
|
<option value="bearer" selected>Bearer Token</option>
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<div class="col-md-6">
|
|
<label>Authorization Token</label>
|
|
<input type="text" name="pull_claim_token" value="<?= isset($api_data) ? $api_data['pull_claim_token'] : "" ?>" class="form-control" id="pull_claim_token" placeholder="Click generate to create token" readonly required>
|
|
</div>
|
|
<div class="col-md-6 d-flex align-items-end">
|
|
<button class="btn btn-primary me-2" type="button" onclick="generateToken('pull_claim_token')">
|
|
<i class="mdi mdi-key-chain-variant me-1"></i> Generate Token
|
|
</button>
|
|
<button class="btn btn-secondary" type="button" onclick="copyToken('pull_claim_token')">
|
|
<i class="mdi mdi-content-copy me-1"></i> Copy
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-12">
|
|
<label for="pull_claim_obj">Claim Object Type</label>
|
|
<textarea class="form-control" name="pull_claim_obj" onchange="checkValidJson(this)" id="pull_claim_obj" rows="3" placeholder="Enter the object type"><?= isset($api_data) ? htmlspecialchars($api_data['pull_claim_obj']) : "" ?></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button class="btn btn-primary waves-effect waves-light mr-1" type="submit" id="formSubmit">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function generateToken(element_id) {
|
|
|
|
// alert($("#general_PrimaryKey").val());
|
|
// console.log('element_id:', element_id);
|
|
$.ajax({
|
|
url: "<?= base_url('client/generateToken') ?>",
|
|
type: "GET",
|
|
data: {
|
|
client_id: $("#general_PrimaryKey").val()
|
|
},
|
|
beforeSend: function() {
|
|
$('.loader').fadeIn();
|
|
$('.loader-mask').fadeIn();
|
|
},
|
|
success: function(response) {
|
|
if (response.status) {
|
|
toastr.success(response.message);
|
|
$(`#${element_id}`).val(response.token);
|
|
} else {
|
|
toastr.error(response.message);
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Error:", error);
|
|
toastr.error("An error occurred while processing your request.");
|
|
},
|
|
complete: function() {
|
|
$('.loader').fadeOut();
|
|
$('.loader-mask').fadeOut();
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
function copyToken(element_id) {
|
|
const tokenField = document.getElementById(`${element_id}`);
|
|
if (tokenField.value) {
|
|
tokenField.select();
|
|
navigator.clipboard.writeText(tokenField.value);
|
|
toastr.success('Token copied to clipboard!');
|
|
} else {
|
|
toastr.warning('Generate a token first!');
|
|
}
|
|
}
|
|
|
|
async function pasteToken() {
|
|
try {
|
|
// Get the target input field
|
|
const tokenInput = document.getElementById('client_api_token');
|
|
|
|
// Request clipboard read permission
|
|
const permission = await navigator.permissions.query({
|
|
name: 'clipboard-read'
|
|
});
|
|
if (permission.state === 'denied') {
|
|
toastr.error('Clipboard access denied by user');
|
|
return;
|
|
}
|
|
|
|
// Read clipboard contents
|
|
const text = await navigator.clipboard.readText();
|
|
|
|
// Security checks
|
|
if (text.length > 256) {
|
|
toastr.warning('Invalid token length');
|
|
return;
|
|
}
|
|
|
|
if (!/^[a-zA-Z0-9\-_]+$/.test(text)) {
|
|
toastr.warning('Invalid token format');
|
|
return;
|
|
}
|
|
|
|
// Insert into input field
|
|
tokenInput.value = text;
|
|
|
|
// Visual feedback
|
|
tokenInput.focus();
|
|
toastr.success('Token pasted securely');
|
|
|
|
} catch (error) {
|
|
console.error('Paste failed:', error);
|
|
toastr.error('Failed to read clipboard');
|
|
}
|
|
}
|
|
|
|
|
|
$("#is_api").change(function() {
|
|
checkAndShowApiElements();
|
|
});
|
|
$(document).ready(function() {
|
|
checkAndShowApiElements();
|
|
});
|
|
|
|
|
|
function checkAndShowApiElements() {
|
|
if ($("#is_api").is(":checked")) {
|
|
|
|
$('.loader').fadeIn();
|
|
$('.loader-mask').fadeIn();
|
|
|
|
$("#api-token-section").show();
|
|
|
|
$('.loader').fadeOut();
|
|
$('.loader-mask').fadeOut();
|
|
} else {
|
|
$("#api-token-section").hide();
|
|
}
|
|
}
|
|
|
|
function checkValidJson(el) {
|
|
|
|
const element = document.getElementById(el.id);
|
|
if (!element) {
|
|
console.error('Element with ID "${id}" not found.');
|
|
return false;
|
|
}
|
|
try {
|
|
JSON.parse(element.value);
|
|
} catch (e) {
|
|
el.value = '';
|
|
toastr.error('Invalid JSON format');
|
|
}
|
|
}
|
|
|
|
function validateWebhookUrlById(id) {
|
|
console.log("function called");
|
|
const element = document.getElementById(id);
|
|
if (!element) {
|
|
console.error(`Element with ID "${id}" not found.`);
|
|
return false;
|
|
}
|
|
const url = element.value.trim(); // Trim whitespace
|
|
try {
|
|
// Use the URL constructor to validate structure
|
|
const parsedUrl = new URL(url);
|
|
if (parsedUrl.pathname !== "/" && parsedUrl.pathname.endsWith("/")) {
|
|
element.value = "";
|
|
toastr.error("Webhook URL should not end with a trailing slash.");
|
|
return false;
|
|
}
|
|
|
|
if (parsedUrl.pathname.endsWith(".")) {
|
|
element.value = "";
|
|
toastr.error("Webhook URL should not end with a trailing dot.");
|
|
return false;
|
|
}
|
|
|
|
// const strictDomainRegex = /^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/;
|
|
// if (!strictDomainRegex.test(parsedUrl.hostname)) {
|
|
// toastr.error("Invalid domain format in webhook URL.");
|
|
// element.value = "";
|
|
// return false;
|
|
// }
|
|
// Check if protocol is HTTP/HTTPS
|
|
return parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:";
|
|
} catch (e) {
|
|
toastr.error("Invalid Webhook URL format");
|
|
element.value = "";
|
|
return false; // Invalid URL structure
|
|
}
|
|
}
|
|
|
|
$("#api-form").submit(function(event) {
|
|
event.preventDefault();
|
|
const form = $(this);
|
|
// form.parsley().validate(); // Activate Parsley validation
|
|
|
|
if (!$(this).parsley().isValid()) {
|
|
return;
|
|
}
|
|
const formData = $(this).serializeArray();
|
|
formData.push({
|
|
name: "client_id",
|
|
value: $("#general_PrimaryKey").val()
|
|
});
|
|
formData.push({
|
|
name: "api_access",
|
|
value: $("#is_api").is(":checked") ? 1 : 0
|
|
});
|
|
console.log(formData);
|
|
|
|
$.ajax({
|
|
url: "<?= base_url('client/saveApiData') ?>",
|
|
type: "POST",
|
|
data: formData,
|
|
beforeSend: function() {
|
|
$('.loader').fadeIn();
|
|
$('.loader-mask').fadeIn();
|
|
},
|
|
success: function(response) {
|
|
if (response.status) {
|
|
toastr.success(response.message);
|
|
} else {
|
|
toastr.error(response.message);
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Error:", error);
|
|
toastr.error("An error occurred while processing your request.");
|
|
},
|
|
complete: function() {
|
|
$('.loader').fadeOut();
|
|
$('.loader-mask').fadeOut();
|
|
}
|
|
})
|
|
|
|
});
|
|
|
|
$(".claim_webhook").on("input", function() {
|
|
|
|
let anyNotEmpty = $(".claim_webhook").toArray().some(input => $(input).val() !== "");
|
|
|
|
$(".claim_webhook").prop("required", anyNotEmpty);
|
|
});
|
|
|
|
$(".emp_webhook").on("input", function() {
|
|
let anyNotEmpty = $(".emp_webhook").toArray().some(input => $(input).val() !== "");
|
|
|
|
$(".emp_webhook").prop("required", anyNotEmpty);
|
|
});
|
|
</script>
|