Переписан стиль фронтенда

This commit is contained in:
2021-07-16 11:51:37 +03:00
parent 71e00fab74
commit d76e65b674
14 changed files with 23838 additions and 115 deletions

View File

@@ -5,7 +5,11 @@ from flask_mail import Mail
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
app = Flask("__name__", template_folder="dyxless/templates")
app = Flask(
"__name__",
template_folder="dyxless/templates",
static_folder="dyxless/static",
)
db = SQLAlchemy()
mail = Mail()

View File

@@ -8,6 +8,7 @@ from flask import (
request,
flash,
current_app,
Markup,
)
from werkzeug.security import check_password_hash
from flask_login import current_user, login_user, logout_user
@@ -37,11 +38,12 @@ def login():
user = User.query.filter_by(email=email).first()
if not user or not check_password_hash(user.password, password):
flash("Пожалуйста, проверьте введенные данные и попробуйте снова")
flash("Неверный логин или пароль", "is-danger")
return redirect(url_for("auth.login"))
elif not user.is_confirmed:
flash(
"Аккаунт еще не активирован. Пожалуйста, проверьте вашу почту"
"Аккаунт еще не активирован. Пожалуйста, проверьте вашу почту",
"is-warning",
)
return redirect(url_for("auth.login"))
@@ -71,13 +73,19 @@ def signup():
user = User.query.filter_by(email=email).first()
if user:
flash("Указанная почта уже используется")
login_url = url_for("auth.login")
flash(
Markup(
f"Указанная почта уже используется. <a href='{login_url}'>Перейти к странице входа</a>"
),
"is-danger",
)
return redirect(url_for("auth.signup"))
user = User.query.filter_by(email=username).first()
if user:
flash("Указанное имя уже используется")
flash("Указанное имя уже используется", "is-danger")
return redirect(url_for("auth.signup"))
new_user = User(
@@ -102,6 +110,11 @@ def signup():
),
)
flash(
"На вашу почту была выслана ссылка для подтверждения регистрации",
"is-success",
)
return redirect(url_for("auth.login"))
@@ -130,14 +143,14 @@ def confirm_email(token):
try:
email = confirm_token(token)
except:
flash("Ссылка подтверждения невалидна или устарела", "danger")
flash("Ссылка подтверждения невалидна или устарела", "is-danger")
user = User.query.filter_by(email=email).first_or_404()
if user.is_confirmed:
flash("Аккаунт уже подтвержден", "success")
flash("Аккаунт уже подтвержден", "is-success")
else:
user.is_confirmed = True
db.session.commit()
flash("Ваш аккаунт подвтержден!", "success")
flash("Ваш аккаунт подвтержден!", "is-success")
return redirect(url_for("auth.login"))

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

1
dyxless/static/css/bulma-rtl.min.css vendored Normal file

File diff suppressed because one or more lines are too long

11811
dyxless/static/css/bulma.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

1
dyxless/static/css/bulma.min.css vendored Normal file

File diff suppressed because one or more lines are too long

30
dyxless/static/js/base.js Normal file
View File

@@ -0,0 +1,30 @@
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
const $notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
});
});
});

View File

@@ -1,57 +1,78 @@
<!DOCTYPE html>
<html>
<html class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dyxless</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dyxless</title>
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/bulma.min.css') }}" rel="stylesheet" type="text/css">
<script src="{{ url_for('static', filename = 'js/base.js') }}"></script>
<script src="https://kit.fontawesome.com/6bc4cd9a8e.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="hero is-primary is-fullheight">
<body>
<header class="navbar has-shadow is-fixed-top">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('main.index') }}">
Dyxless
</a>
<div class="hero-head">
<nav class="navbar">
<div class="container">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('main.index') }}" class="navbar-item">
Домой
<div id="navbarMain" class="navbar-menu">
<div class="navbar-end">
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="navbar-item">
Войти
</a>
<span class="navbar-item">
<a href="{{ url_for('auth.signup') }}" class="button is-success is-outlined">
<strong>Зарегистрироваться</strong>
</a>
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="navbar-item">
Вход
</span>
{% else %}
<div class="navbar-item has-dropdown is-hoverable">
<a href="{{ url_for('main.profile') }}" class="navbar-link">
{{ current_user.username }}
</a>
<a href="{{ url_for('auth.signup') }}" class="navbar-item">
Регистрация
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="navbar-item">
Выйти
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="navbar-item">
{{ current_user.name }}
</a>
{% endif %}
<div class="navbar-dropdown is-right">
<a href="{{ url_for('main.profile') }}" class="navbar-item">
Профиль
</a>
<hr class="dropdown-divider">
<a href="{{ url_for('auth.logout') }}" class="navbar-item">
Выйти
</a>
</div>
</div>
{% endif %}
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
{% block content %}
{% endblock %}
</div>
</div>
</section>
</body>
</header>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, text in messages%}
<div class="notification {{ category }}">
<button class="delete"></button>
{{ text }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}
{% endblock %}
</body>
</html>

