secrets.html

<!DOCTYPE html>
<html style="height:100%"  lang="en" >
	<head>
		<!-- Meta data for SEO etc -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="icon"  href="favicon.ico">

		<meta name="description" content="Scribbler is a notebook, online compiler for experimenting in JavaScript. Play with html and javascript using simple interface (without servers and backend deployment). All the computation happens in your browser.">
		<script>global=globalThis</script>
		<title>Secret Store for Scribbler</title>

		<!-- Styling using pico.css and some custome css -->
		<link rel="stylesheet" href="css/pico.min.css">
		<link rel="stylesheet" href="css/style.css">


		
		<script src="js/secrets.js"></script> <!-- Handling AI coding using WebLLM -->

		<style>
		   #secretList{
		      list-style: none;
		      padding: 0;
		      margin: 0;
		    }
		    
		    #secretList li {
		      list-style: none;
		      border: 1px solid #ddd;
		      border-radius: 10px;
		      padding: 20px;
		      margin-bottom: 20px;
		      margin-left: 5px;
		      margin-right: 5px;
		      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		    }
		    
		    #secretList li a{
		    	float:right;
		    }

		</style>
	
	</head>
  <body style="height:100%" >
	
	<nav id="menu"> <!-- Menu bar -->
	  <ul style="width:50%;float:left">
	    <li id="logo"><img src='images/logo2.png' id=""/></li>
	    <h2 style="color:#555">Store Your Secrets</h2>

	</nav>

	<div class="container" id="ai-loading" style="margin-top:5px;">
		<div class="row">
			<h3> Alert!! These secrets will be visible to any notebook that is taken out of sandbox. Be careful before breaking notebooks out of sandbox</h3>
			
			<hr>
			<h3>API Keys</h3>
			<h4>Google AI Studio</h4>
			<input type="password" id="google-ai-studio-key" onchange="setAPIKey('google-ai-studio',document.getElementById('google-ai-studio-key').value)" placeholder="api-key"></input>
			<a href='https://aistudio.google.com/app/apikey' target='_blank'>Link for getting Google AI Studio API Key</a>
			<p>This will be used for AI and will be sent to Google APIs</p>
			<form onsubmit="storeSecret(event)">
				<h3>New Secret</h3>
				<p style="color:green">None of the secrets will be shared with Scribbler or other servers unless explicity sent by a notebook.</p>
				<input type="text" placeholder="Name" id="name" name="name"></input>
				<input type="password" placeholder="Value" id="value" name="name"></input>
				<button type="submit" id="submit" name="name">Store</button>&nbsp;<p>You can access the secret from notebooks using `scrib.getSecret(name)`</p>
			</form>
		</div>
		<div>
			<ul id="secretList"></ul>
		</div>
	</div>
	
	
	
	
	<html-component data="components/footer.html"></html-component>
	
	
  </body>

 <script>
   storeSecret=function(e){
   	e.preventDefault();
   	
   	const name = document.getElementById("name").value;
   	const value = document.getElementById("value").value;
   	if(name && value) {
   		setSecret(name,value);
   		document.getElementById("name").value='';
   		document.getElementById("value").value='';
   	}
   	else {
	   	
	   	alert("Cannot have empty values");
	}
	updateSecrets();
   	
   }
   
   updateSecrets=function(){
   	const secretNames=getSecretNames();
   	const secretList=document.getElementById("secretList");
   	secretList.innerHTML='';
   	secretNames.forEach(name=>{
   		const nameElement=document.createElement("li");
   		nameElement.innerHTML=`<h2>${name}\
   		&nbsp;<a onclick="deleteSecret('${name}');updateSecrets();">☓</a></h2>`;
   		secretList.appendChild(nameElement);
   	});
   
   }
 
 updateSecrets();
 
 	
//This loads components dynamically
  class DynamicInclude extends HTMLElement {
	connectedCallback() {
	  const url = this.getAttribute('data');
	  fetch(url)
		.then(response => response.text())
		.then(content => {
		  this.innerHTML = content;
		});
	}
  }

  customElements.define('html-component', DynamicInclude);
  
  
 </script>
	
 </html>