From 1fa542b0cbf2581b0c77c15e5446e98173055751 Mon Sep 17 00:00:00 2001
From: xemeds <xemeds@protonmail.com>
Date: Sun, 19 Jul 2020 20:01:03 +0000
Subject: [PATCH] Added error messages and made the elements absolute
 positioned

---
 tiny0/forms.py             | 10 ++++++----
 tiny0/routes.py            | 25 +++++++++----------------
 tiny0/static/style.css     | 27 ++++++++++++++++++++++-----
 tiny0/templates/index.html | 23 ++++++++++++++++++-----
 4 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/tiny0/forms.py b/tiny0/forms.py
index 66f867f..f2277b6 100644
--- a/tiny0/forms.py
+++ b/tiny0/forms.py
@@ -12,17 +12,17 @@ def validate_URL(form, field):
 	# If the url contains spaces or does not have any dots
 	if field.data.count(" ") > 0 or field.data.count(".") == 0:
 		# Raise a ValidationError
-		raise ValidationError()
+		raise ValidationError("Invalid URL")
 
 	# If the url starts with a dot after http:// or after https:// or just starts with a dot
 	if field.data.startswith("http://.") or field.data.startswith("https://.") or field.data.startswith("."):
 		# Raise a ValidationError
-		raise ValidationError()
+		raise ValidationError("Invalid URL")
 
 	# If the url ends with a dot and it is the only dot
 	if field.data.endswith(".") and field.data.count(".") == 1:
 		# Raise a ValidationError
-		raise ValidationError()
+		raise ValidationError("Invalid URL")
 
 	# If the URL does not start with http:// and https://
 	if not(field.data.startswith("http://")) and not(field.data.startswith("https://")):
@@ -31,6 +31,8 @@ def validate_URL(form, field):
 
 
 class URLForm(FlaskForm):
-	url = StringField(validators=[DataRequired(), Length(min=4, max=2000), validate_URL])
+	url = StringField(validators=[DataRequired(), 
+		Length(min=4, max=2000, message="URL must be between %(min)d and %(max)d characters"), 
+		validate_URL])
 
 	submit = SubmitField("Shorten")
diff --git a/tiny0/routes.py b/tiny0/routes.py
index a5cab03..cf35a0a 100644
--- a/tiny0/routes.py
+++ b/tiny0/routes.py
@@ -1,4 +1,4 @@
-from flask import render_template, redirect, request, flash, url_for
+from flask import render_template, redirect, request, url_for
 from tiny0 import app
 from tiny0.forms import URLForm
 #from tiny0.models import URLs
@@ -7,21 +7,14 @@ from tiny0.forms import URLForm
 # Index Page
 @app.route("/", methods=['GET', 'POST'])
 def index():
-	# Get request
-	if request.method == "GET":
-		# Create a instance of the form
-		form = URLForm()
+	# Create a instance of the form
+	form = URLForm()
 
+	# If the form was valid
+	if form.validate_on_submit():
+		return "Valid URL: " + form.url.data
+
+	# If the form was invalid or not submitted
+	else:
 		# Return the index page with the form
 		return render_template("index.html", form=form)
-
-	# Post request
-	else:
-		# Create a instance of the form
-		form = URLForm()
-
-		# If the form was valid
-		if form.validate_on_submit():
-			return "Valid URL: " + form.url.data
-
-		return render_template("index.html", form=form)
diff --git a/tiny0/static/style.css b/tiny0/static/style.css
index ac6305b..d921c70 100644
--- a/tiny0/static/style.css
+++ b/tiny0/static/style.css
@@ -10,28 +10,37 @@ body {
 }
 
 .header {
-    color: #ffffff;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 3vh;
     text-align: center;
-    margin-top: 5%;
 }
 
 .title {
-    font-weight: bold;
+    color: #ffffff;
     font-size: 50px;
 }
 
 .desc {
-    margin-top: 1%;
+    color: #ffffff;
 }
 
 .container {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
     background-color: #2c2c2c;
     border-radius: 8px;
     padding: 30px 0px;
     box-shadow: 0px 10px 20px #000000;
     width: 80vw;
     height: auto;
-    margin: 10% auto 0 auto;
+    margin: 35vh auto 0 auto;
 }
 
 .inputs {
@@ -66,3 +75,11 @@ body {
     background: #7b59a5;
     border-color: #7b59a5;
 }
+
+.error-message {
+    color: #ffffff;
+    text-align: center;
+    font-size: 100%;
+    padding: 0;
+    margin: 2% 0 -1% 0;
+}
diff --git a/tiny0/templates/index.html b/tiny0/templates/index.html
index 3ea3e38..3063b0e 100644
--- a/tiny0/templates/index.html
+++ b/tiny0/templates/index.html
@@ -1,11 +1,19 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<body onload="typeTitle()">
-		<div class="header">
-			<h1 id="title" class="title"></h1>
-			<h1 id="desc" class="desc"></h1>
-		</div>
+	{% if form.url.errors %}
+		<body>
+			<div class="header">
+				<h1 class="title">tiny0</h1>
+				<h1 class="desc">Custom URL Shortener</h1>
+			</div>
+	{% else %}
+		<body onload="typeTitle()">
+			<div class="header">
+				<h1 id="title" class="title"></h1>
+				<h1 id="desc" class="desc"></h1>
+			</div>
+	{% endif %}
 
 		<div class="container">
 			<form method="POST" action="">
@@ -15,6 +23,11 @@
 					{{ form.submit(class="submit") }}
 				</div>
 			</form>
+			{% if form.url.errors %}
+				{% for error in form.url.errors %}
+					<p class="error-message">{{ error }}</p>
+				{% endfor %}
+			{% endif %}
 		</div>
 
 		<script>