Changement du style des formulaires. Le form de login est ajouté automatiquement au rendu.

app/forms.py

@@ -1,6 +1,6 @@
 from flask_login import current_user
 from flask_wtf import FlaskForm
-from wtforms import StringField, PasswordField, BooleanField, TextAreaField, SubmitField
+from wtforms import StringField, PasswordField, BooleanField, TextAreaField, SubmitField, FileField
 from wtforms.fields.html5 import DateField
 from wtforms.validators import ValidationError, DataRequired, Optional, Email, EqualTo
 from app.models.users import Member
@@ -48,6 +48,7 @@ class RegistrationForm(FlaskForm):
     submit = SubmitField('S\'enregistrer')
 
 class UpdateAccountForm(FlaskForm):
+    avatar = FileField('Avatar :', validators=[])
     email = StringField('Adresse Email :', validators=[Optional(), Email(), validate_email])
     password = PasswordField('Mot de passe :', validators=[Optional(), validate_password])
     password2 = PasswordField('Répéter le mot de passe', validators=[Optional(), EqualTo('password')])

app/routes.py

@@ -5,23 +5,33 @@ from app import app, db
 from app.forms import LoginForm, RegistrationForm, UpdateAccountForm
 from app.models.users import Member
 
+# Ce truc c'est la vie !
+def _render_template(*args, **kwargs):
+    # TODO: debugguer cette merde : au logout, ça foire
+    # if current_user.is_authenticated:
+    #     login_form = LoginForm()
+    #     return render_template(*args, **kwargs, login_form=login_form)
+    # return render_template(*args, **kwargs)
+    login_form = LoginForm()
+    return render_template(*args, **kwargs, login_form=login_form)
+
 
 @app.route('/')
 def index():
     login_form = LoginForm()
-    return render_template('index.html', login_form=login_form)
+    return _render_template('index.html')
 
 @app.route('/login',  methods=['GET', 'POST'])
 def login():
     if request.method == 'GET':
         return redirect(url_for('index'))
     login_form = LoginForm()
-    if form.validate_on_submit():
-        member = Member.query.filter_by(username=form.username.data).first()
-        if member is None or not member.check_password(form.password.data):
+    if login_form.validate_on_submit():
+        member = Member.query.filter_by(username=login_form.username.data).first()
+        if member is None or not member.check_password(login_form.password.data):
             flash('Pseudo ou mot de passe invalide', 'error')
             return redirect(request.referrer)
-        login_user(member, remember=form.remember_me.data)
+        login_user(member, remember=login_form.remember_me.data)
         flash('Connexion réussie', 'info')
     return redirect(request.referrer)
 
@@ -37,43 +47,40 @@ def account():
     if not current_user.is_authenticated:
         flash('Veuillez vous authentifier', 'warning')
         return redirect(url_for('index'))
-    login_form = LoginForm()
-    form2 = UpdateAccountForm()
+    form = UpdateAccountForm()
     if request.method == "POST":
-        if form2.validate_on_submit():
+        if form.validate_on_submit():
             current_user.update(
-                email = form2.email.data,
-                password = form2.password.data,
-                signature = form2.signature.data,
-                biography = form2.biography.data,
-                birthday = form2.birthday.data,
-                receive_newsletter = form2.newsletter.data)
+                email = form.email.data,
+                password = form.password.data,
+                signature = form.signature.data,
+                biography = form.biography.data,
+                birthday = form.birthday.data,
+                receive_newsletter = form.newsletter.data)
             db.session.add(current_user)
             db.session.commit()
             flash('Modifications effectuées', 'ok')
         else:
             flash('Erreur lors de la modification', 'error')
-    return render_template('account.html', login_form=login_form, form2=form2)
+    return _render_template('account.html', form=form)
 
 @app.route('/register', methods=['GET', 'POST'])
 def register():
     if current_user.is_authenticated:
         return redirect(url_for('index'))
-    login_form = LoginForm()
-    form2 = RegistrationForm()
-    if form2.validate_on_submit():
-        member = Member(form2.username.data, form2.email.data, form2.password.data)
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        member = Member(form.username.data, form.email.data, form.password.data)
         member.biography = ""
         member.signature = ""
         db.session.add(member)
         db.session.commit()
         flash('Inscription réussie', 'ok')
         return redirect(url_for('validation'))
-    return render_template('register.html', title='Register', login_form=login_form, form2=form2)
+    return _render_template('register.html', title='Register', form=form)
 
 @app.route('/register/validation/')
 def validation():
     if current_user.is_authenticated :
         return redirect(url_for('index'))
