Add functionality to tokens

Style more elements
This commit is contained in:
Michał Gdula 2023-05-08 22:02:01 +01:00
parent ffba2b3b7b
commit 10456f60a0
16 changed files with 380 additions and 42 deletions

View file

@ -1,10 +1,32 @@
{% extends "base.html" %}
{% block nav %}
<nav>
<a href="{{ url_for('auth.account', action='logout') }}" class="button">Your Profile</a>
<!-- This is a spacer -->
<span></span>
<a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
</nav>
{% endblock %}
{% block content %}
<h2>Hello, {{ current_user.username }}!</h2>
<a href="{{ url_for('auth.logout') }}">Logout</a>
<div class="block">
<h2>Tokens</h2>
<p>These are your API tokens. Used to link the uploaded scores with your account.</p>
<table>
{% for token in token_list %}
<tr id="token-{{ token.id }}">
<td><button onclick="deleteToken({{ token.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
<td><button onclick="viewToken({{ token.id }})" class="button primary"><i class="ph ph-eye"></i></button></td>
<td class="hidden">{{ token.token }}</td>
</tr>
{% endfor %}
</table>
<button onclick="addToken()" class="button primary">Create New Token</button>
</div>
<h2>Tokens</h2>
{% for token in token_list %}
<p>{{ token.token }}</p>
{% endfor %}
{% endblock %}
<div class="block secondary">
<h2>Danger Zone</h2>
<p>These actions are irreversible. Be careful!</p>
<a href="{{ url_for('auth.account', action='delete') }}" class="button secondary">Delete Account</a>
<a href="{{ url_for('auth.account', action='password') }}" class="button secondary">Reset Password</a>
</div>
{% endblock %}

View file

@ -1,7 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div class="auth">
<div class="block">
<h2>Login</h2>
<p>Welcome back!</p>
<form action="{{ url_for('auth.login') }}" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
@ -9,8 +10,9 @@
</form>
</div>
<div class="auth">
<div class="block">
<h2>Register</h2>
<p>Don't have an account? Register here!</p>
<form action="{{ url_for('auth.register') }}" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>

View file

@ -5,7 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Front Rooms Highscores</title>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
{% assets "scripts" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
{% assets "styles" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
{% endassets %}
@ -13,10 +19,24 @@
<body>
<img src="{{ url_for('static', filename='bg.png') }}" alt="The Front Rooms pause menu" class="background">
<div class="app">
<!-- Get flashed lol -->
<div class="flash">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<p class="{{ category }}" onclick="this.remove()">
<span><i class="ph-bold ph-x"></i></span>
{{ message }}
</p>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<header>
<img src="{{ url_for('static', filename='title.png') }}" alt="The Front Rooms logo" class="title" height="60px">
<nav>
<a href="{{ url_for('views.index') }}" class="button"><i class="ph ph-house"></i></a>
<a href="{{ url_for('views.index') }}" class="button">Scores</a>
<a href="{{ url_for('views.about') }}" class="button"><i class="ph ph-info"></i></a>
<a href="#" class="button"><i class="ph ph-download-simple"></i></a>
@ -34,13 +54,6 @@
{% block nav %}{% endblock %}
</header>
<!-- This is where the flash messages will be displayed -->
<div class="flash">
{% for message in get_flashed_messages() %}
<p>{{ message }}</p>
{% endfor %}
</div>
<main>
{% block content %}{% endblock %}
</main>

View file

@ -0,0 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div class="center-text">
<h2>{{ error }}</h2>
<p>{{ msg }}</p>
<image src="{{ url_for('static', filename='error-images/' + image + '.jpg') }}" alt="Error">
</div>
{% endblock %}