feature: added forms for user handling

README.md

@@ -4,13 +4,13 @@ This the the repository for my personal blog to eventually publish my various pa
 
 * ArrowJS:
 
-  A reactive library with no build tools. Some of the benefits of component based rendering for organization while loading fast with cached js files. 
+  A reactive library with no build tools. Some of the benefits of component based rendering for organization while loading fast with cached js files. For things like forms, navbars, footers which don't change much it uses this
 * HTMX:
 
-  For Ajax rquests and learning a new library
+  For Ajax rquests and learning a new library. For data requests and form input handling it uses this library.
 * Flask:
 
-  For learning a new static file web server that can make use of python's vast module library for data science in the future
+  For learning a new static file web server that can make use of python's vast module library for data science in the future. Has nice support for form validation, login services, and connecting to the persistance layer.
 
 This project supports a user system for multiple authors and comments. The contact me form can be used in the eventual implementation of the admin dashboard to control the role users have. 
 

app/main/routes.py

@@ -6,6 +6,8 @@
 
 routesBlueprint = Blueprint('main', __name__)
 
+# Navigation Bar routes
+
 @routesBlueprint.route('/')
 def index():
     return render_template("index.html")
@@ -29,3 +31,35 @@ def aboutMe():
 @routesBlueprint.route('/ContactMe')
 def contactMe():
     return render_template("contact.html")
+
+# Form Routes
+
+# Login existing user
+
+@routesBlueprint.route('/LoginForm')
+def loginForm():
+    return render_template("login.html")
+
+# Form for a new user
+
+@routesBlueprint.route('/RegisterForm')
+def registerForm():
+    return render_template("register.html")
+
+# Route for form to submit the change password request to an email
+
+@routesBlueprint.route('/ForgotPasswordForm')
+def forgotPasswordForm():
+    return render_template("forgotPassword.html")
+
+# Route for the link sent in an email to change the password
+
+@routesBlueprint.route('/ChangeForgottenPasswordForm')
+def changeForgottenPasswordForm():
+    return render_template("changeForgottenPassword.html")
+
+# Change the password of a logged in user
+
+@routesBlueprint.route('/ChangePasswordForm')
+def changePasswordForm():
+    return render_template("changePassword.html")

app/static/js/components/forms/changePasswordForm.js

@@ -0,0 +1,24 @@
+import {html} from "../../packages/arrow.js"
+
+const contactForm = html`
+    <form>
+        <div class="formGroup">
+            <label for="CurrentPassword">Current Password</label>
+            <input type="password" name="CurrentPassword" id="inputCurrentPassword"/>
+        </div>
+        <div class="formGroup">
+            <label for="NewPassword">New Password</label>
+            <input type="password" name="NewPassword" id="inputNewPassword">
+        </div>
+        <div class="formGroup">
+            <label for="VerifyNewPassword">Verify New Password</label>
+            <input type="password" name="VerifyNewPassword" id="inputVerifyNewPassword">
+        </div>
+        <div class="formGroup">
+            <button type="submit">Send</button>
+            <button type="reset">Clear</button>
+        </div>
+    </form>
+`
+
+export default contactForm;

app/static/js/components/contactForm.js → app/static/js/components/forms/contactForm.js

@@ -1,4 +1,4 @@
-import {html} from "../packages/arrow.js"
+import {html} from "../../packages/arrow.js"
 
 
 

app/static/js/components/contentForm.js → app/static/js/components/forms/contentForm.js

