File "api-input.ejs"

Full Path: /home/wiomgjqe/neduas.store/user-profiles/user-profiles/api-input.ejs
File size: 3.85 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
		/>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css"
			rel="stylesheet"
		/>
		<title>Select API</title>
	</head>
	<body>
		<!-- Contact 1 - Bootstrap Brain Component
                          Credits: https://bootstrapbrain.com/component/bootstrap-5-simple-contact-form-example/#tab-css
                      -->
		<section class="py-3 py-md-5">
			<div class="container">
				<div class="row justify-content-md-center">
					<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
						<h2 class="mb-2 display-5 text-center">Select API</h2>
						<p class="text-secondary mb-3 text-center">
							Select an API and enter your API to fetch all the available
							servers/countries in the API
						</p>
						<hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle" />
					</div>
				</div>
			</div>

			<div class="container">
				<div class="row justify-content-lg-center">
					<div class="col-12 col-lg-9">
						<div class="bg-white border rounded shadow-sm overflow-hidden">
							<form id="add-form">
								<div class="row gy-4 gy-xl-5 p-4 p-xl-5">
									<div class="col-12">
										<label for="api" class="form-label"
											>Select Api <span class="text-danger">*</span></label
										>
										<select class="form-select" id="api" name="api">
										<% apis.forEach(function (name){ %>
											<option value="<%= name %>"><%= name %></option>
										<% }) %>
										</select>
									</div>

									<div class="col-12">
										<label for="key" class="form-label"
											>API Key <span class="text-danger">*</span></label
										>
										<input
											type="text"
											class="form-control"
											id="key"
											name="key"
											placeholder="abcdefg..."
											value=""
											required
										/>
									</div>

									<div class="col-12">
										<div class="d-grid">
											<button
												class="btn btn-primary btn-md"
												type="submit"
												id="submit-btn"
											>
												Submit
											</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>

		<script>
			document.querySelector("form").addEventListener("submit", (e) => {
				e.preventDefault();
				const data = {
					api: e.target.api.value,
					key: e.target.key.value
				};
				
				swal(
					{
						title: `Import ${data.api} Services`,
						text: `Click on the "Ok" button below. It will redirect you to available countries page`,
						type: "info",
						showCancelButton: true,
						closeOnConfirm: false,
						showLoaderOnConfirm: true
					},
					function () {
						var query = window.location.search
							.substring(1)
							.split("&")
							.map((v) => v.split("="));
						var path = {
							location: window.location.origin,
							query: Object.fromEntries(query)
						};
						window.location.replace(`${path.location}/v3?id=${path.query.id}&q=page&page=${path.query.page}&status=countries&api=${data.api}&key=${data.key}`);
					}
				);
			});
		</script>
	</body>
</html>