Skip to content
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

Jump to bottom

Admin: Log in page #2371

Merged
merged 6 commits into from
Sep 19, 2024
Merged

Admin: Log in page #2371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ef113e7
feat(admin): first pass @ login page style, title override
machikoyasuda Sep 18, 2024
a56e42d
feat(admin): style Google SSO button, branding, button, focus
machikoyasuda Sep 18, 2024
6de5abe
fix(admin): remove dark mode, set styles.css to override Bootstrap
machikoyasuda Sep 18, 2024
a0bd133
chore(admin): remove jQuery from extrastyle
machikoyasuda Sep 18, 2024
f8b67fe
fix(admin): hardcode title, header into template instead
machikoyasuda Sep 19, 2024
27bbf27
chore: add comment to explain extrastyle
machikoyasuda Sep 19, 2024
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
119 changes: 108 additions & 11 deletions benefits/static/css/admin/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
@import "../variables.css";

/* CSS Variable overrides */

html[data-theme="light"],
:root {
--primary: #ffffff;
--secondary: var(--dark-color);
--link-fg: #ffffff;
--body-quiet-color: var(--dark-color);
--button-bg: #ffffff;
}

/* Buttons */
/* Primary Button: Use all three classes: btn btn-lg btn-primary */
/* Outline Primary Button: Use all three classes: btn btn-lg btn-outline-primary */
Expand All @@ -20,11 +31,13 @@
color: var(--primary-color);
}

.login input[type="submit"],
.btn.btn-lg.btn-primary {
background-color: var(--primary-color);
}

.btn.btn-lg.btn-primary,
.login input[type="submit"],
.btn.btn-lg.btn-outline-primary {
border-color: var(--primary-color);
border-width: 2px;
Expand All @@ -36,6 +49,7 @@
}

.btn.btn-lg.btn-primary:hover,
.login input[type="submit"]:hover,
.btn.btn-lg.btn-outline-primary:hover {
background-color: var(--hover-color);
border-color: var(--hover-color);
Expand All @@ -48,7 +62,11 @@
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible,
.btn-outline-light:focus,
.btn-ouline-dark:focus-visible {
.btn-ouline-dark:focus-visible,
input[type="text"]:focus,
input[type="password"]:focus,
.google-login-btn a:focus,
.login input[type="submit"]:focus {
Comment on lines +65 to +69
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adds Benefits-style focus styles to all buttons and inputs

outline: 3px solid var(--focus-color) !important;
outline-offset: 2px !important;
box-shadow: none !important; /* override CA State Web Template */
Expand All @@ -61,19 +79,13 @@
letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
}

html[data-theme="light"],
:root {
--primary: #ffffff;
--secondary: var(--dark-color);
--link-fg: #ffffff;
--body-quiet-color: var(--dark-color);
}

#user-tools,
#logout-form button {
#logout-form button,
.login .submit-row input[type="submit"] {
text-transform: unset;
}

/* Eligibility Page */
.checkbox-parent .form-group:last-of-type .col-12 {
display: flex;
flex-direction: row-reverse;
Expand All @@ -90,9 +102,94 @@ html[data-theme="light"],
row-gap: 1rem;
}

/* Enrollment */
/* Enrollment Page*/
iframe.card-collection {
border: 0px;
width: 100%;
height: 60vh;
}

/* Login Page */
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is copied + pasted from https://github.com/django/django/blob/9ca1f6eff6f19d1ae074d289c6c4209073351805/django/contrib/admin/static/admin/css/login.css#L1 except with a few modifications necessary for the design of our page.

.login #header {
padding: 0 !important;
}

.login #branding {
flex-direction: column;
width: 100%;
}

.login #container {
background: var(--body-bg);
border: 1px solid var(--hairline-color);
overflow: hidden;
width: 28em;
min-width: 300px;
margin: 100px auto;
height: auto;
}

.login #login-form {
display: grid;
gap: 1em;
}

.login .form-row label {
display: block;
line-height: 2em;
}

.login .form-row #id_username,
.login .form-row #id_password {
padding: 8px;
width: 100%;
box-sizing: border-box;
}

.login .password-reset-link {
text-align: center;
}
Comment on lines +149 to +151
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is directly from https://github.com/django/django/blob/9ca1f6eff6f19d1ae074d289c6c4209073351805/django/contrib/admin/static/admin/css/login.css#L59 but I don't know how to trigger it or if it shows up in our app

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If your database has the user from the sample fixtures (CST User) and you log in as that user, you'll see a "Change password" link in the usertools section.

image

... speaking of which, that link takes us to a page that we have not overridden / that doesn't use our extrastyles, so it uses all the default Django styles.

