├── README.md
├── SSLChatApp
    ├── app.py
    ├── requirements.txt
    ├── sslchat.sql
    ├── static
    │   ├── image
    │   │   ├── bgone.jpg
    │   │   └── bgtwo.jpg
    │   └── js
    │   │   ├── jquery-1.9.0.js
    │   │   └── script.js
    └── templates
    │   ├── chat_room.html
    │   ├── chats.html
    │   ├── home.html
    │   ├── includes
    │       ├── _flashmsg.html
    │       ├── _formhelpers.html
    │       └── _navbar.html
    │   ├── layout.html
    │   ├── login.html
    │   ├── register.html
    │   └── test.html
└── Screenshot View
    ├── 1 Home.PNG
    ├── 2 Sign Up Form.PNG
    ├── 3 Login Form.PNG
    ├── 4 Login Welcome.PNG
    └── 5 Live Chat.PNG


/README.md:
--------------------------------------------------------------------------------
1 | # Flask-SSLChatApp


--------------------------------------------------------------------------------
/SSLChatApp/app.py:
--------------------------------------------------------------------------------
  1 | from flask import Flask, render_template, flash, redirect, url_for, session, request, logging
  2 | from flask_mysqldb import MySQL
  3 | from wtforms import Form, StringField, TextAreaField, PasswordField, validators
  4 | from passlib.hash import sha256_crypt
  5 | from functools import wraps
  6 | import os
  7 | 
  8 | from wtforms.fields.html5 import EmailField
  9 | 
 10 | app = Flask(__name__)
 11 | app.secret_key = os.urandom(24)
 12 | 
 13 | # Config MySQL
 14 | mysql = MySQL()
 15 | app.config['MYSQL_HOST'] = 'localhost'
 16 | app.config['MYSQL_USER'] = 'root'
 17 | app.config['MYSQL_PASSWORD'] = 'mohsin'
 18 | app.config['MYSQL_DB'] = 'sslchat'
 19 | app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
 20 | 
 21 | # Initialize the app for use with this MySQL class
 22 | mysql.init_app(app)
 23 | 
 24 | 
 25 | def is_logged_in(f):
 26 |     @wraps(f)
 27 |     def wrap(*args, **kwargs):
 28 |         if 'logged_in' in session:
 29 |             return f(*args, *kwargs)
 30 |         else:
 31 |             flash('Unauthorized, Please logged in', 'danger')
 32 |             return redirect(url_for('login'))
 33 |     return wrap
 34 | 
 35 | 
 36 | def not_logged_in(f):
 37 |     @wraps(f)
 38 |     def wrap(*args, **kwargs):
 39 |         if 'logged_in' in session:
 40 |             flash('Unauthorized, You logged in', 'danger')
 41 |             return redirect(url_for('index'))
 42 |         else:
 43 |             return f(*args, *kwargs)
 44 |     return wrap
 45 | 
 46 | 
 47 | @app.route('/')
 48 | def index():
 49 |     return render_template('home.html')
 50 | 
 51 | 
 52 | class LoginForm(Form):    # Create Message Form
 53 |     username = StringField('Username', [validators.length(min=1)], render_kw={'autofocus': True})
 54 | 
 55 | 
 56 | # User Login
 57 | @app.route('/login', methods=['GET', 'POST'])
 58 | @not_logged_in
 59 | def login():
 60 |     form = LoginForm(request.form)
 61 |     if request.method == 'POST' and form.validate():
 62 |         # GEt user form
 63 |         username = form.username.data
 64 |         password_candidate = request.form['password']
 65 | 
 66 |         # Create cursor
 67 |         cur = mysql.connection.cursor()
 68 | 
 69 |         # Get user by username
 70 |         result = cur.execute("SELECT * FROM users WHERE username=%s", [username])
 71 | 
 72 |         if result > 0:
 73 |             # Get stored value
 74 |             data = cur.fetchone()
 75 |             password = data['password']
 76 |             uid = data['id']
 77 |             name = data['name']
 78 | 
 79 |             # Compare password
 80 |             if sha256_crypt.verify(password_candidate, password):
 81 |                 # passed
 82 |                 session['logged_in'] = True
 83 |                 session['uid'] = uid
 84 |                 session['s_name'] = name
 85 |                 x = '1'
 86 |                 cur.execute("UPDATE users SET online=%s WHERE id=%s", (x, uid))
 87 |                 flash('You are now logged in', 'success')
 88 | 
 89 |                 return redirect(url_for('index'))
 90 | 
 91 |             else:
 92 |                 flash('Incorrect password', 'danger')
 93 |                 return render_template('login.html', form=form)
 94 | 
 95 |         else:
 96 |             flash('Username not found', 'danger')
 97 |             # Close connection
 98 |             cur.close()
 99 |             return render_template('login.html', form=form)
