demo login form

charalambospapa · Mar 18, 2021 · 5c650a6 · 5c650a6
1 parent 5a85ac9
commit 5c650a6
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 5 deletions.
diff --git a/config.py b/config.py
@@ -0,0 +1,4 @@
+import os
+
+class Config(object):
+	SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-never-guess-this'
diff --git a/myapp/__init__.py b/myapp/__init__.py
@@ -1,5 +1,6 @@
 from flask import Flask
+from config import Config
 
 app = Flask(__name__)
-
+app.config.from_object(Config)
 from myapp import routes
diff --git a/myapp/forms.py b/myapp/forms.py
@@ -0,0 +1,9 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, BooleanField, SubmitField
+from wtforms.validators import DataRequired,Length
+
+class LoginForm(FlaskForm):
+	username = StringField('Username', validators=[DataRequired(),Length(min=4)]) #first arguments is a label, the second is a LIST of validators (don't forget () ) 
+	password = PasswordField('Password', validators=[DataRequired()])
+	remember_me = BooleanField('Remember Me')
+	submit = SubmitField('Sign In')
diff --git a/myapp/routes.py b/myapp/routes.py
@@ -1,5 +1,6 @@
-from flask import render_template
+from flask import render_template, flash, redirect, url_for
 from myapp import app
+from myapp.forms import LoginForm
 @app.route('/')
 @app.route('/index')
 def index():
@@ -15,3 +16,12 @@ def index():
 		},
 	]
 	return render_template('index.html', title='Home', user=user, posts=posts)
+
+@app.route('/login', methods=['GET','POST'])
+def login():
+	form = LoginForm()
+	if form.validate_on_submit():
+		flash('Login requested for user {}, remember_me={}'.format(
+			form.username.data, form.remember_me.data))
+		return redirect(url_for('index'))
+	return render_template('login.html', title='Sign In', form=form)
diff --git a/myapp/templates/base.html b/myapp/templates/base.html
@@ -6,9 +6,23 @@
 		{% else %}
 		<title> Welcome to SocialBlog</title>
 		{% endif %}
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 	</head>
 	<body>
-		<div>SocialBlog: <a href="index">Home</a></div>
+		<div>
+			SocialBlog:
+			<a href="{{ url_for('index') }}">Home</a>
+			<a href="{{ url_for('login') }}">Login</a>
+		</div>
+		{% with messages = get_flashed_messages() %}
+		{% if messages %}
+		<ul>
+			{% for message in messages %}
+			<li> {{ message }}</li>
+			{% endfor %}
+		</ul>
+		{% endif %}
+		{% endwith %}
 		{% block content %}{% endblock %}
 	</body>
-</html>
+</html>
diff --git a/myapp/templates/index.html b/myapp/templates/index.html
@@ -1,8 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
+	<div class="row justify-content-md-center">
 		<h1>Hello, {{ user.username }}</h1>
+	</div>	
 		{% for post in posts %}
-		<div><p>{{ post.author.username }} says: <strong>{{ post.body }} </strong></p></div>	
+		<div><p>{{ post.author.username }} says: <strong>{{ post.body }}</strong></p></div>	
 		{% endfor %}
 {% endblock %}
diff --git a/myapp/templates/login.html b/myapp/templates/login.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block content %}
+	<h1 class="row justify-content-md-center"> Sign in </h1>
+	<div class="row justify-content-md-center">
+		<form action="" method="post"> <!-- action:indicates what URL browser should use when submiting the information of the form . action and method are called attributes -->
+			{{ form.hidden_tag() }}
+			<p>
+				{{ form.username.label }} <br>
+				{{ form.username(size=32) }}<br>
+				{% for error in form.username.errors %}
+				<span style="color:red;"> {{ error }}</span>
+				{% endfor %}
+			</p>
+			<p>
+				{{ form.password.label }} <br>
+				{{ form.password(size=32) }}<br> 
+				{% for error in form.password.errors %}
+				<span style="color:red;"> {{ error }}</span>
+				{% endfor %}
+			</p>
+			<p> {{ form.remember_me() }} {{ form.remember_me.label }} </p>
+			<p> {{ form.submit() }} </p>
+
+		</form>
+	</div>
+{% endblock %}