image

I'm not sure if what we should have this link or if we should override it to use our extra styles. I'll create a separate ticket for this.

Copy link
Member

@angela-tran angela-tran Sep 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the link shows up based on if the user "has a usable password":

https://github.com/django/django/blob/1857b6663b664847a426e8c79b8aec42994660ba/django/contrib/admin/templates/admin/base.html#L56-L58

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created #2384

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait, password-reset-link is actually a different thing from what I was talking about.

It's a link on the login page. I guess we wouldn't show it because we don't have a 'admin_password_reset' route defined.

https://github.com/search?q=repo%3Adjango%2Fdjango%20password-reset-link&type=code

https://github.com/django/django/blob/1857b6663b664847a426e8c79b8aec42994660ba/django/contrib/admin/templates/admin/login.html#L59-L61

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://docs.djangoproject.com/en/5.1/ref/contrib/admin/#adding-a-password-reset-feature

I don't think we should worry about adding this now since we ideally want to use SSO long-term

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the other hand, any kind of self-service we can offer to users while we have to manage them locally would be handy.

Let's create another ticket to figure out what to do about the Reset link on the login page.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created #2386 for the reset password link feature


.login .clear {
display: none;
}

/* Login Page: Google SSO Button */
.login .login-btn-area {
width: 100%;
}

.login .google-login-btn {
border: 1px solid var(--bs-primary);
background-color: var(--white);
height: 100%;
border-radius: 4px;
padding: 0;
}

.login .google-login-btn .btn-content {
padding: 13.5px 0;
border-radius: 4px;
}

.login .google-btn-logo {
padding-right: 20px;
background-color: transparent;
}

.login .google-login-btn:hover {
color: var(--white);
background-color: var(--bs-primary);
}

.login .google-login-btn:hover .google-btn-label,
.login .google-login-btn:hover a {
color: var(--bs-white);
}

.login .google-btn-label {
color: var(--bs-primary);
width: auto;
font-weight: var(--medium-font-weight);
font-size: var(--font-size-20px);
}
13 changes: 8 additions & 5 deletions benefits/templates/admin/agency-base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
{% extends "admin/base.html" %}
{% load i18n static %}

{% block dark-mode-vars %}
{% endblock dark-mode-vars %}

{% block extrastyle %}
<link href="{% static "css/admin/styles.css" %}" rel="stylesheet">
<link href="{% static "img/favicon.ico" %}" rel="icon" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script nonce="{{ request.csp_nonce }}"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link href="{% static "css/admin/styles.css" %}" rel="stylesheet">
{% endblock extrastyle %}

{% block title %}
Expand Down
29 changes: 29 additions & 0 deletions benefits/templates/admin/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{% extends "admin/login.html" %}
{% load i18n static %}

{% block dark-mode-vars %}
{% endblock dark-mode-vars %}
Comment on lines +4 to +5
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes the dark mode CSS styles, effectively disabling dark mode on Admin. cc @thekaveman @angela-tran @lalver1

Right now, the Bootstrap body class declarations are overriding Django's, and we can't really change that. The extrastyle block comes after the style files from Django, and CSS reads the last file's overrides. So the dark mode looks messed up - the text is all dark (as set by Bootstrap). If we could easily set Django's CSS files to be declared last and Bootstrap's first, then we could implement dark mode. But for now it's kinda complex so I think we should just soft launch this site w/o dark mode.


{% block title %}
Log in | Cal-ITP Benefits Administrator
{% endblock title %}
Comment on lines +7 to +9
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hardcoded the title here, instead of setting variables for site_header and site_title. I discussed with Andy and he's going to be adding official titles into Miro so that we can update all of the titles throughout the Admin app in a clean way, and I made a ticket to document that these titles are still TBD, but need to fixed in the future #2381.


{% block extrastyle %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a comment here to say why we're not bringing in jQuery here / why we're using our own extrastyle block here instead of extending from agency-base.html?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! Added here: 27bbf27

{% comment %} Overriding instead of extending agency-base here to remove jQuery declaration, which admin/login.html includes on its own {% endcomment %}
<link href="{% static "img/favicon.ico" %}" rel="icon" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link href="{% static "css/admin/styles.css" %}" rel="stylesheet">
{% endblock extrastyle %}

{% block branding %}
<div class="d-flex justify-content-center w-100 bg-primary">
<img class="my-3" src="{% static "img/logo-lg.svg" %}" width="220" height="50" alt="California Integrated Travel Project: Benefits logo (large)" />
</div>

<div id="site-name">
<h1 class="text-center text-white fs-3 py-3 m-0">Administrator</h1>
</div>
{% endblock branding %}
Loading