100 |     return render_template('login.html', form=form)
101 | 
102 | 
103 | @app.route('/out')
104 | def logout():
105 |     if 'uid' in session:
106 | 
107 |         # Create cursor
108 |         cur = mysql.connection.cursor()
109 |         uid = session['uid']
110 |         x = '0'
111 |         cur.execute("UPDATE users SET online=%s WHERE id=%s", (x, uid))
112 |         session.clear()
113 |         flash('You are logged out', 'success')
114 |         return redirect(url_for('index'))
115 |     return redirect(url_for('login'))
116 | 
117 | 
118 | class RegisterForm(Form):
119 |     name = StringField('Name', [validators.length(min=3, max=50)], render_kw={'autofocus': True})
120 |     username = StringField('Username', [validators.length(min=3, max=25)])
121 |     email = EmailField('Email', [validators.DataRequired(), validators.Email(), validators.length(min=4, max=25)])
122 |     password = PasswordField('Password', [validators.length(min=3)])
123 | 
124 | 
125 | @app.route('/register', methods=['GET', 'POST'])
126 | @not_logged_in
127 | def register():
128 |     form = RegisterForm(request.form)
129 |     if request.method == 'POST' and form.validate():
130 |         name = form.name.data
131 |         email = form.email.data
132 |         username = form.username.data
133 |         password = sha256_crypt.encrypt(str(form.password.data))
134 | 
135 |         # Create Cursor
136 |         cur = mysql.connection.cursor()
137 |         cur.execute("INSERT INTO users(name, email, username, password) VALUES(%s, %s, %s, %s)",
138 |                     (name, email, username, password))
139 | 
140 |         # Commit cursor
141 |         mysql.connection.commit()
142 | 
143 |         # Close Connection
144 |         cur.close()
145 | 
146 |         flash('You are now registered and can login', 'success')
147 | 
148 |         return redirect(url_for('index'))
149 |     return render_template('register.html', form=form)
150 | 
151 | 
152 | class MessageForm(Form):    # Create Message Form
153 |     body = StringField('', [validators.length(min=1)], render_kw={'autofocus': True})
154 | 
155 | 
156 | @app.route('/chatting/<string:id>', methods=['GET', 'POST'])
157 | def chatting(id):
158 |     if 'uid' in session:
159 |         form = MessageForm(request.form)
160 |         # Create cursor
161 |         cur = mysql.connection.cursor()
162 | 
163 |         # lid name
164 |         get_result = cur.execute("SELECT * FROM users WHERE id=%s", [id])
165 |         l_data = cur.fetchone()
166 |         if get_result > 0:
167 |             session['name'] = l_data['name']
168 |             uid = session['uid']
169 |             session['lid'] = id
170 | 
171 |             if request.method == 'POST' and form.validate():
172 |                 txt_body = form.body.data
173 |                 # Create cursor
174 |                 cur = mysql.connection.cursor()
175 |                 cur.execute("INSERT INTO messages(body, msg_by, msg_to) VALUES(%s, %s, %s)",
176 |                             (txt_body, id, uid))
177 |                 # Commit cursor
178 |                 mysql.connection.commit()
179 | 
180 |             # Get users
181 |             cur.execute("SELECT * FROM users")
182 |             users = cur.fetchall()
183 | 
184 |             # Close Connection
185 |             cur.close()
186 |             return render_template('chat_room.html', users=users, form=form)
187 |         else:
188 |             flash('No permission!', 'danger')
189 |             return redirect(url_for('index'))
190 |     else:
191 |         return redirect(url_for('login'))
192 | 
193 | 
194 | @app.route('/chats', methods=['GET', 'POST'])
195 | def chats():
196 |     if 'lid' in session:
197 |         id = session['lid']
198 |         uid = session['uid']
199 |         # Create cursor
200 |         cur = mysql.connection.cursor()
201 |         # Get message here
202 |         cur.execute("SELECT * FROM messages WHERE (msg_by=%s AND msg_to=%s) OR (msg_by=%s AND msg_to=%s) "
203 |                     "ORDER BY id ASC", (id, uid, uid, id))
204 |         chats = cur.fetchall()
205 |         # Close Connection
206 |         cur.close()
207 |         return render_template('chats.html', chats=chats,)
208 |     return redirect(url_for('login'))
209 | 
210 | 
211 | if __name__ == '__main__':
212 |     app.run(debug=True)
213 | 


