Skip to content

Commit

Permalink
Merge pull request #92 from zediious/frontend-tweaks
Browse files Browse the repository at this point in the history 
Frontend tweaks
  • Loading branch information
@zediious
zediious authored Nov 1, 2023
2 parents 0047ba3 + 1d30222 commit 4ae60ea
Show file tree
Hide file tree
Showing 45 changed files with 1,173 additions and 557 deletions.
10 changes: 6 additions & 4 deletions raptorWeb/raptormc/templatetags/markdownStrip.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,17 @@ def strip_markdown(value: str) -> str:
).replace('__', ''))

@register.filter
def strip_discord(value):
def strip_tags(value):
"""
Removes all instances of unformatted Discord
usernames and channels from a given string, as
well as convert .gg urls to .com
well as convert .gg urls to .com.
This will also remove any HTML tags present.
"""
updatedValue = sub(r'<[@, &, #]+\S+>', '', value)
cleaned_value = sub(r'<.*?>', '', value)

return (updatedValue
return (cleaned_value
.replace('@everyone', ''
).replace('▬', ''
).replace('.gg', '.com'))
Expand Down
2 changes: 1 addition & 1 deletion raptorWeb/static/css/raptormc.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion raptorWeb/static/css/raptormc.css.map
View file

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions raptorWeb/static/css/raptormc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,18 @@ body {
height: 25px
}

.htmx-indicator{
display: none;
}

.htmx-request .htmx-indicator{
display: inline;
}

.htmx-request.htmx-indicator{
display: inline;
}

.fade-in-button {
opacity: 1;
animation-name: fadeInOpacityButton;
Expand Down Expand Up @@ -201,6 +213,10 @@ body {
font-size: large;
}

.serverAddressCopy {
font-size: 1em;
}

.navbar-brand {
width: 25%;
}
Expand Down Expand Up @@ -229,6 +245,10 @@ body {
font-size: small;
}

.serverAddressCopy {
font-size: 16px;
}

#profile_picture_box {
width: 40px
}
Expand Down
9 changes: 8 additions & 1 deletion raptorWeb/templates/authprofiles/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,17 @@

{% csrf_token %}
{% bootstrap_form login_form %}

<div class="loginSubmit opacity-100">
{% bootstrap_button button_type="submit" content="Login" %}
</div>
<a role="button" type="button" class="btn btn-discord mt-2 opacity-100" href="{% url 'authprofiles:login_oauth' %}">Login with Discord</a>

<a role="button" type="button"
class="btn btn-discord mt-2 opacity-100"
href="{% url 'authprofiles:login_oauth' %}"
>
Login with Discord
</a>

</form>
</div>
6 changes: 4 additions & 2 deletions raptorWeb/templates/authprofiles/no_access.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="container">
<header class="card bg-dark opacity-75 text-white p-4 mt-4">
<h3 class="pageHeader fw-bold text-center">You do not have permission to manage this resource</h3>
<h3 class="pageHeader fw-bold text-center">
You do not have permission to manage this resource
</h3>
</header>
</div>
</div>
6 changes: 4 additions & 2 deletions raptorWeb/templates/authprofiles/no_user.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="container">
<header class="card bg-dark opacity-75 text-white p-4 mt-4">
<h3 class="pageHeader fw-bold text-center">A User with with the requested username was not found</h3>
<h3 class="pageHeader fw-bold text-center">
A User with with the requested username was not found
</h3>
</header>
</div>
</div>
36 changes: 24 additions & 12 deletions raptorWeb/templates/authprofiles/password_reset_email_form.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
{% load static %}
{% load django_bootstrap5 %}

<form id="password_reset_email_form_alone" class="form p-3 text-white" hx-post="{% url 'authprofiles:reset_password_form' %}" hx-swap="outerHTML" hx-target="#password_reset_email_form_alone">
<div class="d-flex justify-content-center">
<img id="passwordResetSpinner"
class="htmx-indicator w-25 mt-3"
src="{% static 'image/three-dots.svg' %}"
alt="Loading...">
</div>

<form id="password_reset_email_form_alone" class="form p-3 text-white"
hx-post="{% url 'authprofiles:reset_password_form' %}"
hx-swap="outerHTML"
hx-target="#password_reset_email_form_alone"
hx-indicator="#passwordResetSpinner"
>

{% if messages %}
<ul class="messages alert alert-warning">
{% for message in messages %}
{{message}}
{% endfor %}
</ul>
{% endif %}
{% if messages %}
<ul class="messages alert alert-warning">
{% for message in messages %}
{{message}}
{% endfor %}
</ul>
{% endif %}

{% csrf_token %}
{{ form.captcha }}
{% bootstrap_form password_reset_form %}
{% bootstrap_button button_type="submit" content="Send Reset Link" %}
{% csrf_token %}
{{ form.captcha }}
{% bootstrap_form password_reset_form %}
{% bootstrap_button button_type="submit" content="Send Reset Link" %}

</form>
8 changes: 6 additions & 2 deletions raptorWeb/templates/authprofiles/password_reset_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
{% load django_bootstrap5 %}

<div class="container">
<form id="reset_password_confirm_form_alone" class="form p-3 text-white" enctype="multipart/form-data" hx-post="{% url 'authprofiles:reset_password_confirm_form' user_reset_token=resetting_user_token%}" hx-swap="outerHTML" hx-target="#reset_password_confirm_form_alone">
<form id="reset_password_confirm_form_alone" class="form p-3 text-white" enctype="multipart/form-data"
hx-post="{% url 'authprofiles:reset_password_confirm_form' user_reset_token=resetting_user_token%}"
hx-swap="outerHTML"
hx-target="#reset_password_confirm_form_alone"
>

{% if messages %}
<ul class="messages alert alert-warning">
Expand All @@ -19,4 +23,4 @@
{% bootstrap_button button_type="reset" content="Reset" %}

</form>
</div>
</div>
159 changes: 5 additions & 154 deletions raptorWeb/templates/authprofiles/profile_dropdown.html
View file
Original file line number Diff line number Diff line change
@@ -1,160 +1,11 @@
{% load static %}

{% if user.is_authenticated %}
{% else %}
<div hx-get="{% url 'authprofiles:login' %}" hx-trigger="load" hx-target="#user_login_form" hx-swap="innerHTML"></div>
<div hx-get="{% url 'authprofiles:register' %}" hx-trigger="load" hx-target="#register_form_replace" hx-swap="innerHTML"></div>
<div hx-get="{% url 'authprofiles:reset_password_form' %}" hx-trigger="load" hx-target="#reset_password_form_replace" hx-swap="outerHTML"></div>
{% endif %}

{% include "authprofiles/profile_dropdown_auth.html" %}

{% if user.is_authenticated %}
<div class="float-end h-100 d-flex">
<div class="dropstart m-auto">
<button class="btn dropdown-toggle d-flex" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<div id="profile_picture_box">
{% if loaded_user.user_profile_info.profile_picture %}
{% if loaded_user.is_staff %}
<img id="profilePicture" class="border border-danger border-2 w-100" src="{{ loaded_user.user_profile_info.profile_picture.url }}" alt="Profile" onerror=this.src="{% static 'image/no_user.webp' %}">
{% else %}
<img id="profilePicture" class="border border-secondary border-2 w-100" src="{{ loaded_user.user_profile_info.profile_picture.url }}" alt="Profile" onerror=this.src="{% static 'image/no_user.webp' %}">
{% endif %}
{% else %}
{% if loaded_user.is_staff %}
<img id="noProfilePicture" class="border border-danger border-2 w-100" src="{% static 'image/no_user.webp' %}" alt="Profile">
{% else %}
<img id="noProfilePicture" class="border border-secondary border-2 w-100" src="{% static 'image/no_user.webp' %}" alt="Profile">
{% endif %}
{% endif %}
</div>
</button>
<div class="dropdown-menu bg-dark">
<div><span class="text-center text-white"><p class="text-white m-1">Welcome, {{user}}</p></span></div>
<hr style="color: white">
<div><a class="dropdown-item text-white mt-0 pt-0 htmxLink"
hx-get="/raptormc/api/html/{{user_path}}/{{user.get_username|slugify}}"
hx-target='#home' hx-push-url='/{{user_path}}/{{user.get_username|slugify}}' >Profile</a></div>
{% if user.is_staff %}
<div><a class="dropdown-item text-white" href="{% url 'admin:index' %}">Admin</a></div>
{% endif %}
<div><a class="dropdown-item text-white" href="{% url 'authprofiles:logout' %}">Logout</a></div>
</div>
</div>
</div>
{% else %}
<div id="registeration_modal">
<div class="modal fade" id="register_modal" tabindex="-1" aria-labelledby="Create Account" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark text-white">
<button type="button" class="btn-close btn-close-white m-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-header">
Create Account
</div>
<div class="modal-body" id="mod_app_modal_body">

<header class="bg-dark text-white p-1">
<p class="pageContent">User profiles, and functionality that comes with it, are still under development. Feel free to create an account now, to have access to it when it is finished.</p>
<p class="pageContent">You can either register manually with the form, or with Discord</p>
</header>

<section>

<div class="p-3 container">
<a role="button" href="{% url 'authprofiles:login_oauth' %}" class="btn btn-discord w-100">
Register with Discord
</a>
</div>

</section>

<section>

{% if registered %}
<div class="card bg-light p-3 opacity-75 container">
<h3 class="pageHeader fw-bold text-center">Thank you for creating an account!</h3>
</div>
{% else %}
<div class="bg-dark p-3 opacity-75 container">
<div id="register_form_replace"></div>
</div>
{% endif %}

</section>

</div>
</div>
</div>
</div>
</div>
<div id="reset_password_modal">
<div class="modal fade" id="resetpass_modal" tabindex="-1" aria-labelledby="Reset Password" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark text-white">
<button type="button" class="btn-close btn-close-white m-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-header">
Reset Password
</div>
<div class="modal-body" id="mod_app_modal_body">

<header class="bg-dark text-white p-1">
<p class="pageContent">If you have forgotten the password for your account, you can send a password reset link to the email associated with your account here.</p>
<p class="pageContent">After clicking "Send Reset Link", wait for confirmation message to appear.</p>
</header>

<section>

{% if messages %}
<ul class="messages alert alert-warning">
{% for message in messages %}
{{message}}
{% endfor %}
</ul>
{% endif %}

</section>

<section>

<div class="bg-dark p-3 opacity-75 container">
<div id="reset_password_form_replace"></div>
</div>

</section>

</div>
</div>
</div>
</div>
</div>
<div class="float-end">
<div class="dropstart">
<button class="btn dropdown-toggle d-flex" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<div id="profile_picture_box">
<img id="noProfilePicture" class="border border-secondary border-2 w-100" src="{% static 'image/no_user.webp' %}" alt="Profile">
</div>
</button>
<ul class="dropdown-menu bg-dark">

<section class="opacity-75 w-100 container">

{% include "authprofiles/profile_dropdown_noauth.html" %}

{% if messages %}
<ul class="messages alert alert-warning">
{% for message in messages %}
{{message}}
{% endfor %}
</ul>
{% endif %}
<div id="user_login_form"></div>
<div class="p-1 mb-0 text-center">
<p class="pageContent text-white">No Account?<button id="registerModalButton" class="btn btn-primary mt-2 mb-0" data-bs-toggle="modal" data-bs-target="#register_modal">Register</button></p>
<p class="pageContent text-white">Forgot Password?<button id="resetpassModalButton" class="btn btn-primary mt-2 mb-0 fs-6 p-1 pt-2 pb-2" data-bs-toggle="modal" data-bs-target="#resetpass_modal">Reset Password</button></p>
</div>


</section>

</ul>
</div>
</div>
{% endif %}

<script>
Expand All @@ -166,4 +17,4 @@ <h3 class="pageHeader fw-bold text-center">Thank you for creating an account!</h
$('.modal-backdrop').remove();
});
});
</script>
</script>
56 changes: 56 additions & 0 deletions raptorWeb/templates/authprofiles/profile_dropdown_auth.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{% load static %}

