Skip to content

Commit d14edbf

Browse files
b3nhardb3nhard
committed
Created basic UI elements
1 parent 0ca1a91 commit d14edbf

File tree

7 files changed

+120
-20
lines changed

7 files changed

+120
-20
lines changed

‎app/templates/base.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
</title>
1010
<!-- Bootstrap5 CSS -->
1111
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
12+
<link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
1213
<!-- HTMX -->
13-
<script src="https://unpkg.com/browse/htmx.org@1.7.0"></script>
14+
<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script>
1415
</head>
15-
<body>
16-
<div>
16+
<body class="p-0 m-0">
17+
<div class="p-0 m-0">
1718
{% block content %}
1819

1920
{% endblock content %}

‎app/templates/dashboard.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
{% extends 'base.html' %}
2-
{% block title %} Home{% endblock title %}
1+
{% extends "base.html" %}
32

43
{% block content %}
5-
6-
{% endblock content %}
4+
<h1 class="title">
5+
Flask Login Example
6+
</h1>
7+
<h2 class="subtitle">
8+
Easy authentication and authorization in Flask.
9+
</h2>
10+
<button><a href="{{url_for('auth.signin')}}" >Login</a> </button>
11+
{% endblock %}

‎app/templates/login.html‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎app/templates/profile.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@
22
{% block title %}Profile{% endblock title %}
33

44
{% block content %}
5-
5+
<div class="container">
6+
<h2 class="text-center text-dark">Welcome Back! {{user.name}}</h2>
7+
<a class="btn btn-danger" href="{{url_for('auth.signout')}}" hx-target=".container" hx-swap="innerHTML" >Sign Out</a>
8+
</div>
69
{% endblock content %}

‎app/templates/register.html‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎app/templates/signin.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{% extends 'base.html' %}
2+
{% block title %}SignIn{% endblock title %}
3+
4+
{% block content %}
5+
<div class="h-screen d-flex d-sm-flex align-items-center justify-content-center">
6+
<form method="post" hx-swap=""outerHTML hx-post="{{ url_for('auth.signin') }}" class="p-5 shadow-sm bg-success h-max col-sm-8 col-md-6 col-lg-4" novalidate >
7+
<p class="h3 text-center p-2">SignIn</p>
8+
{% with messages = get_flashed_messages(with_categories=true) %}
9+
{% if messages %}
10+
{% for message in messages%}
11+
<div class="p-2 text-{{message[0]}}">
12+
{{ message[1] }}
13+
</div>
14+
{% endfor %}
15+
{% endif %}
16+
{% endwith %}
17+
{{form.csrf_token}}
18+
<div class="form-input p-1">
19+
{{form.email.label}}
20+
{{form.email(class_="form-control")}}
21+
{% if form.email.errors %}
22+
{% for error in form.email.errors %}
23+
<p class="text-danger">{{error}}</p>
24+
{% endfor %}
25+
{% endif %}
26+
</div>
27+
<div class="form-input p-1">
28+
{{form.password.label}}
29+
{{form.password(class_="form-control")}}
30+
{% if form.password.errors %}
31+
{% for error in form.password.errors %}
32+
<p class="text-danger">{{error}} </p>
33+
{% endfor %}
34+
{% endif %}
35+
</div>
36+
<div class="p-2 col-md-12 text-center">
37+
<button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
38+
</div>
39+
</form>
40+
</div>
41+
{% endblock content %}

‎app/templates/signup.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{% extends 'base.html' %}
2+
{% block title %}SignUp{% endblock title %}
3+
4+
{% block content %}
5+
6+
<div class="h-screen d-md-flex align-items-center justify-content-center">
7+
<form id="form" method="post" hx-post="{{ url_for('auth.signup') }}" class="p-5 col-md-4 shadow-sm bg-success h-max"
8+
novalidate>
9+
<p class="h3 text-center p-2">SignUp</p>
10+
{% with messages = get_flashed_messages(with_categories=true) %}
11+
{% if messages %}
12+
{% for message in messages%}
13+
<div class="p-2 text-{{message[0]}}">
14+
{{ message[1] }}. Go to <a href="{{ url_for('auth.signin') }}">login page</a>.
15+
</div>
16+
{% endfor %}
17+
{% endif %}
18+
{% endwith %}
19+
20+
{{form.csrf_token}}
21+
<div class=" p-3">
22+
{{form.name.label}}
23+
{{form.name(class_="form-control")}}
24+
{% if form.name.errors %}
25+
{% for error in form.name.errors %}
26+
<p class="text-danger">{{error}}</p>
27+
{% endfor %}
28+
{% endif %}
29+
</div>
30+
<div class=" p-3">
31+
{{form.email.label}}
32+
{{form.email(class_="form-control")}}
33+
{% if form.email.errors %}
34+
{% for error in form.email.errors %}
35+
<p class="text-danger">{{error}}</p>
36+
{% endfor %}
37+
{% endif %}
38+
</div>
39+
<div class=" p-3">
40+
{{form.password1.label}}
41+
{{form.password1(class_="form-control")}}
42+
{% if form.password1.errors %}
43+
{% for error in form.password1.errors %}
44+
<p class="text-danger">{{error}}</p>
45+
{% endfor %}
46+
{% endif %}
47+
</div>
48+
<div class=" p-3">
49+
{{form.password2.label}}
50+
{{form.password2(class_="form-control")}}
51+
{% if form.password2.errors %}
52+
{% for error in form.password2.errors %}
53+
<p class="text-danger">{{error}}</p>
54+
{% endfor %}
55+
{% endif %}
56+
</div>
57+
<div class="p-2 col-md-12 text-center">
58+
<button class="btn p-2 px-3 rounded btn-primary " type="submit">SignUp</button>
59+
</div>
60+
</form>
61+
</div>
62+
{% endblock content %}

0 commit comments

Comments
 (0)