diff --git a/frontend/components/AccessCodePage.vue b/frontend/components/AccessCodePage.vue index 83af4b2..bbf23b9 100644 --- a/frontend/components/AccessCodePage.vue +++ b/frontend/components/AccessCodePage.vue @@ -11,7 +11,7 @@ -
+
@@ -56,15 +56,24 @@ export default { const { video } = this.$refs; video.paused ? video.play() : video.pause(); }, + smh() { + let inputContainer = document.getElementById('code-container') + inputContainer.classList.add('shake') + if (this.timeout) + clearTimeout(this.timeout) + this.timeout = setTimeout(() => inputContainer.classList.remove('shake'), 600); + }, submit() { - const site = __sites__.find(site => site.code == this.code); + const site = __sites__.find(site => site.code?.toLowerCase() == this.code?.toLowerCase()); if (site) { createCookie("accesscode", site.code, 14); - window.location.href = `${window.location.protocol}//${site.domain}`; + const path = (location.pathname+location.search).substr(1) + const redirectUrl = `${window.location.protocol}//${site.domain}/${path}` + window.location.href = redirectUrl; + } else { + this.smh() } - - return; }, }, }; @@ -127,6 +136,11 @@ video { width: 80%; } + &.shake { + animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + animation-iteration-count: infinite; + } + input { max-width: 24rem; width: 100%; @@ -145,6 +159,7 @@ video { button { height: 100%; max-height: unset; + font-weight: bold; } } @@ -180,6 +195,7 @@ video { label { color: rgba(255, 255, 255, 0.82); + text-shadow: 1px 1px black; font-size: 1.5rem; font-weight: 500; } @@ -205,4 +221,27 @@ video { .button-container { margin-top: 4rem; } + +@keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } +}