<main>

<section id="container">
<img id="logo" src="{%static 'styles/images/chaticon.png' %}" />
<div>
<h1>welcome to my chat</h1>
<p>A group videocalling website</p>

</div>
<form id="form">
<div class="field">
<input type="text" name="room" placeholder="Enter a room name"
style="text-transform: uppercase;" />
</div>
<div class="field">
<input type="submit" value="Join Stream" />
</div>

</form>
</section>

</main>
<script type="text/javascript">
let form = document.getElementById('form')
let handlesubmit = async (e) => {
e.preventDefault()
let room = e.target.room.value.toUpperCase()
let response = await fetch('/getToken/?channel=${room}')
let data = await response.json()
let UID = data.uid
let token = data.token
sessionStorage.setItem('UID', UID)
sessionStorage.setItem('token', token)
sessionStorage.setItem('room', room)

window.open('/room/', '_self')
}
form.addEventListener('submit', handlesubmit)
</script>