Skip to content

UI refinements #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vaibhavs-mishra merged 1 commit into from
Mar 24, 2025
Merged

UI refinements #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Algolyzer/Algolyzer/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
from django.contrib import admin
from django.urls import include, path

admin.site.site_header = "Algolyzer Admin"
admin.site.site_title = "Algolyzer"
admin.site.index_title = "Welcome to Algolyzer"

urlpatterns = [
# admin url
path("admin/", admin.site.urls),
Expand Down
Binary file added Algolyzer/static/algolyzer.ico
View file
Open in desktop
Binary file not shown.
Binary file removed Algolyzer/static/algolyzer.png
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion Algolyzer/templates/account/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,5 +140,5 @@ <h1 class="text-2xl font-bold text-center text-primary">
`;
}
}
</script
</script>
{% endblock %}
145 changes: 71 additions & 74 deletions Algolyzer/templates/account/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,87 +5,84 @@
{% endblock head_title %}

{% block content %}
<div class="flex justify-center items-center min-h-screen bg-base-200">
<div class="card w-full max-w-md shadow-lg bg-base-100">
<div class="card-body">
<h1 class="text-2xl font-bold text-center text-primary">
{% trans "Sign Up" %}
</h1>
<p class="text-sm text-center text-secondary mt-2">
{% blocktranslate %}
Already have an account? Then please
<a href="{{ login_url }}" class="link link-primary">sign in</a>.
{% endblocktranslate %}
</p>

{% if not SOCIALACCOUNT_ONLY %}
<form method="post" action="{% url 'account_signup' %}" class="mt-6 space-y-4">
{% csrf_token %}
{% for field in form %}
<div class="form-control relative">
<input
type="{% if field.name == 'password1' or field.name == 'password2' %}password{% else %}{{ field.type }}{% endif %}"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default:'' }}"
placeholder="{{field.label}}"
class="input input-bordered input-primary"
>
{% if field.name == 'password1' or field.name == 'password2' %}
<button
type="button"
class="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2"
onclick="togglePasswordVisibility('{{ field.id_for_label }}')"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825l4.5-4.5M21 12a9 9 0 11-6-8.47" />
</svg>
</button>
{% endif %}
{% for error in field.errors %}
<span class="text-error text-sm">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
{{ redirect_field }}

<button type="submit" class="btn btn-primary btn-block">
<div class="flex justify-center items-center min-h-screen bg-base-200">
<div class="card w-full max-w-md shadow-lg bg-base-100">
<div class="card-body">
<h1 class="text-2xl font-bold text-center text-primary">
{% trans "Sign Up" %}
</button>
</form>
{% endif %}
</h1>
<p class="text-sm text-center text-secondary mt-2">
{% blocktranslate %}
Already have an account? Then please
<a href="{{ login_url }}" class="link link-primary">sign in</a>.
{% endblocktranslate %}
</p>

{% if PASSKEY_SIGNUP_ENABLED %}
<div class="divider">OR</div>
<a href="{{ signup_by_passkey_url }}" class="btn btn-outline btn-primary btn-block">
{% trans "Sign up using a passkey" %}
</a>
{% endif %}
{% if not SOCIALACCOUNT_ONLY %}
<form method="post" action="{% url 'account_signup' %}" class="mt-6 space-y-4">
{% csrf_token %}
{% for field in form %}
<div class="form-control relative">
<input
type="{% if field.name == 'password1' or field.name == 'password2' %}password{% else %}{{ field.type }}{% endif %}"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default:'' }}"
placeholder="{{field.label}}"
class="input input-bordered input-primary"
>
{% if field.name == 'password1' or field.name == 'password2' %}
<button
type="button"
class="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2"
onclick="togglePasswordVisibility('{{ field.id_for_label }}', this)"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 eye-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<!-- Open Eye Icon -->
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
{% endif %}
{% for error in field.errors %}
<span class="text-error text-sm">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
{{ redirect_field }}

{% if SOCIALACCOUNT_ENABLED %}
<div class="divider">Or Use a Third Party App</div>
<div class="text-center">
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
<button type="submit" class="btn btn-primary btn-block">
{% trans "Sign Up" %}
</button>
</form>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

{% block extra_body %}
{{ block.super }}
{% endblock extra_body %}

{% block scripts %}
<script>
function togglePasswordVisibility(inputId) {
const input = document.getElementById(inputId);
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
<script>
function togglePasswordVisibility(inputId, button) {
const input = document.getElementById(inputId);
const icon = button.querySelector(".eye-icon");

if (input.type === "password") {
input.type = "text";
// Change to Closed Eye Icon
icon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12s3-5 9-5 9 5 9 5-3 5-9 5-9-5-9-5z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.53 9.53a3 3 0 014.24 4.24" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l22 22" />
`;
} else {
input.type = "password";
// Change to Open Eye Icon
icon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
`;
}
}
}
</script>
{% endblock %}
</script>
{% endblock %}
8 changes: 4 additions & 4 deletions Algolyzer/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Django App{% endblock %}</title>
<title>{% block title %}Algolyzer{% endblock %}</title>
<!-- Link to the main CSS file -->
{% load static %}
<link rel="stylesheet" href="{% static 'output.css' %}">
<link rel="icon" type="image/x-icon" href="{% static 'algolyzer.png' %}">
<link rel="icon" type="image/x-icon" href="{% static 'algolyzer.ico' %}">
<!-- JS scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Additional head content can be added by child templates -->
Expand Down Expand Up @@ -53,7 +53,7 @@
</ul>
</div>
<a href="{%url "home" %}" class="btn btn-ghost text-xl">
<img alt="home" class='w-full h-full object-cover' src="{% static 'algolyzer.png' %}" />
<img alt="home" class='w-full h-full object-cover' src="{% static 'algolyzer.ico' %}" />
</a>
</div>
<div class="navbar-center hidden lg:flex">
Expand Down Expand Up @@ -117,7 +117,7 @@ <h6 class="footer-title">Legal</h6>
<footer class="footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4">
<aside class="grid-flow-col items-center">
<a href="{% url 'home' %}" class="w-[30px]">
<img alt="Algolyzer logo" class="w-full h-full object-cover" src="{% static 'algolyzer.png' %}" />
<img alt="Algolyzer logo" class="w-full h-full object-cover" src="{% static 'algolyzer.ico' %}" />
</a>
<p>
pbvs
Expand Down