View File

@@ -1,10 +1,16 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title">
Dyxless
</h1>
<h2 class="subtitle">
Заготовка web-приложения
</h2>
<div class="container has-text-centered">
<section class="hero is-medium">
<div class="hero-body">
<p class="title">
Dyxless
</p>
<p class="subtitle">
Заготовка web-приложения
</p>
</div>
</section>
</div>
{% endblock %}

View File

@@ -1,36 +1,44 @@
{% extends "base.html" %}
{% block content %}
<div class="column is-4 is-offset-4">
<h3 class="title">Вход</h3>
<div class="box">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="notification is-danger">
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/login">
<div class="field">
<div class="control">
<input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-large" type="password" name="password" placeholder="Пароль">
<div class="column is-4 is-offset-4">
<div class="container">
<section class="hero is-medium">
<form class="box" action="/login" method="POST">
<h3 class="title">Вход</h3>
<div class="field">
<label class="label">Email</label>
<p class="control has-icons-left">
<input class="input" type="email" name="email" placeholder="yourmail@example.com" required>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
</p>
</div>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox">
Запомнить меня
</label>
</div>
<button class="button is-block is-info is-large is-fullwidth">Войти</button>
</form>
<div class="field">
<label class="label">Пароль</label>
<p class="control has-icons-left">
<input class="input" type="password" name="password" placeholder="********" required>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox">
Запомнить меня
</label>
</div>
<div class="field">
<p class="control">
<button class="button is-success is-outlined is-fullwidth" type="submit">Войти</button>
</p>
</div>
</form>
</section>
</div>
</div>
{% endblock %}

View File

@@ -1,7 +1,16 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title">
Добро пожаловать, {{ current_user.username }}!
</h1>
<div class="container has-text-centered">
<section class="hero is-medium">
<div class="hero-body">
<p class="title">
Профиль
</p>
<p class="subtitle">
Добро пожаловать, {{ current_user.username }}!
</p>
</div>
</section>
</div>
{% endblock %}

View File

@@ -1,37 +1,43 @@
{% extends "base.html" %}
{% block content %}
<div class="column is-4 is-offset-4">
<h3 class="title">Регистрация</h3>
<div class="box">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="notification is-danger">
{{ messages[0] }}<a href="{{ url_for('auth.login') }}">Перейти к странице входа</a>.
</div>
{% endif %}
{% endwith %}
<form method="POST" action="/signup">
<div class="field">
<div class="control">
<input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
<div class="container">
<section class="hero is-medium">
<form class="box" method="POST" action="/signup">
<div class="field">
<label class="label">Email</label>
<p class="control has-icons-left">
<input class="input" type="email" name="email" placeholder="yourmail@example.com" required>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
</p>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-large" type="text" name="username" placeholder="Имя пользователя" autofocus="">
<div class="field">
<label class="label">Никнейм</label>
<p class="control has-icons-left">
<input class="input" type="username" name="username" placeholder="YourUsername" required>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</dpiv>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-large" type="password" name="password" placeholder="Пароль">
<div class="field">
<label class="label">Пароль</label>
<p class="control has-icons-left">
<input class="input" type="password" name="password" placeholder="********" required>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
</div>
<button class="button is-block is-info is-large is-fullwidth">Зарегистрироваться</button>
</form>
<button class="button is-success is-outlined is-fullwidth">Зарегистрироваться</button>
</form>
</section>
</div>
</div>
{% endblock %}