<div class="float-end h-100 d-flex">
<div class="dropstart m-auto">
<button class="btn dropdown-toggle d-flex" data-bs-toggle="dropdown" aria-expanded="false">
<div id="profile_picture_box">
{% if loaded_user.user_profile_info.profile_picture %}
{% if loaded_user.is_staff %}
<img id="profilePicture" class="border border-danger border-2 w-100"
src="{{ loaded_user.user_profile_info.profile_picture.url }}"
alt="Profile"
onerror=this.src="{% static 'image/no_user.webp' %}">
{% else %}
<img id="profilePicture" class="border border-secondary border-2 w-100"
src="{{ loaded_user.user_profile_info.profile_picture.url }}"
alt="Profile"
onerror=this.src="{% static 'image/no_user.webp' %}">
{% endif %}
{% else %}
{% if loaded_user.is_staff %}
<img id="noProfilePicture" class="border border-danger border-2 w-100"
src="{% static 'image/no_user.webp' %}"
alt="Profile">
{% else %}
<img id="noProfilePicture" class="border border-secondary border-2 w-100"
src="{% static 'image/no_user.webp' %}"
alt="Profile">
{% endif %}
{% endif %}
</div>
</button>
<div class="dropdown-menu bg-dark">
<div><span class="text-center text-white">
<p class="text-white m-1">Welcome, {{user}}</p>
</span></div>
<hr style="color: white">
<div>
<a class="dropdown-item text-white mt-0 pt-0 htmxLink"
hx-get="/raptormc/api/html/{{user_path}}/{{user.get_username|slugify}}"
hx-target='#home'
hx-push-url='/{{user_path}}/{{user.get_username|slugify}}'
>
Profile
</a>
</div>
{% if user.is_staff %}
<div><a class="dropdown-item text-white" href="{% url 'admin:index' %}">
Admin
</a></div>
{% endif %}
<div><a class="dropdown-item text-white" href="{% url 'authprofiles:logout' %}">
Logout
</a></div>
</div>
</div>
</div>
Loading

0 comments on commit 4ae60ea

Please sign in to comment.