pw copy to clipboard + fixes to dx

arhaanb · Oct 5, 2021 · 9e422e3 · 9e422e3
1 parent 3304ea3
commit 9e422e3
Show file tree

Hide file tree

Showing 6 changed files with 335 additions and 40 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,4 +1,4 @@
 AIRTABLE_API_KEY=
 AIRTABLE_BASE_ID=
 GH_USERNAME=
-SHRTN= // this is your hashed password (check password.js for more details)
+SHRTN=this is your hashed password (check password.js for more details)
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
 	"dependencies": {
 		"airtable": "^0.11.0",
 		"bcryptjs": "^2.4.3",
+		"clipboardy": "^2.3.0",
 		"dotenv": "^8.2.0",
 		"express": "^4.17.1",
 		"node-fetch": "^2.6.1"

diff --git a/password.js b/password.js
@@ -4,6 +4,7 @@
 
 const readline = require('readline')
 const bcrypt = require('bcryptjs')
+const clipboardy = require('clipboardy')
 
 const rl = readline.createInterface({
 	input: process.stdin,
@@ -16,8 +17,11 @@ rl.question('Enter the password you want to use: ', function (password) {
 			if (err) {
 				console.log(err)
 			}
+
 			console.log(`\n${hash}`)
-			console.log('Add this as the `SHRTN` variable in the `.env` file.\n')
+			clipboardy.writeSync(hash)
+			console.log('Add this as the `SHRTN` variable in the `.env` file.')
+			console.log('(Copied to clipboard)\n')
 			process.exit(0)
 		})
 	})

diff --git a/shrtn/index.html b/shrtn/index.html
@@ -6,13 +6,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Shrtn | arhaanb</title>
 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+		<meta name="theme-color" content="#17756d" />
 		<link rel="icon" href="https://arhaanb.co/favicon.ico" type="image/ico" />
+		<link rel="stylesheet" href="./style.css" />
 	</head>
 
-	<style>
-		@import url(https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700&display=swap);.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}}html{font-size:62.5%}h1,h2,h3,h4,h5,h6{margin-top:0}h1{font-size:4rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35}h5{font-size:1.8rem;line-height:1.5}h6{font-size:1.5rem;line-height:1.6}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #d1d1d1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid #31ac50;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:700}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}fieldset,input,select,textarea{margin-bottom:1.5rem}.container:after,.row:after,.u-cf{content:'';display:table;clear:both}*{-webkit-font-smoothing:antialiased}:root{--font1:'Epilogue'}@supports (font-variation-settings:normal){:root{--font1:'Epilogue'}}:root{font-size:18px;font-family:var(--font1);line-height:1.4;letter-spacing:.005em}*{scroll-behavior:smooth;scroll-margin-top:2em}.zero{margin:0}body{background-color:#fff}a{color:#222;opacity:65%;text-decoration:none;transition:.3s}a:hover{opacity:100%}h1,h2,h3,h4{font-family:inherit;font-size:inherit;font-weight:700;margin-top:2rem}h1{font-size:1.87rem}h2{font-size:1.17rem;font-weight:700}::selection{background:rgba(79,148,238,.295)}.title{font-size:3rem}.noselect,br,button,footer,img,nav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.title{margin-top:1.75em}.sub{margin-bottom:1em}input{min-width:100%;max-width:100%;transition:.3s}button{border:none;outline:0;font-family:Epilogue,Sans-Serif;padding:1em 2em;transition:.2s;border-radius:.5em;font-size:.7em;color:#222;background-color:#61fdbc;margin-top:.5em;margin-bottom:4em}button:hover{cursor:pointer;background-color:#62e4a7}label{font-size:.85em;margin-bottom:.2em;font-weight:400}
-	</style>
-
 	<body>
 		<div class="container">
 			<section id="before">
@@ -75,40 +73,7 @@ <h1 class="zero" style="margin-top: 4em">Link created succesfully</h1>
 				</p>
 			</section>
 		</div>
-		<script>
-			var btn = document.getElementById('subbtn')
-
-			function createLink(e) {
-				var name1 = document.getElementById('name').value
-				var link = document.getElementById('link').value
-				var backlink = document.getElementById('backlink').value
-				var password = document.getElementById('password').value
-				e.preventDefault()
-				btn.innerHTML = 'Loading'
-
-				var data = {
-					linkName: name1,
-					link,
-					backlink,
-					password
-				}
 
-				axios.post('/api/shrtn', data).then((res) => {
-					if (res.data.error == true) {
-						document.getElementById('error').innerText = res.data.message
-						btn.innerText = 'Create Link'
-					} else {
-						document.getElementById(
-							'successlink'
-						).innerText = `arhn.us/${res.data.backlink1}`
-						document
-							.getElementById('successlink')
-							.setAttribute('href', res.data.link)
-						document.getElementById('before').style.display = 'none'
-						document.getElementById('after').style.display = 'block'
-					}
-				})
-			}
-		</script>
+		<script src="./script.js"></script>
 	</body>
 </html>
diff --git a/shrtn/script.js b/shrtn/script.js
@@ -0,0 +1,32 @@
+var btn = document.getElementById('subbtn')
+
+function createLink(e) {
+	var name1 = document.getElementById('name').value
+	var link = document.getElementById('link').value
+	var backlink = document.getElementById('backlink').value
+	var password = document.getElementById('password').value
+	e.preventDefault()
+	btn.innerHTML = 'Loading'
+
+	var data = {
+		linkName: name1,
+		link,
+		backlink,
+		password
+	}
+
+	axios.post('/api/shrtn', data).then((res) => {
+		if (res.data.error == true) {
+			document.getElementById('error').innerText = res.data.message
+			password = ''
+			btn.innerText = 'Create Link'
+		} else {
+			document.getElementById(
+				'successlink'
+			).innerText = `arhn.us/${res.data.backlink1}`
+			document.getElementById('successlink').setAttribute('href', res.data.link)
+			document.getElementById('before').style.display = 'none'
+			document.getElementById('after').style.display = 'block'
+		}
+	})
+}