84 lines
No EOL
4.2 KiB
HTML
Executable file
84 lines
No EOL
4.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auth</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css">
|
|
|
|
<script defer src="https://unpkg.com/vue-material"></script>
|
|
<script defer src="./resources/js/auth.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="topbar-container">
|
|
<md-toolbar class="md-accent" md-elevation="5">
|
|
<h3 class="md-title" style="flex: 1">Brainlet</h3>
|
|
<md-button @click="navigateHome()" v-if="loggedInUser.username">Home</md-button>
|
|
</md-toolbar>
|
|
</div>
|
|
<div class="md-layout md-alignment-top-center" v-if="!successfulLogin">
|
|
<md-card class="md-layout-item md-size-25 md-medium-size-100">
|
|
<md-card-header>
|
|
<div class="md-title">{{ modeName }}</div>
|
|
</md-card-header>
|
|
|
|
<md-card-content>
|
|
<div v-if="mode === 'LOGIN' || mode === 'SIGNUP'">
|
|
<div>
|
|
<md-field>
|
|
<label>Username</label>
|
|
<md-input v-model="usernameInput"></md-input>
|
|
</md-field>
|
|
</div>
|
|
<div v-if="mode === 'SIGNUP'">
|
|
<md-field>
|
|
<label>Email</label>
|
|
<md-input v-model="emailInput"></md-input>
|
|
</md-field>
|
|
</div>
|
|
<div>
|
|
<md-field>
|
|
<label>Password</label>
|
|
<md-input v-model="passwordInput" type="password"></md-input>
|
|
</md-field>
|
|
</div>
|
|
</div>
|
|
<div v-if="mode === 'SPECIAL_CODE'">
|
|
<div>
|
|
<p>
|
|
The owner of this Brainlet instance has made it so that signing up requires a special code.
|
|
</p>
|
|
<md-field>
|
|
<label>Special code</label>
|
|
<md-input v-model="specialCodeInput" type="password"></md-input>
|
|
</md-field>
|
|
</div>
|
|
</div>
|
|
</md-card-content>
|
|
|
|
<md-card-actions>
|
|
<md-button v-if="mode === 'SIGNUP'" @click="mode='LOGIN'" class="md-dense">Log in instead</md-button>
|
|
<md-button v-if="mode === 'LOGIN'" @click="mode='SIGNUP'" class="md-dense">Sign up instead</md-button>
|
|
|
|
<md-button v-if="mode === 'SPECIAL_CODE'" class="md-dense" @click="mode='SIGNUP'">Go back</md-button>
|
|
<md-button v-if="mode === 'SIGNUP' || mode === 'SPECIAL_CODE'" class="md-dense md-raised md-primary" @click="performAccountCreation()">Sign up</md-button>
|
|
|
|
<md-button v-if="mode === 'LOGIN'" class="md-dense md-raised md-primary" @click="performTokenCreation()">Log in</md-button>
|
|
|
|
<md-button v-if="mode === 'MANAGE'" class="md-dense md-raised" @click="performTokenRemoval()">Log out</md-button>
|
|
</md-card-actions>
|
|
</md-card>
|
|
|
|
</div>
|
|
|
|
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
|
|
<span>{{ snackbarNotification }}</span>
|
|
<md-button class="md-primary" @click="snackbarButtonClick()">{{ snackbarButtonText }}</md-button>
|
|
</md-snackbar>
|
|
</div>
|
|
</body>
|
|
</html> |