Skip to content

Commit

Permalink
Merge pull request #1121 from ewels/styling-registration-page
Browse files Browse the repository at this point in the history 
Front-end styling for registration page
  • Loading branch information
@i-oden
i-oden authored Apr 4, 2022
2 parents 3a16fa0 + 7e267e6 commit eecf799
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 101 deletions.
8 changes: 4 additions & 4 deletions dds_web/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class RegistrationForm(flask_wtf.FlaskForm):
"""User registration form."""

name = wtforms.StringField(
"name",
"Name",
validators=[
wtforms.validators.Length(
min=2, message="The name must be at least 2 characters long."
Expand All @@ -28,7 +28,7 @@ class RegistrationForm(flask_wtf.FlaskForm):
],
)
email = wtforms.StringField(
"email",
"Email",
validators=[
wtforms.validators.DataRequired(message="You need to provide an email address."),
wtforms.validators.Email(message="Please provide a valid email (the one invited)."),
Expand All @@ -37,7 +37,7 @@ class RegistrationForm(flask_wtf.FlaskForm):
render_kw={"readonly": True},
)
username = wtforms.StringField(
"username",
"Username",
validators=[
wtforms.validators.InputRequired(message="Please enter a username."),
wtforms.validators.Length(
Expand All @@ -48,7 +48,7 @@ class RegistrationForm(flask_wtf.FlaskForm):
],
)
password = wtforms.PasswordField(
"password",
"Password",
validators=[
wtforms.validators.DataRequired(message="You need to provide a password."),
wtforms.validators.EqualTo("confirm", message="The passwords do not match."),
Expand Down
4 changes: 2 additions & 2 deletions dds_web/templates/components/login_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<span class="input-group-text bg-success text-black"><i class="fas fa-user mx-1"></i></span>
<div class="col">
<div class="form-floating">
{{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "") + " rounded-0 shadow-none", **{"placeholder": form.username.label.text, "autocomplete": "off"}) }}
{{ form.username(class="form-control rounded-0 shadow-none" + (" is-invalid" if form.username.errors else ""), **{"placeholder": form.username.label.text, "autocomplete": "off"}) }}
{{ form.username.label }}
{% if form.username.errors %}
{% for error in form.username.errors %}
Expand All @@ -18,7 +18,7 @@
<span class="input-group-text bg-success text-black"><i class="fas fa-key mx-1"></i></span>
<div class="col">
<div class="form-floating">
{{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "") + " rounded-0 shadow-none", **{"placeholder": form.password.label.text, "autocomplete": "off"}) }}
{{ form.password(class="form-control rounded-0 shadow-none" + (" is-invalid" if form.password.errors else ""), **{"placeholder": form.password.label.text, "autocomplete": "off"}) }}
{{ form.password.label }}
{% if form.password.errors %}
{% for error in form.password.errors %}
Expand Down
36 changes: 18 additions & 18 deletions dds_web/templates/user/change_password.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,39 @@
<div class="row mb-3">
{{ form.current_password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.current_password(class="form-control mb-2") }}
{{ form.current_password(class="form-control mb-2"+(" is-invalid" if form.current_password.errors else "")) }}
{% if form.current_password.errors %}
{% for error in form.current_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.current_password.errors %}
{% for error in form.current_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>

<!-- New Password -->
<div class="row mb-3">
{{ form.new_password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.new_password(class="form-control mb-2") }}
{{ form.new_password(class="form-control mb-2"+(" is-invalid" if form.new_password.errors else "")) }}
{% if form.new_password.errors %}
{% for error in form.new_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.new_password.errors %}
{% for error in form.new_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>

<!-- Confirm password -->
<div class="row mb-3">
{{ form.confirm_new_password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.confirm_new_password(class="form-control mb-2") }}
{{ form.confirm_new_password(class="form-control mb-2"+(" is-invalid" if form.confirm_new_password.errors else "")) }}
{% if form.confirm_new_password.errors %}
{% for error in form.confirm_new_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.confirm_new_password.errors %}
{% for error in form.confirm_new_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>

<!-- Submit button -->
Expand Down
13 changes: 6 additions & 7 deletions dds_web/templates/user/confirm2fa.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@
<!-- Token -->
{{ form.hotp.label(class="col-md-auto col-form-label") }}
<div class="col-md-3">
{{ form.hotp(class="form-control mb-2") }}
{{ form.hotp(class="form-control mb-2"+(" is-invalid" if form.hotp.errors else "")) }}
{% if form.hotp.errors %}
{% for error in form.hotp.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>

<!-- Submit button -->
Expand All @@ -28,12 +33,6 @@
</button>
</div>

{% if form.hotp.errors %}
{% for error in form.hotp.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}

</div>

</form>
Expand Down
117 changes: 73 additions & 44 deletions dds_web/templates/user/register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,94 @@

{% block body %}

<form method="POST" action="{{ url_for('auth_blueprint.register') }}">
{{ form.csrf_token }}
<p class="lead">Many thanks for your interest in using the SciLifeLab Data Delivery System.</p>
<p>Please use the form below to configure your account.</p>

<!-- Name name -->
{{ form.name.label }}
{{ form.name }}
<ul>
<form method="POST" action="{{ url_for('auth_blueprint.register') }}" class="mt-4">
{{ form.csrf_token }}

<!-- Name -->
<div class="row mb-3">
{{ form.name.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.name(class="form-control mb-2"+(" is-invalid" if form.name.errors else "")) }}
{% if form.name.errors %}
{% for error in form.name.errors %}
<li style="color:red;">
{{ error }}
</li>
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</ul>
{% endif %}
</div>
</div>

<!-- Email -->
{{ form.email.label }}
{{ form.email }}
<ul>
<!-- Email -->
<div class="row mb-3">
{{ form.email.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.email(class="form-control mb-2"+(" is-invalid" if form.email.errors else "")) }}
{% if form.email.errors %}
{% for error in form.email.errors %}
<li style="color:red;">
{{ error }}
</li>
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</ul>
{% endif %}
</div>
</div>

<!-- Username -->
{{ form.username.label }}
{{ form.username }}
<ul>
<!-- Username -->
<div class="row mb-3">
{{ form.username.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.username(class="form-control mb-2"+(" is-invalid" if form.username.errors else "")) }}
{% if form.username.errors %}
{% for error in form.username.errors %}
<li style="color:red;">
{{ error }}
</li>
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</ul>
{% endif %}
</div>
</div>

<!-- Password -->
{{ form.password.label }}
{{ form.password }}
{{ form.confirm.label }}
{{ form.confirm }}
<ul>
<!-- Password -->
<div class="row mb-3">
{{ form.password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.password(class="form-control mb-2"+(" is-invalid" if form.password.errors else "")) }}
{% if form.password.errors %}
{% for error in form.password.errors %}
<li style="color:red;">
{{ error }}
</li>
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
</div>

<!-- Confirm password -->
<div class="row mb-3">
{{ form.confirm.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.confirm(class="form-control mb-2"+(" is-invalid" if form.confirm.errors else "")) }}
{% if form.confirm.errors %}
{% for error in form.confirm.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</ul>
{% endif %}
</div>
</div>


<!-- Unit -->
{% if unit %}
Unit name:
<!-- Unit -->
{% if unit %}
<div class="row mb-3">
<label class="col-md-2 col-form-label">Unit name</label>
<div class="col-md-6">
{{ unit }}
{% endif %}
<br>
<!-- Submit button -->
{{ form.submit }}
</div>
</div>
{% endif %}

<!-- Submit button -->
<button type="submit" class="btn btn-success mb-2">
<i class="fa-solid fa-user-plus me-2"></i>
Create Account
</button>

</form>
</form>

{% endblock %}
14 changes: 7 additions & 7 deletions dds_web/templates/user/request_reset_password.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
{{ form.csrf_token }}

<div class="row mb-3">

<!-- Email -->
{{ form.email.label(class="col-md-auto col-form-label") }}
<div class="col-md-3">
{{ form.email(class="form-control mb-2", type="email") }}
{{ form.email(class="form-control mb-2"+(" is-invalid" if form.email.errors else ""), type="email") }}
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}

<!-- Submit button -->
<div class="col">
Expand Down
26 changes: 13 additions & 13 deletions dds_web/templates/user/reset_password.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,27 @@
<!-- Password -->
{{ form.password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.password(class="form-control mb-2") }}
{{ form.password(class="form-control mb-2"+(" is-invalid" if form.password.errors else "")) }}
{% if form.password.errors %}
{% for error in form.password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.password.errors %}
{% for error in form.password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}


</div>
<div class="row mb-3">

<!-- Confirm password -->
{{ form.confirm_password.label(class="col-md-2 col-form-label") }}
<div class="col-md-6">
{{ form.confirm_password(class="form-control mb-2") }}
{{ form.confirm_password(class="form-control mb-2"+(" is-invalid" if form.confirm_password.errors else "")) }}
{% if form.confirm_password.errors %}
{% for error in form.confirm_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% if form.confirm_password.errors %}
{% for error in form.confirm_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
{% endif %}
</div>

<!-- Submit button -->
Expand Down
10 changes: 4 additions & 6 deletions dds_web/templates/user/userexists.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@

{% block body %}

<p>You have successfully created your account at the <span>SciLifeLab Data Delivery
System</span>. To get started, please install the <a
href="https://github.com/ScilifelabDataCentre/dds_cli">command line application.</a></p>
<p>
Instructions how to access and manage your data can be found in the system's <a
href="https://github.com/ScilifelabDataCentre/dds_web">documentation.</a></p>
<p class="lead">You have successfully created your account at the <span>SciLifeLab Data Delivery System</span>.</p>

<p>To get started, please install the <a href="https://scilifelabdatacentre.github.io/dds_cli/installation/">command line application.</a></p>
<p>Instructions how to access and manage your data can be found in the system's <a href="https://scilifelabdatacentre.github.io/dds_cli/">documentation</a>.</p>

{% endblock %}

0 comments on commit eecf799

Please sign in to comment.