@@ -1,4 +1,4 @@
-import {html, reactive, watch} from "../packages/arrow.js"
+import {html, reactive, watch} from "../../packages/arrow.js"
 
 
 const postOptions = html`

app/static/js/components/forms/forgotPasswordForm.js

@@ -0,0 +1,16 @@
+import {html} from "../../packages/arrow.js"
+
+const contactForm = html`
+    <form>
+        <div class="formGroup">
+            <label for="Email">Email</label>
+            <input type="password" name="VerifyNewPassword" id="inputVerifyNewPassword">
+        </div>
+        <div class="formGroup">
+            <button type="submit">Send</button>
+            <button type="reset">Clear</button>
+        </div>
+    </form>
+`
+
+export default contactForm;

app/static/js/components/forms/loginForm.js

@@ -0,0 +1,20 @@
+import {html} from "../../packages/arrow.js"
+
+const loginForm = html`
+    <form>
+        <div class="formGroup">
+            <label for="Username">Username</label>
+            <input type="text" name="Username" id="inputUsername" required/>
+        </div>
+        <div class="formGroup">
+            <label for="Pasword">Email</label>
+            <input type="password" name="Password" id="inputPassword" required>
+        </div>
+        <div class="formGroup">
+            <button type="submit">Send</button>
+            <button type="reset">Clear</button>
+        </div>
+    </form>
+`
+
+export default loginForm;

app/static/js/components/forms/registerForm.js

@@ -0,0 +1,28 @@
+import {html} from "../../packages/arrow.js"
+
+const loginForm = html`
+    <form id="registerForm">
+        <div class="formGroup">
+            <label for="Username">Username</label>
+            <input type="text" name="Username" id="inputUsername" required/>
+        </div>
+        <div class="formGroup">
+            <label for="Email">Email</label>
+            <input type="email" name="Email" id="inputEmail" required>
+        </div>
+        <div class="formGroup">
+            <label for="Pasword">Password</label>
+            <input type="password" name="Password" id="inputPassword" required>
+        </div>
+        <div class="formGroup">
+            <label for="VerifyPasword">Verify Password</label>
+            <input type="password" name="VerifyPassword" id="inputVarifyPassword" required>
+        </div>
+        <div class="formGroup">
+            <button type="submit">Send</button>
+            <button type="reset">Clear</button>
+        </div>
+    </form>
+`
+
+export default loginForm;

app/static/js/components/navbar.js

@@ -1,6 +1,5 @@
 import {html} from "../packages/arrow.js"
 
-
 const navbar = html`
     <nav>
         <a href="/">
@@ -36,6 +35,9 @@ const navbar = html`
                 </a>
             </li>
         </ul>
+        <ul>
+
+        </ul>
     </nav>
 `
 export default navbar;

app/templates/login.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <script src="{{ url_for('static', filename='js/packages/htmx.min.js') }}"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/animations.css') }}">
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/style.css') }}"></link>
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/inputStyling.css') }}"></link>
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/forms/formsGeneralStyling.css') }}"></link>
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/pages/contactme/contactMeLayout.css') }}"></link>
+</head>
+<body>
+    <div id="navbar-root">
+    </div>
+    <hr class="nav-line-break">
+    <div id="content-root">
+    </div>
+    <script type="module">
+        //Imports
+        import navbar from "{{ url_for('static', filename='js/components/navbar.js') }}"
+        import loginForm from "{{ url_for('static', filename='js/components/loginForm.js') }}"
+
+        //Grabs elements in DOM to attach to
+        const headerRoot = document.getElementById("navbar-root")
+        const contentRoot = document.getElementById("content-root")
+
+        //attaches content to DOM
+        navbar(headerRoot)
+        loginForm(contentRoot)
+    </script>
+</body>
+</html>

app/templates/register.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+    <script src="{{ url_for('static', filename='js/packages/htmx.min.js') }}"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/animations.css') }}">
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/style.css') }}"></link>
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/inputStyling.css') }}"></link>
+    <link rel="stylesheet" href= "{{ url_for('static', filename='css/forms/formsGeneralStyling.css') }}"></link>
+</head>
+<body>
+    <div id="navbar-root">
+    </div>
+    <hr class="nav-line-break">
+    <div id="content-root">
+    </div>
+    <script type="module">
+        //Imports
+        import navbar from "{{ url_for('static', filename='js/components/navbar.js') }}"
+        import registerForm from "{{ url_for('static', filename='js/components/registerForm.js') }}"
+
+        //Grabs elements in DOM to attach to
+        const headerRoot = document.getElementById("navbar-root")
+        const contentRoot = document.getElementById("content-root")
+
+        //attaches content to DOM
+        navbar(headerRoot)
+        registerForm(contentRoot)
+    </script>
+</body>
+</html>

app/users/controller.py

@@ -3,6 +3,7 @@
 from app.users.form import LoginForm, RegistrationForm
 from app.users.model import User
 from flask_login import LoginManager
+from app import db
 
 login = LoginManager()
 
@@ -31,3 +32,26 @@ def logout():
     logout_user()
     return redirect(url_for('index'))
 
+@userBlueprint.route('/register', methods=["GET", "POST"])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('index'))
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        user = User(username=form.username.data, email=form.email.data)
+        user.set_password(form.password.data)
+
+        try:
+            db.session.add(user)
+            db.session.commit()
+            flash('User registered')
+            return redirect(url_for('login'))
+        except Exception as e:
+            print(f"An error occurred: {e}")
+
+        return render_template('register.html', title='Register', form=form)
+
+@app.route('/index')
+@login_required
+def index():
+    return "Hello, " + current_user.username