Minor Changes

Author: App Generator

.gitignore

@@ -14,4 +14,5 @@ dist/
 build/
 *.egg-info/
 *.sqlite-journal
-*.sqlite
+*.sqlite
+app/db.sqlite

LICENSE renamed to LICENSE.md

@@ -1,94 +1,120 @@
-# 1. **sample-flask-htmlx**
-Sample flask + htmx implementation 
+# Flask HTMLx Sample
 
-**Table of contents**
-- [1. **sample-flask-htmlx**](#1-sample-flask-htmlx)
- - [1.1. **Prerequisites**](#11-prerequisites)
- - [1.2. **Installation**](#12-installation)
- - [1.3. **Running the application**](#13-running-the-application)
+Open-Source sample that uses Flask as the backend framework and HTMLx for the frontend logic. For newcomers, **Flask** is a leading web framework powered by Python and **HTMLx** is a lighweight JS utility library that allows to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML. 
 
+> Features: 
 
-## 1.1. **Prerequisites** 
-To get started with the application in the machine
+- `Up-to-date` Dependencies
+- Tech Stack:
+ - `Flask`: manages authentication and routing
+ - `HTMLx`: manages forms submit (no JS)
+- Auth: Sign IN, Sign UP
+- Misc: SQLite DB, SQLAlchemy, Forms Validation
 
- 1. Python3 - Make sure python3 and highr=er is installed on your system before proceeding to installation instructions.
- 2. Git - Download and install Git.OSX and linux comes preinstalled with Git. Download and install Git in your windows machine if not installed yet.
- 3. Pip - We will use pip to install required packages to be used in the project. 
- 
+<br />
 
-## 1.2. **Installation**
-**cloning the repository.**
+## **Prerequisites** 
 
-open terminal or command prompt and enter the following command.
+To get started with the application in the machine
 
-``` 
-$ git clone git@github.com:app-generator/sample-flask-htmlx.git
+- `Python3` - Make sure python3 and highr=er is installed on your system before proceeding to installation instructions.
+- `Git` - Download and install Git.OSX and linux comes preinstalled with Git. Download and install Git in your windows machine if not installed yet.
+- `Pip` - We will use pip to install required packages to be used in the project. 
 
- ```
+<br />
 
- or use https:
+## **Installation**
 
- ```
- $ git clone https://github.com/app-generator/sample-flask-htmlx.git
- ```
+> Step 1 - **cloning the repository.**
 
-**Installation instructions.**
+```bash
+$ git clone git@github.com:app-generator/sample-flask-htmlx.git 
+// OR via HTTPS
+$ git clone https://github.com/app-generator/sample-flask-htmlx.git
+```
 
-Create a virtual environment before installing the packages. 
+<br />
 
-```
-$ virtualenv env 
+> Step 2 - Prepare Environment (create virtual environment)
 
+```bash
+$ # Virtualenv modules installation (Unix based systems)
+$ virtualenv env
+$ source env/bin/activate
+$
+$ # Virtualenv modules installation (Windows based systems)
+$ # virtualenv env
+$ # .\env\Scripts\activate
 ```
 
-Activate the virtual environment
+<br />
 
-For unix users:
+> Step 3 - Install Dependencies
 
+```bash
+$ # Install requirements
+$ pip3 install -r requirements.txt
 ```
-$ source env/bin/activate 
 
-```
-
-For windows users:
+<br />
 
-``` 
-C: \Users\username\path to project > env\Scripts\activate 
+> Step 4 - Create Database
 
+```bash
+$ flask shell # launch Flask Shell
+>>> 
+>>> from app import db
+>>> db.create_all()
 ```
 
-Migrate the database using python console from terminal or command prompt.
+<br />
 
-``` 
-$ python 
-```
- or 
+> Step 4 - Create Database
 
-```
- $ python3 
+```bash
+$ flask run
 ```
 
-``` 
->>> from app import create_app,db,models 
+The app should be up & running on address `http://localhost:5000`
 
->>> db.create_all(app=create_app()) 
-```
+<br />
 
+## **HTMLx** 
 
-## 1.3. **Running the application**
-With all the bove steps done its time to run the application. The application is run with the command:
+All forms managed by the app use HTMLx directives. Here is the Login Form Source Code and used HTMLx directives: 
 
-```
-$ python app.py 
+- [hx-swap](https://htmx.org/attributes/hx-swap/) 
+- [hx-post](https://htmx.org/attributes/hx-post/) 
+- [hx-target](https://htmx.org/attributes/hx-target/)
 
-```
-or
+<br />
 
-``` 
-$ python3 app.py 
+```html
+ <form hx-swap="outerHTML" 
+ hx-post="{{ url_for('auth.signin') }}" 
+ hx-push-url="true" 
+ hx-target=".content" 
+ class="p-5 bg-white shadow mh-100 col-sm-8 col-md-6 col-lg-4" novalidate >
+ 
+ <p class="h3 text-center p-2">SignIn</p>
+ 
+ <!-- Truncated content -->
 
-```
+ <div class="form-input p-1">
+ {{form.email.label}}
+ {{form.email(class_="form-control")}}
+ </div>
+
+ <div class="form-input p-1">
+ {{form.password.label}}
+ {{form.password(class_="form-control")}}
+ </div>
+
+ <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
+ </form>
+``` 
 
-Flask server will run on port ``` 5000 ```
+<br />
 
-open the browser and enter the url ``` http://localhost:5000/ ```
+---
+**Flask HTMLx Sample** - Open-Source Sample provided by [AppSeed](https://appseed.us)

README.md

@@ -1,3 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
 from app import create_app,db,models
 
 app = create_app()

app.py

@@ -1,4 +1,8 @@
-from crypt import methods
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
 from flask import Blueprint,render_template,url_for,redirect,request,flash
 from werkzeug.security import generate_password_hash, check_password_hash
 from app import db
@@ -39,7 +43,7 @@ def signup():
  password1 = form.password1.data
  password2 = form.password2.data
 
- if password1!=password2:
+ if password1 != password2:
  form.password2.errors.append("Passwords do not match")
  return redirect(url_for('auth.signup'))
 

app/auth.py

@@ -1,3 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
 from datetime import datetime
 from email.policy import default
 from flask_wtf import FlaskForm
@@ -10,7 +15,7 @@ class SignInForm(FlaskForm):
  email = StringField("Email", validators=[Email(
  "Enter a valid email address"), InputRequired("Email is required")])
  password = PasswordField("Password", validators=[InputRequired("Password is required"), Length(
- min=6, message="Password must be 6 or more characters long")])
+ min=4, message="Password must be 4 or more characters long")])
  remember = BooleanField("Remember Me")
 
 
@@ -20,9 +25,9 @@ class SignUpForm(FlaskForm):
  email = StringField("Email", validators=[Email(
  "Enter a valid email address"), InputRequired("Email is required")])
  password1 = PasswordField("Password", validators=[
- InputRequired("Password is required"), Length(min=6)])
+ InputRequired("Password is required"), Length(min=4)])
  password2 = PasswordField("Confirm Password", validators=[InputRequired(
- ), Length(min=6, message="Password must be 6 or more characters long")])
+ ), Length(min=6, message="Password must be 4 or more characters long")])
 
 
 class ContactForm(FlaskForm):