--------------------------------------------------------------------------------
/SSLChatApp/requirements.txt:
--------------------------------------------------------------------------------
 1 | blinker==1.4
 2 | Click==7.0
 3 | Flask==1.0.2
 4 | Flask-MySQLdb==0.2.0
 5 | itsdangerous==1.1.0
 6 | Jinja2==2.10.1
 7 | MarkupSafe==1.1.1
 8 | mysqlclient==1.4.2.post1
 9 | passlib==1.7.1
10 | Werkzeug==0.15.2
11 | WTForms==2.2.1
12 | 


--------------------------------------------------------------------------------
/SSLChatApp/sslchat.sql:
--------------------------------------------------------------------------------
 1 | -- phpMyAdmin SQL Dump
 2 | -- version 4.7.9
 3 | -- https://www.phpmyadmin.net/
 4 | --
 5 | -- Host: 127.0.0.1:3306
 6 | -- Generation Time: Jul 23, 2018 at 05:13 PM
 7 | -- Server version: 5.7.21
 8 | -- PHP Version: 7.2.7
 9 | 
10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 | SET AUTOCOMMIT = 0;
12 | START TRANSACTION;
13 | SET time_zone = "+00:00";
14 | 
15 | 
16 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
17 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
18 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
19 | /*!40101 SET NAMES utf8mb4 */;
20 | 
21 | --
22 | -- Database: `sslchat`
23 | --
24 | 
25 | -- --------------------------------------------------------
26 | 
27 | --
28 | -- Table structure for table `messages`
29 | --
30 | 
31 | DROP TABLE IF EXISTS `messages`;
32 | CREATE TABLE IF NOT EXISTS `messages` (
33 |   `id` int(11) NOT NULL AUTO_INCREMENT,
34 |   `body` text NOT NULL,
35 |   `msg_by` int(11) NOT NULL,
36 |   `msg_to` int(11) NOT NULL,
37 |   `msg_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
38 |   PRIMARY KEY (`id`)
39 | ) ENGINE=MyISAM AUTO_INCREMENT=182 DEFAULT CHARSET=latin1;
40 | 
41 | --
42 | -- Dumping data for table `messages`
43 | --
44 | 
45 | INSERT INTO `messages` (`id`, `body`, `msg_by`, `msg_to`, `msg_time`) VALUES
46 | (181, 'Fine', 9, 12, '2018-07-23 14:14:14'),
47 | (180, 'Fine. You?', 12, 9, '2018-07-23 14:14:06'),
48 | (179, 'how are you?', 9, 12, '2018-07-23 14:13:54'),
49 | (178, 'hlw', 9, 12, '2018-07-23 14:13:38'),
50 | (177, 'hi', 12, 9, '2018-07-23 14:13:26');
51 | 
52 | -- --------------------------------------------------------
53 | 
54 | --
55 | -- Table structure for table `users`
56 | --
57 | 
58 | DROP TABLE IF EXISTS `users`;
59 | CREATE TABLE IF NOT EXISTS `users` (
60 |   `id` int(11) NOT NULL AUTO_INCREMENT,
61 |   `name` varchar(50) NOT NULL,
62 |   `email` varchar(50) NOT NULL,
63 |   `username` varchar(25) NOT NULL,
64 |   `password` varchar(100) NOT NULL,
65 |   `reg_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
66 |   `online` varchar(1) NOT NULL DEFAULT '0',
67 |   PRIMARY KEY (`id`)
68 | ) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
69 | 
70 | --
71 | -- Dumping data for table `users`
72 | --
73 | 
74 | INSERT INTO `users` (`id`, `name`, `email`, `username`, `password`, `reg_time`, `online`) VALUES
75 | (12, 'Mukul', 'mukul@gmail.com', 'mukul', '$5$rounds=535000$6PJhbzFlfJbcQbza$FbrPa3qqk1RJ5MSffRLO6LrQJXbgO8SudFuBpNf.wR7', '2018-07-23 14:09:14', '0'),
76 | (9, 'Nur Mohsin', 'mohsin@gmail.com', 'mohsin', '$5$rounds=535000$w/MRBgS3SCDxMfkt$q.6o0T3/bF6wpch9ErkAuvOItlJeWq/hw5zgpEBOiY0', '2018-07-21 06:47:57', '1'),
77 | (11, 'SSL Wireless', 'sslwireless@gmail.com', 'ssl', '$5$rounds=535000$kQwsH7L55R/Qag/n$t2QnhVcrEu5ZTiUulmSScgJxM0CeLd60lmvTHQiyPcC', '2018-07-23 12:21:27', '0');
78 | COMMIT;
79 | 
80 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
81 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
82 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
83 | 


