<template>
	<div id="websocket_entry">
		<h2>
			Enter a websocket URL:
		</h2>
		<input
			type="text"
			name="Websocket URL"
			v-model="ws_url"
			@keyup.enter="submit_ws_url()"
		>
		<br>
		<button
			@onclick.stop="submit_ws_url()"
		>
			Confirm URL
		</button>
	</div>
</template>

<script>
export default {
	name: 'WebsocketEntry',
	components: {},
	data() {return {
		ws_url: ``,
	}},
	methods: {
		submit_ws_url() {
			if (this.ws_url.length > 0 && this.ws_url.match(/^wss?:\/\//)) {
				this.$emit(`set-ws-url`, this.ws_url);
			} else {
				alert(`Invalid websocket URL, it must begin with "wss://" in order to connect.`)
			}
		},
	},
}
</script>

<style lang="stylus">
#websocket_entry {
	text-align: center
	height: 100vh
	width: 33vw
	margin: 0 auto

	@media screen and (max-width: 600px) {
		width: 90vw
	}
}
</style>
