azalea/lisho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[O] Optimize web error handling

Browse Source
This commit is contained in:
Hykilpikonna
2022-08-15 17:11:38 -04:00
parent 5a5d5bb7dd
commit b200d1e677
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+32 -6
View File
@@ -24,10 +24,11 @@
#app {
margin: 40vh auto 0;
width: 100%;
text-align: center;
}
#app * + * {
#app > * + * {
margin-top: 20px;
}
@@ -49,6 +50,11 @@
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.title {
color: #fff3b7;
}
@@ -60,24 +66,36 @@
.v-enter-from, .v-leave-to {
opacity: 0;
}
.rem {
margin-top: 5px;
font-size: 0.7em;
color: #9d9d9d;
user-select: none;
}
</style>
</head>
<body>
<div id="app">
<div class="title">HyDEV Link Shortener</div>
<Transition @after-leave="input_hidden = true">
<input id="in" v-model="url" placeholder="url here..." @keydown.enter="go" v-if="!sent">
<input id="in" v-model="url" type="url" autocomplete="off" placeholder="url here..."
@keydown.enter="go" v-if="!sent">
</Transition>
<Transition>
<div v-if="short && input_hidden">{{short}}</div>
<div v-if="short && input_hidden" :style="error ? {color: '#ff8383'} : {}">
<div v-if="error">{{short}}</div>
<a :href="short" v-if="!error">{{short}}</a>
<div class="rem" v-if="!error">( Copied! )</div>
</div>
</Transition>
</div>
<script>
url_re = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
url_re = /^https?:\/\/(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
Vue.createApp({
data() {
return {url: '', sent: false, short: '', input_hidden: false}
return {url: '', sent: false, short: '', input_hidden: false, error: false}
},
methods: {
@@ -99,7 +117,15 @@
this.sent = true
const resp = await fetch('/', {method: 'PUT', body: url})
this.short = window.location.origin + await resp.text()
const txt = await resp.text()
this.error = resp.status !== 200
this.short = this.error ? txt : window.location.origin + txt
// Copy to clipboard
if (!this.error)
{
await navigator.clipboard.writeText(this.short)
}
},
}
}).mount('#app')