Giter VIP home page Giter VIP logo

danihodovic / django-allauth-ui Goto Github PK

View Code? Open in Web Editor NEW
183.0 11.0 24.0 608 KB

Nice looking templates for django-allauth

Home Page: https://django-allauth-ui.hodovi.ch

License: MIT License

Python 36.95% HTML 54.93% JavaScript 4.94% CSS 1.23% Dockerfile 1.48% Shell 0.48%
django django-allauth python auth django-auth django-social python-social-auth templates template tailwind tailwindcss

django-allauth-ui's Introduction

AllAuth UI

UI templates for django-allauth built with Tailwind.

django-allauth is a great library, but the templates it provides out of the box are minimal html. I usually end up re-designing the login / logout / signup pages for each new Django project. This library aims at providing decent defaults for new projects.

See the deployed demo at: https://django-allauth-ui.hodovi.ch.

Table of contents

Features

  • Responsive design suitable for device sizes from mobile to desktop
  • Styled social login themes
  • Additional error information when social logins fail

Installation

pip install django-allauth-ui
pip install django-widget-tweaks

django-allauth-ui depends on django-widget-tweaks to render form fields. Make sure to install django-widget-tweaks and add it to the INSTALLED_APPS.

Add django-allauth-ui before django-allauth in your INSTALLED_APPS. See ./tests/settings.py for an example.

INSTALLED_APPS = [
    "allauth_ui",
    "allauth",
    "allauth.account",
    "allauth.socialaccount",
    "allauth.socialaccount.providers.github",
    "widget_tweaks",
]

Note:

When going to production you should run python manage.py collectstatic

Screenshots

Log In Sign Up Password Reset

Generating screenshots

convert "$1" -crop 1072x901+436+200 crop_signin.png

Hacking on the project

# Clone the repo
git clone [email protected]:danihodovic/django-allauth-ui.git
cd django-allauth-ui.git

# Create the virtual env
python -m venv .venv
# Activate the virtual env. This has to be done every time you enter the directory.
source .venv/bin/activate

# Install the dependencies
pip install --upgrade pip poetry
poetry install

# Install tailwind
npm install

# Run the migrations
./manage.py migrate

# Add sample social providers
./manage.py create_test_providers

# Start the server
./manage.py runserver_plus

# Start the tailwind compilation process in another terminal
npm run-script build:watch

Make changes in allauth_ui/templates and open the browser at http://localhost:8000/accounts/login/.

Once you're done compile tailwind with npm run-script build and submit a pull-request ๐Ÿƒ

Contributors

Made with contrib.rocks.

django-allauth-ui's People

Contributors

adinhodovic avatar anyidea avatar atopheim avatar cro avatar danihodovic avatar evelyn-ryan avatar filip-dobrovolny-csob-cz avatar mdslino avatar mohmyo avatar nicokant avatar tjmoon0104 avatar twolfson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

django-allauth-ui's Issues

password_change.html is missing

Hi Dani Hodovic,
congratulations for you great job!
Not sure if it is part of the roadmap but I noticed that the password_change.html, email.html are missing!

link

Provide build instructions/automation

I'm unfamiliar with Tailwind usage - please provide instructions for dev / contribution to this repo, or ideally just a github action that builds the package

Missing view for accounts/email

Thanks for the great package. I am testing adding/removing email addresses and noticed accounts/email is missing your improvements.

error in template socialaccount/base.html

I'm trying to set up django-allauth-ui, but I get an error:
TemplateDoesNotExist at /accounts/ui/login/

In the template socialaccount/base.html on the first line:
{% extends "socialaccount/base.html" %}

What could be the cause of this?

If i changed the order of installed apps to load allauth itself beforehand it barely works (without styling), but this breaks other stuff.

My current allauth version is 0.58.2.

Exceptions raised because of base_color

