Noah Petherbridge
8906e89a51
Move some chat modals into external components: * LoginModal * ExplicitOpenModal * ReportModal * The Photo Modal was hoisted into the main index.html page, because it is not a Vue component and relied on global onclick handlers and the DOM. Spin off some external JS modules: * isAppleWebkit moved to lib/browsers.js * Local Storage management centralized and moved to lib/LocalStorage.js
66 lines
2.3 KiB
Vue
66 lines
2.3 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
visible: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
username: '',
|
|
};
|
|
},
|
|
methods: {
|
|
signIn() {
|
|
this.$emit('signIn', this.username);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal" :class="{ 'is-active': visible }">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<div class="card">
|
|
<header class="card-header has-background-info">
|
|
<p class="card-header-title has-text-light">Sign In</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<form @submit.prevent="signIn()">
|
|
|
|
<div v-if="autoLogin" class="content">
|
|
<p>
|
|
Welcome to <span v-html="config.branding"></span>! Please just click on the "Enter Chat"
|
|
button below to log on. Your username has been pre-filled from the website that
|
|
sent you here.
|
|
</p>
|
|
|
|
<p>
|
|
This dialog box is added as an experiment to see whether it
|
|
helps iOS devices (iPads and iPhones) to log in to the chat more reliably, by
|
|
having you interact with the page before it connects to the server. Let us
|
|
know in chat if your iPhone or iPad is able to log in this way!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Username</label>
|
|
<input class="input" v-model="username" placeholder="Username" autocomplete="off" autofocus
|
|
:disabled="autoLogin" required>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-link">Enter Chat</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|