add real time update support

v1.0

README.md

@@ -1,11 +1,20 @@
-# Flask Simple From 
-This is a simple flask register-form application designed to run in multiple ways: 
+# flask-simple-form
+This is a simple flask register-form application designed to run in multiple ways
+
+# Notes
+* This app use _[MongoDB](https://www.mongodb.com/)_ as database supported by _[Flask-MongoAlchemy](https://pythonhosted.org/Flask-MongoAlchemy/)_ extension
+=> So you have to install **MongoDB** database to run this locally 
+
+* uses _[Flask-SocketIO](https://github.com/miguelgrinberg/Flask-SocketIO)_ along with _Ajax_ for real time update
+
 
 # Overview
 ![index](/img/index.png)
+![registered](/img/registered.png)
 
 # Running this app
 
+
 This app is designed to run in different ways:
 1. As a standalone app running on your machine
 
@@ -15,11 +24,13 @@ This app is designed to run in different ways:
 2. `git clone` the project then `cd` into the directory
 3. run `virtualenv -p /usr/bin/python3 venv`or `python -m venv venv` to create a virtual environment
 4. activate it using `source venv/bin/activate`
-5. `pip install -r requirements/dev.txt` to install the app libaries and it dependencies
+5. `pip install -r requirements/prod_local.txt.txt` to install the app libaries and it dependencies
+6. install MongoDB database `sudo apt-get install mongodb`
+7. check your database is installed and print its version using `mongo --version`
 
 ### running the app
 
 * After installing, you need to set your application _environment variable_ by running `export FLASK_APP=app.py`
-* run the server using `flask run --reload --debugger`
-* Access the running app in a browser at the URL written to the console (most likely http://localhost:5000)
+* run the server using the script file `run.sh` by typing `./run`
+* Access the running app in a browser at the URL written to the console (most likely http://0.0.0.0:5000)
 

app.py

@@ -1,5 +1,6 @@
 from app import app
+from app.views import socketio
 
 
 if __name__ == '__main__':
-    app.run(debug=True)
+    socketio.run(app)

app/REAMDE.md

@@ -0,0 +1 @@
+## This folder _contains the application  files_ 

app/__init__.py

@@ -1,8 +1,11 @@
 from flask import Flask
 from app.config import Config
+from flask_mongoalchemy import MongoAlchemy
+
 
 app = Flask(__name__)
 app.config.from_object(Config)
+db = MongoAlchemy(app)
 
 
 from app import models, views

app/config.py

@@ -1,5 +1,11 @@
 import os
 
+# path of this file
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+
 class Config(object):
 
     SECRET_KEY = os.environ.get('SECRET_KEY') or 'secret'
+    # sets MongoDB database
+    MONGOALCHEMY_DATABASE = 'flask-simple-form'

app/forms.py

@@ -0,0 +1,22 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, SubmitField, PasswordField
+from wtforms.validators import DataRequired, Email, ValidationError
+from app.models import Users as User
+
+
+class UserForm(FlaskForm):
+    first_name = StringField('First name:', validators=[DataRequired()])
+    last_name = StringField('Last:', validators=[DataRequired()])
+    email = StringField('Email:', validators=[DataRequired(), Email()])
+    password = PasswordField('Password:', validators=[DataRequired()])
+    company = StringField('Company: ')
+    city = StringField('City: ')
+    state = StringField('State :')
+    submit = SubmitField("submit")
+
+
+    def validate_email(self, email):
+        user = User.query.filter(User.email == email.data).first()
+        if user is not None:
+            print('This email is taken !!')
+            raise ValidationError('This email is taken !!')

app/models.py

@@ -0,0 +1,30 @@
+from app import db
+from werkzeug.security import generate_password_hash
+from werkzeug.security import check_password_hash
+
+
+class Users(db.Document):
+    first_name = db.StringField(max_length=64)
+    last_name = db.StringField(max_length=64)
+    email = db.StringField(max_length=64)
+    password = db.StringField(max_length=64)
+    password_hash = db.StringField(max_length=128, required=False)
+    company = db.StringField(max_length=128, required=False)
+    city = db.StringField(max_length=128, required=False)
+    state = db.StringField(required=False)
+
+    # get user full_name
+    def full_name(self):
+        return str(self.first_name + " " + self.last_name)
+
+    # set_password
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+
+    # check_password
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
+
+    # for User object representation
+    def __repr__(self):
+        return "< User : {} {}>".format(self.first_name, self.last_name)

app/static/REMADE.md

@@ -0,0 +1 @@
+## This folder contains __Stylesheets JavaScript_ files 

app/static/css/base.css

@@ -70,6 +70,7 @@ h2 {
 }
 
 
+
 table {
 	table-layout: fixed;
 	width: 800px;

app/static/css/style.css

@@ -52,6 +52,10 @@ h1 {
 }
 
 
+#red {
+    color: #d10046;
+}
+
 table {
 	table-layout: fixed;
 	width: 800px;

app/templates/base.html

@@ -7,6 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Flask Simple Form">
     <meta name="author" content="Ahmed Nouira">
+    {% block refresh %}
+    {% endblock %}
     <link rel="shortcut icon" href="{{url_for('static', filename='favicon.ico')}}" type="image/x-icon">
 
     <title>Flask Simple Form </title>
@@ -16,6 +18,7 @@
 
     <!-- Use the maxcdn network to get Bootstrap -->
     <!-- Latest compiled and minified CSS -->
+
     <link rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
       integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
@@ -40,7 +43,5 @@
 
 {% endblock %}
 
-
-
     </body>
     </html>