app/db.sqlite

@@ -1,3 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
 from flask import Blueprint, redirect,render_template,url_for,request,flash
 from flask_login import current_user,login_required
 from app import db
@@ -7,10 +12,12 @@
 
 main = Blueprint('main', __name__)
 
+# Aka HOMEPage
 @main.route('/',methods=['GET','POST'])
 def dashboard():
  form = ContactForm()
  if request.method =='POST':
+ 
  if form.validate_on_submit():
  name = form.name.data
  email = form.email.data
@@ -20,8 +27,12 @@ def dashboard():
  new_message = Contact(name=name,email = email,subject=subject,message=message )
  db.session.add(new_message)
  db.session.commit()
- flash(message="Your feedback has been submitted",category="success")
+
+ flash(message="Your feedback has been submitted", category="success")
+
+ # Aka HOMEPage
  return redirect(url_for('main.dashboard'))
+
  return render_template("dashboard.html",form = form)
 
 @main.route('/profile')

app/forms.py

@@ -1,3 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
 from email.policy import default
 from . import db
 from flask_login import UserMixin

app/main.py

@@ -25,19 +25,18 @@
 </head>
 
 <body class="p-0 m-0">
+ 
  <div class=" content p-0 m-0">
- {% block content %}
 
- {% endblock content %}
+ {% block content %}{% endblock content %}
 
  </div>
+ 
  <!-- Jquery -->
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"
- integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
+
  <!-- Bootstrap5 bundle -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
- integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
- crossorigin="anonymous"></script>
-</body>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
-</html>
+</body> 
+</html>