Improved login form.

4 files changed, 53 insertions, 47 deletions

diff --git a/newspipe/static/css/custom.css b/newspipe/static/css/custom.css
index c85cc8a1..0488c441 100644
--- a/newspipe/static/css/custom.css
+++ b/newspipe/static/css/custom.css
@@ -42,6 +42,11 @@ a {
     opacity: 1;
     color: white;
 }
+.btn-secondary {
+    background-color: #0082c9;
+    opacity: 0.6;
+    color: white;
+}
 
 .btn-outline-primary {
     border-color: #0082c9;
diff --git a/newspipe/templates/layout.html b/newspipe/templates/layout.html
index b40b540c..459727de 100644
--- a/newspipe/templates/layout.html
+++ b/newspipe/templates/layout.html
@@ -120,12 +120,16 @@
     {% block messages %}
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
-                {% for category, message in messages %}
-                    <div class="alert alert-{{category}}">
-                        <button type="button" class="close" data-dismiss="alert">&times;</button>
-                        {{ message }}
+                <div class="row justify-content-center">
+                    <div class="col-6">
+                        {% for category, message in messages %}
+                            <div class="alert alert-{{category}}">
+                                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                                {{ message }}
+                            </div>
+                        {% endfor %}
                     </div>
-                {% endfor %}
+                </div>
             {% endif %}
         {% endwith %}
     {% endblock %}
diff --git a/newspipe/templates/login.html b/newspipe/templates/login.html
index 1253e2d3..d0849c0b 100644
--- a/newspipe/templates/login.html
+++ b/newspipe/templates/login.html
@@ -1,31 +1,26 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="container">
-    <div class="row">
-        <div class="col">
-            <div class="card">
-                <div class="card-body">
-                    <h2>{{ _('Log In') }}</h2>
-                    <form action="{{ url_for('login') }}" method=post>
-                        {{ form.hidden_tag() }}
-                        <div class="form-group">
-                        {{ form.nickmane(class_="form-control", placeholder=_('Your nickname')) }}
-                        </div>
-                        {% for message in form.nickmane.errors %}
-                            <div class="alert alert-warning" role="alert">{{ message }}</div>
-                        {% endfor %}
-                        <div class="form-group">
-                        {{ form.password(class_="form-control", placeholder=_('Your Password')) }}
-                        </div>
-                        {% for message in form.password.errors %}
-                            <div class="alert alert-warning" role="alert">{{ message }}</div>
-                        {% endfor %}
-                        {{ form.submit(class_="btn btn-primary") }}
-                    </form>
+    <div class="row justify-content-center">
+        <div class="col-4">
+            <h2>{{ _('Log In') }}</h2>
+            <form action="{{ url_for('login') }}" method=post>
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                {{ form.nickmane(class_="form-control", placeholder=_('Your nickname')) }}
                 </div>
-            </div>
-            <br />
-            <a href="/signup" class="btn btn-primary">{{ _('Sign up') }}</a>
+                {% for message in form.nickmane.errors %}
+                    <div class="alert alert-warning" role="alert">{{ message }}</div>
+                {% endfor %}
+                <div class="form-group">
+                {{ form.password(class_="form-control", placeholder=_('Your Password')) }}
+                </div>
+                {% for message in form.password.errors %}
+                    <div class="alert alert-warning" role="alert">{{ message }}</div>
+                {% endfor %}
+                {{ form.submit(class_="btn btn-primary") }}
+                <a href="/signup" class="btn btn-secondary">{{ _('Sign up') }}</a>
+            </form>
         </div>
     </div>
 </div><!-- /.container -->
diff --git a/newspipe/templates/signup.html b/newspipe/templates/signup.html
index 8d34b3bf..53cad8d0 100644
--- a/newspipe/templates/signup.html
+++ b/newspipe/templates/signup.html
@@ -1,24 +1,26 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="container">
-    <div class="form well">
-        <form action="" method="post" name="save">
-            {{ form.hidden_tag() }}
-            <div class="form-group">
-                {{ form.nickname(class_="form-control", placeholder=_('Your nickname')) }} {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                <p class="help-block">{{ _('Letters, numbers, dots and underscores only.') }}</p>
-            </div>
-            <div class="form-group">
-                {{ form.email(class_="form-control", placeholder=_('Your email')) }} {% for error in form.email.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                <p class="help-block">{{ _("Only for account activation. Your email won't be stored.") }}</p>
-            </div>
-            <div class="form-group">
-                {{ form.password(class_="form-control", placeholder=_('Your password')) }} {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
-                <p class="help-block">{{ _('Minimum 6 characters.') }}</p>
-            </div>
-            <br />
-            {{ form.submit(class_="btn btn-default") }}
-        </form>
+    <div class="row justify-content-center">
+        <div class="col-4">
+            <form action="" method="post" name="save">
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                    {{ form.nickname(class_="form-control", placeholder=_('Your nickname')) }} {% for error in form.nickname.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    <p class="help-block">{{ _('Letters, numbers, dots and underscores only.') }}</p>
+                </div>
+                <div class="form-group">
+                    {{ form.email(class_="form-control", placeholder=_('Your email')) }} {% for error in form.email.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    <p class="help-block">{{ _("Only for account activation. Your email won't be stored.") }}</p>
+                </div>
+                <div class="form-group">
+                    {{ form.password(class_="form-control", placeholder=_('Your password')) }} {% for error in form.password.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
+                    <p class="help-block">{{ _('Minimum 6 characters.') }}</p>
+                </div>
+                <br />
+                {{ form.submit(class_="btn btn-primary") }}
+            </form>
+        </div>
     </div>
 </div><!-- /.container -->
 {% endblock %}