./logs/app.log:7939:[2024-03-14 09:50:51] DEBUG [django.template._resolve_lookup:925] Exception while resolving variable 'base_color' in template 'socialaccount/login.html'.
./logs/app.log:7946:KeyError: 'base_color'
./logs/app.log:7954:AttributeError: type object 'RequestContext' has no attribute 'base_color'
./logs/app.log:7962:ValueError: invalid literal for int() with base 10: 'base_color'
./logs/app.log:7969:django.template.base.VariableDoesNotExist: Failed lookup for key [base_color] in [{'True': True, 'False': False, 'None': None}, {'csrf_token': <SimpleLazyObject: 'abc123'>, 'request': <ASGIRequest: GET '/accounts/google/login/?process=login&next=%2Fsign-up-proxy%2F'>, 'user': <SimpleLazyObject: <function AuthenticationMiddleware.process_request.<locals>.<lambda> at 0x>>, 'perms': PermWrapper(<SimpleLazyObject: <function AuthenticationMiddleware.process_request.<locals>.<lambda> at 0x>>), 'messages': <FallbackStorage: request=<ASGIRequest: GET '/accounts/google/login/?process=login&next=%2Fsign-up-proxy%2F'>>, 'DEFAULT_MESSAGE_LEVELS': {'DEBUG': 10, 'INFO': 20, 'SUCCESS': 25, 'WARNING': 30, 'ERROR': 40}}, {}, {'provider': <allauth.socialaccount.providers.google.provider.GoogleProvider object at 0x>, 'process': 'login'}, {'block': <Block Node: content. Contents: [<TextNode: '\n    <div class="flex fle'>, <Block Node: whitebox. Contents: [<TextNode: '\n        '>]>, <TextNode: '\n    </div>\n  </div>\n    '>]>}, {'block': <Block Node: whitebox. Contents: [<TextNode: '\n<div class="flex items-c'>, <IfNode>, <TextNode: '\n  </p>\n</div>\n<form meth'>, <django.template.defaulttags.CsrfTokenNode object at 0x7f8e2dc6f990>, <TextNode: '\n  '>, <IncludeNode: template=<FilterExpression '"account/_button.html"'>>, <TextNode: '\n</form>\n'>]>}, {'text': 'Continue'}]

Seems like there is a "with base_color" in account/_button that might be the culprit, but I don't see why it won't just default to bg-blue if it's not found.

Should I set the base_color, if so how?

Feels like I'm missing something and this should be a quick one, @danihodovic.

logout.html button text

Seeing this:

image

But seems to work as expected if I replace:

        {% translate "Sign out" as signout_message }
        {% include "account/_button.html" with text=signout_message %}

with

{% include "account/_button.html" with text=_("Sign out") %}

in templates/account/logout.html

Some kind of scoping issue with signout_message? I'm very new to Django, so very possibly could be some error on my end.

base_color for buttons

Hi! Thanks for your work!

I just installed and it looks great except the buttons are invisible! For example /accounts/password/reset/
image

To debug I checked the html : base_color template variable was missing. I hacked in a context_processor and set {"base_color": "black"}

Then I see the html is (note "black-600"):
<button type="submit" class="flex items-center justify-center w-64 h-12 px-6 mt-8 text-lg text-white uppercase black-600 rounded text-bold hover:black-700">

But that still appears invisible. I removed all other css to confirm it's not a conflict. I'm unfamiliar with tailwind but happy to have a crack at recompiling.

Questions: How do I set base_color properly? How do I make the buttons appear by default?

python 3.6

Any chance this will work with python 3.6 as well? I can not install it because on pipy python 3.8 or higher is required and I am currently running 3.6 for my django-project...

Signup screen with social connectors

It's most typical for websites to show new users a signup screen, which offers username or social signup options. However allauth (and this repo of templates) prefers to show either a username-based signup without social signup options, or a username login form with social options for signup or sign-in. I suggest adding a template/view for the most common pattern, a screen with a signup form (or link to signup form is also fine), and social signin options.

Translation Error

Hi,
I'm having an error while compiling locale with `compilemessages.

I'm using Django 5, the error is the following:

Execution of msgfmt failed: /app/.venv/lib/python3.11/site-packages/allauth_ui/locale/fr/LC_MESSAGES/django.po:226: 'msgstr' is not a valid Python format string, unlike 'msgid'. Reason: In the directive number 1, the character 'p' is not a valid conversion specifier.
msgfmt: found 1 fatal error

MFA

Any plans on adding the MFA to this as well?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.