login.html (2328B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>Marky</title> 7 <link rel="stylesheet" href="/styles.css" /> 8 <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> 9 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 10 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 11 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 12 <script src="/vendor/vue.global.prod.js"></script> 13 <script>if(!window.Vue){var s=document.createElement('script');s.src='https://unpkg.com/vue@3/dist/vue.global.prod.js';document.head.appendChild(s)}</script> 14 </head> 15 <body> 16 <div id="app"> 17 {{HEADER}} 18 <main class="container grid"> 19 <section v-if="view==='login'"> 20 <h2>Login</h2> 21 <form @submit.prevent="login"> 22 <label>Username <input v-model.trim="auth.username" autocomplete="username" required /></label> 23 <label>Password <input v-model="auth.password" type="password" autocomplete="current-password" required /></label> 24 <div class="actions"> 25 <button :disabled="busy">{{ busy ? 'Working…' : 'Login' }}</button> 26 </div> 27 <p v-if="error" class="error">{{ error }}</p> 28 <p class="auth-links" v-if="!disableSignup">No account? <a href="#" @click.prevent="view='signup'">Create one</a></p> 29 </form> 30 </section> 31 <section v-if="view==='signup' && !disableSignup"> 32 <h2>Sign Up</h2> 33 <form @submit.prevent="signup"> 34 <label>Username <input v-model.trim="auth.username" autocomplete="username" required /></label> 35 <label>Password <input v-model="auth.password" type="password" autocomplete="new-password" required /></label> 36 <div class="actions"> 37 <button :disabled="busy">{{ busy ? 'Working…' : 'Create Account' }}</button> 38 </div> 39 <p v-if="error" class="error">{{ error }}</p> 40 <p class="auth-links">Have an account? <a href="#" @click.prevent="view='login'">Log in</a></p> 41 </form> 42 </section> 43 </main> 44 </div> 45 <script src="/app.js"></script> 46 </body> 47 </html>