--------------------------------------------------------------------------------
/SSLChatApp/static/image/bgone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/SSLChatApp/static/image/bgone.jpg


--------------------------------------------------------------------------------
/SSLChatApp/static/image/bgtwo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/SSLChatApp/static/image/bgtwo.jpg


--------------------------------------------------------------------------------
/SSLChatApp/static/js/script.js:
--------------------------------------------------------------------------------
 1 | $(function(){
 2 | 	$('button').click(function(){
 3 | 		var user = $('#txtUsername').val();
 4 | 		var pass = $('#txtPassword').val();
 5 | 		$.ajax({
 6 | 			url: '/login',
 7 | 			data: $('form').serialize(),
 8 | 			type: 'POST',
 9 | 			success: function(response){
10 | 				console.log(response);
11 | 			},
12 | 			error: function(error){
13 | 				console.log(error);
14 | 			}
15 | 		});
16 | 	});
17 | });
18 | 


--------------------------------------------------------------------------------
/SSLChatApp/templates/chat_room.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | {% block body %}
 3 | <script>
 4 |     function ajax(){
 5 | 
 6 |     var req = new XMLHttpRequest();
 7 |     req.onreadystatechange = function(){
 8 |     if(req.readyState == 4 && req.status == 200)
 9 |     {
10 |     document.getElementById('chats').innerHTML = req.responseText;
11 |     }
12 |     }
13 |     req.open('POST', '/chats', true);
14 |     req.send();
15 |     }
16 |     setInterval(function(){ajax()}, 10);
17 | </script>
18 | <div class="row" onload="ajax();">
19 |     <div class="col-xs-1"></div>
20 |     <div class="col-xs-4" style="background-color: #f5f5f5;margin: 0px 10px;border-radius: 4px; padding: 10px 20px 20px 20px;">
21 |         <div style="text-align: center;font-size: 18px;background-color: #ddd;border-radius: 4px;color: #5e5fa4;margin-bottom: 8px;">
22 |             <span>Users Chart</span>
23 |         </div>
24 |         <ul class="list-group">
25 |             {% for user in users %}
26 |                 {% if user.id != session.uid %}
27 |                     <li class="list-group-item"><a href="{{user.id}}"> {{user.name}} </a>
28 |                         {% if user.online != "0" %}
29 |                             <span style="height: 12px;width: 12px;background-color: #1fc124;border-radius: 6px;
30 |                             float: right;margin-top: 5px;"></span>
31 |                         {% else %}
32 |                             <span style="height: 12px;width: 12px;background-color: #8a8a8a;border-radius: 6px;
33 |                             float: right;margin-top: 5px;"></span>
34 |                         {% endif %}
35 |                     </li>
36 |                 {% endif %}
37 |             {% endfor %}
38 |         </ul>
39 |     </div>
40 |     <div class="col-xs-6" style="background-color: #f5f5f5;margin: 0px 10px;border-radius: 4px; padding: 10px 20px 20px 20px;">
41 | 
42 |         {% if session.lid %}
43 |             {% if session.name != session.s_name %}
44 |                 <div style="text-align: center;font-size: 18px; color: #22aa45;background-color: #ddd;border-radius: 4px;">
45 |                     <span>{{ session.name}}</span>
46 |                 </div>
47 |                 <div id="chat-box" style="overflow-y: scroll; height: 350px; padding: 10px 0px 0px 0px;">
48 |                     <div id="chats"></div>
49 |                 </div>
50 |                 {% from "includes/_formhelpers.html" import render_field %}
51 |                 <div>
52 |                     <form method="POST" action="">
53 |                     <div class="form-group">
54 |                         {{render_field(form.body, class_="form-control", value="", placeholder="Enter your text...")}}
55 |                     </div>
56 |                     <button type="submit" class="btn btn-primary pull-right">Send</button>
57 |                     </form>
58 |                 </div>
59 |             {% else %}
60 |                 <div style="text-align: center;">
61 |                     <h1>Welcome to Chat Room</h1>
62 |                     <p class="lead">Select users and start chat...</p>
63 |                 </div>
64 |             {% endif %}
65 |         {% endif %}
66 | 
67 |     </div>
68 |     <div class="col-xs-1"></div>
69 | </div>
70 | {% endblock %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/chats.html:
--------------------------------------------------------------------------------
 1 | 
 2 | {% for message in chats %}
 3 |     {% if (message.msg_by or message.msg_to) != session.uid %}
 4 |         <div class="" style="text-align:right; padding:2px 5px;">
 5 |             <p>
 6 |                 <span class="" style="background-color: #28a7ab;color: #fff;margin: 1px 0;padding: 6px 12px; border-radius: 12px;"> {{message.body}}</span>
 7 |             </p>
 8 |         </div>
 9 |     {% else %}
10 |         <div class="" style="text-align:left; padding:2px 5px;">
11 |             <p>
12 |                 <span class="" style="background-color: #dd92b2;color: #fff;margin: 1px 0;padding: 6px 12px; border-radius: 12px;"> {{message.body}}</span>
13 |             </p>
14 |         </div>
15 |     {% endif %}
16 | {% endfor %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/home.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | 
 3 | {% block body %}
 4 | <br>
 5 | <div class="jumbotron text-center">
 6 |     {% if session.logged_in == NULL%}
 7 |         <h1>Welcome to SSL Chat</h1>
 8 |         <p class="lead">This is first SSL Chat App which build in Python Flask framework.<br> Hope you get interested this app.</p>
 9 |         <a href="/register" class="btn btn-primary btn-lg">Sign Up</a>
10 |         <a href="/login" class="btn btn-success btn-lg">Login</a>
11 |     {% else %}
12 |         <h1>Hi {{ session.s_name }}</h1>
13 |         <p class="lead">This is first SSL Chat App which build in Python Flask framework.<br> Hope you get interested this app.</p>
14 |         <a href="/chatting/{{ session.uid }}" class="btn btn-primary btn-lg">Let's Start Chat</a>
15 |     {% endif %}
16 | </div>
17 | {% endblock %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/includes/_flashmsg.html:
--------------------------------------------------------------------------------
 1 | {% with messages = get_flashed_messages(with_categories=true) %}
 2 |   <!-- Categories: success (green), info (blue), warning (yellow), danger (red) -->
 3 |   {% if messages %}
 4 |     {% for category, message in messages %}
 5 |       <div class="alert alert-{{ category }} alert-dismissible" role="alert">
 6 |       {{ message }}
 7 |       </div>
 8 |     {% endfor %}
 9 |   {% endif %}
10 | {% endwith %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/includes/_formhelpers.html:
--------------------------------------------------------------------------------
1 | {% macro render_field(field) %}
2 | <dt>{{ field.label }}</dt>
3 |   {{ field(**kwargs)|safe }}
4 |   {% if field.errors %}
5 |     {% for error in field.errors %}
6 |       <span class="help-inline">{{ error }}</span>
7 |     {% endfor %}
8 |   {% endif %}
9 | {% endmacro %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/includes/_navbar.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-inverse">
 2 |   <div class="container-fluid">
 3 |     <div class="navbar-header">
 4 |       <a class="navbar-brand" href="/">SSL Chat App</a>
 5 |     </div>
 6 |     <ul class="nav navbar-nav navbar-right">
 7 |       {% if session.logged_in %}
 8 |         <li><a href="/"><span class="glyphicon glyphicon-home"></span> Home</a></li>
 9 |         <li><a href="/chatting/{{ session.uid }}"><span class="glyphicon glyphicon-edit"></span> Chat Room</a></li>
10 |         <li><a href="/out"><span class="glyphicon glyphicon-off"></span> Logout</a></li>
11 |       {% else %}
12 |         <li><a href="/"><span class="glyphicon glyphicon-home"></span> Home</a></li>
13 |         <li><a href="/register"><span class="glyphicon glyphicon-user"></span> Signup</a></li>
14 |         <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
15 |       {% endif %}
16 |     </ul>
17 |   </div>
18 | </nav>


--------------------------------------------------------------------------------
/SSLChatApp/templates/layout.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 4 |         <title>SSL Chat APP</title>
 5 | 
 6 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 7 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 8 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 |     </head>
10 |     <body style="background-image: url({{ url_for('static', filename='image/bgone.jpg') }})">
11 |         {% include 'includes/_navbar.html' %}
12 |         <div class="container">
13 |             {% include 'includes/_flashmsg.html' %}
14 |             {% block body %}  {% endblock %}
15 |         </div>
16 |         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
17 |         <script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>
18 |         <script type="text/javascript">
19 |             CKEDITOR.replace('editor')
20 |         </script>
21 |     </body>
22 | </html>


--------------------------------------------------------------------------------
/SSLChatApp/templates/login.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | 
 3 | {% block body %}
 4 | <div class="jumbotron">
 5 |     <h2 style="text-align: center; color: #206aaa;">Login Form</h2>
 6 |     {% from "includes/_formhelpers.html" import render_field %}
 7 |     <div>
 8 |         <form method="POST" action="">
 9 |         <div class="form-group">
10 |             {{render_field(form.username, class_="form-control")}}
11 |         </div>
12 |         <div class="form-group">
13 |             <label><strong>Password</strong></label>
14 |             <input type="password" name="password" class="form-control" value={{request.form.password}}>
15 |         </div>
16 |         <button type="submit" class="btn btn-primary">Login</button>
17 |         </form>
18 |     </div>
19 | </div>
20 | {% endblock %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/register.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | 
 3 | {% block body %}
 4 | <div class="jumbotron">
 5 |     <h2 style="text-align: center; color: #206aaa;">Sign Up Form</h2>
 6 |     {% from "includes/_formhelpers.html" import render_field %}
 7 |     <form method="POST" action="">
 8 |         <div class="form-group">
 9 |             {{render_field(form.name, class_="form-control")}}
10 |         </div>
11 |         <div class="form-group">
12 |             {{render_field(form.email, class="form-control")}}
13 |         </div>
14 |         <div class="form-group">
15 |             {{render_field(form.username, class="form-control")}}
16 |         </div>
17 |         <div class="form-group">
18 |             {{render_field(form.password, class="form-control")}}
19 |         </div>
20 |         <p>
21 |             <input type="submit" class="btn btn-primary" value="Sign Up">
22 |         </p>
23 |     </form>
24 | </div>
25 | {% endblock %}


--------------------------------------------------------------------------------
/SSLChatApp/templates/test.html:
--------------------------------------------------------------------------------
1 | {% extends 'layout.html' %}
2 | 
3 | {% block body %}
4 | <br>
5 | <h1>Welcome to test box</h1>
6 | <ul class="list-group">
7 | 
8 | </ul>
9 | {% endblock %}


--------------------------------------------------------------------------------
/Screenshot View/1 Home.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/Screenshot View/1 Home.PNG


--------------------------------------------------------------------------------
/Screenshot View/2 Sign Up Form.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/Screenshot View/2 Sign Up Form.PNG


--------------------------------------------------------------------------------
/Screenshot View/3 Login Form.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/Screenshot View/3 Login Form.PNG


--------------------------------------------------------------------------------
/Screenshot View/4 Login Welcome.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/Screenshot View/4 Login Welcome.PNG


--------------------------------------------------------------------------------
/Screenshot View/5 Live Chat.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohsinenur/Flask-SSLChatApp/1374d3de2bf4310203d568f178a3f3a1168b01e9/Screenshot View/5 Live Chat.PNG


--------------------------------------------------------------------------------