-    login_form = LoginForm()
-    return render_template('validation.html', login_form=login_form)
+    return _render_template('validation.html')

app/static/css/container.css

@@ -7,6 +7,7 @@ section {
 }
 
 section h1 {
+	margin-top: 0;
 	border-bottom: 1px solid #a0a0a0;
 	font-family: Raleway; font-size: 32px;
 	font-weight: 200; color: #242424;
@@ -23,5 +24,3 @@ section h1 {
 	font-family: Raleway; font-size: 20px;
 	font-weight: 200; color: #242424;
 } */
-
-

app/static/css/form.css

@@ -0,0 +1,61 @@
+.form {
+	min-width: 350px;
+	margin: 20px auto 0; padding: 20px;
+	background: #ffffff;
+	border: 1px solid #dddddd; border-radius: 5px;
+}
+
+.form .avatar {
+	display: inline-block; vertical-align: middle;
+	border-radius: 100%;
+	width: 150px; height: 150px;
+}
+.form input[type="file"] {
+	display: inline-block; margin-left: 20px;
+	vertical-align: middle;
+}
+
+.form form > div:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.form form label {
+	display: inline-block;
+	margin-bottom: 5px;
+}
+
+.form input[type='text'],
+.form input[type='email'],
+.form input[type='date'],
+.form input[type='password'],
+.form textarea {
+	display: block;
+	width: 100%; padding: 6px 2.5%;
+	border: 1px solid #abcdef;
+}
+.form input[type='text']:focus,
+.form input[type='email']:focus,
+.form input[type='date']:focus,
+.form input[type='password']:focus,
+.form textarea:focus {
+	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
+}
+
+.form input[type="submit"] {
+	width: 100%;
+	background-color: #149641;
+	border-color: #0e692d;
+	color: #ffffff;
+}
+.form input[type="submit"]:hover,
+.form input[type="submit"]:focus,
+.form input[type="submit"]:active {
+	background-color: #0f7331;
+	border-color: #073617;
+}
+
+.form form .msgerror {
+	color: red;
+	font-weight: 400;
+	margin-top: 5px;
+}

app/templates/account.html

@@ -1,71 +1,77 @@
 {% extends "base/container.html" %}
 
 {% block content %}
-<section class="home-pinned-content flex">
-	<div id="register">
-		<h1>Gestion du compte :</h1>
+<section class="form" style="width:80%;">
+	<h1>Gestion du compte :</h1>
 
-		<form action="" method="post">
-			{{ form2.hidden_tag() }}
+	<form action="" method="post">
+		{{ form.hidden_tag() }}
+		
+		<div>
+			{{ form.avatar.label }}
 			<div>
-				{{ form2.email.label }}
-				{{ form2.email(placeholder=current_user.email) }}
-				{% for error in form2.email.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
+				<img class="avatar" src="{{ url_for('static', filename= 'images/3864.png') }}" />
+				{{ form.avatar }}
 			</div>
-			<div>
-				{{ form2.password.label }}
-				{{ form2.password(placeholder='************') }}
-				{% for error in form2.password.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.password2.label }}
-				{{ form2.password2(placeholder='************') }}
-				{% for error in form2.password2.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.birthday.label }}
-				{{ form2.birthday(value=current_user.birthday) }}
-				{% for error in form2.birthday.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.signature.label }}
-				<textarea id="{{ form2.signature.name }}" name="{{ form2.signature.name }}">{{ current_user.signature }}</textarea>
-				{% for error in form2.signature.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.biography.label }}
-				<textarea id="{{ form2.biography.name }}" name="{{ form2.biography.name }}">{{ current_user.biography }}</textarea>
-				{% for error in form2.biography.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.newsletter.label }}
-				{{ form2.newsletter() }}
-				<div style="font-size:80%;color:rgba(0,0,0,.5)">{{ form2.newsletter.description }}</div>
-				{% for error in form2.newsletter.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.old_password.label }}
-				{{ form2.old_password(placeholder='************') }}
-				{% for error in form2.old_password.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>{{ form2.submit(class_="bg-green") }}</div>
-		</form>
-	</div>
+		</div>
+		<div>
+			{{ form.email.label }}
+			{{ form.email(placeholder=current_user.email) }}
+			{% for error in form.email.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.password.label }}
+			{{ form.password(placeholder='************') }}
+			{% for error in form.password.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.password2.label }}
+			{{ form.password2(placeholder='************') }}
+			{% for error in form.password2.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.birthday.label }}
+			{{ form.birthday(value=current_user.birthday) }}
+			{% for error in form.birthday.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.signature.label }}
+			<textarea id="{{ form.signature.name }}" name="{{ form.signature.name }}">{{ current_user.signature }}</textarea>
+			{% for error in form.signature.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.biography.label }}
+			<textarea id="{{ form.biography.name }}" name="{{ form.biography.name }}">{{ current_user.biography }}</textarea>
+			{% for error in form.biography.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.newsletter.label }}
+			{{ form.newsletter() }}
+			<div style="font-size:80%;color:rgba(0,0,0,.5)">{{ form.newsletter.description }}</div>
+			{% for error in form.newsletter.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.old_password.label }}
+			{{ form.old_password(placeholder='************') }}
+			{% for error in form.old_password.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>{{ form.submit(class_="bg-green") }}</div>
+	</form>
 </section>
 {% endblock %}

app/templates/base/head.html

@@ -8,6 +8,7 @@
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/navbar.css')}}>
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/header.css')}}>
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/container.css')}}>
+	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/form.css')}}>
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/footer.css')}}>
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/flash.css')}}>
 	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href={{url_for('static', filename = 'css/responsive.css')}}>

app/templates/login.html

@@ -3,23 +3,23 @@
 {% block content %}
 <h1>Sign In</h1>
 <form action="" method="post">
-	{{ form.hidden_tag() }}
+	{{ login_form.hidden_tag() }}
 	<p>
-		{{ form.username.label }}<br>
-		{{ form.username(size=32) }}<br>
-		{% for error in form.username.errors %}
+		{{ login_form.username.label }}<br>
+		{{ login_form.username(size=32) }}<br>
+		{% for error in login_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 %}
+		{{ login_form.password.label }}<br>
+		{{ login_form.password(size=32) }}<br>
+		{% for error in login_form.password.errors %}
 		<span style="color: red;">[{{ error }}]</span>
 		{% endfor %}
 	</p>
-	<p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
-	<p>{{ form.submit() }}</p>
+	<p>{{ login_form.remember_me() }} {{ login_form.remember_me.label }}</p>
+	<p>{{ login_form.submit() }}</p>
 </form>
 <p>New User? <a href="{{ url_for('register') }}">Click to Register!</a></p>
 {% endblock %}

app/templates/register.html

@@ -1,57 +1,56 @@
 {% extends "base/container.html" %}
 
 {% block content %}
-<section class="home-pinned-content flex">
-	<div id="register">
-		<h1>Inscription :</h1>
+<section class="form" style="width:40%;">
+	<h1>Inscription :</h1>
 
-		<form action="" method="post">
-			{{ form2.hidden_tag() }}
-			<div>
-				{{ form2.username.label }}
-				{{ form2.username() }}
-				{% for error in form2.username.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.email.label }}
-				{{ form2.email() }}
-				{% for error in form2.email.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.password.label }}
-				{{ form2.password() }}
-				{% for error in form2.password.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.password2.label }}
-				{{ form2.password2() }}
-				{% for error in form2.password2.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.guidelines.label }}
-				{{ form2.guidelines() }}
-				{% for error in form2.guidelines.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>
-				{{ form2.newsletter.label }}
-				{{ form2.newsletter() }}
-				<div style="font-size:80%;color:rgba(0,0,0,.5)">{{ form2.newsletter.description }}</div>
-				{% for error in form2.newsletter.errors %}
-				<span class="msgerror">{{ error }}</span>
-				{% endfor %}
-			</div>
-			<div>{{ form2.submit(class_="bg-green") }}</div>
-		</form>
-	</div>
+	<form action="" method="post">
+		{{ form.hidden_tag() }}
+		<div>
+			{{ form.username.label }}
+			{{ form.username() }}
+			{% for error in form.username.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.email.label }}
+			{{ form.email() }}
+			{% for error in form.email.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.password.label }}
+			{{ form.password() }}
+			{% for error in form.password.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.password2.label }}
+			{{ form.password2() }}
+			{% for error in form.password2.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.guidelines.label }}
+			{{ form.guidelines() }}
+			{% for error in form.guidelines.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>
+			{{ form.newsletter.label }}
+			{{ form.newsletter() }}
+			<div style="font-size:80%;color:rgba(0,0,0,.5)">{{ form.newsletter.description }}</div>
+			{% for error in form.newsletter.errors %}
+			<span class="msgerror">{{ error }}</span>
+			{% endfor %}
+		</div>
+		<div>{{ form.submit(class_="bg-green") }}</div>
+	</form>
+</div>
 </section>
 {% endblock %}