### Start Fief Development Server

Source: https://github.com/fief-dev/fief/blob/main/README.md

This command initiates the Fief server in development mode. It is typically used after setting up the development environment.

```sh
hatch run dev.server.start
```

--------------------------------

### Path Matching Functions

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/sidebar.html

Provides two utility functions for comparing URL paths. `isExactPath` checks for an exact match, while `isPrefixPath` checks if a given path starts with a specified base path.

```javascript
def isExactPath(href, current) return current == href end
```

```javascript
def isPrefixPath(baseHref, current) return current.startsWith(baseHref) end
```

--------------------------------

### Start Fief Development Worker

Source: https://github.com/fief-dev/fief/blob/main/README.md

This command starts the Fief worker process in development mode. The worker handles background tasks for the application.

```sh
hatch run dev.worker.start
```

--------------------------------

### OAuth Sign-up Providers

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/register.html

Iterates through available OAuth providers to display sign-up options. Each option includes a logo (if available) and a link to initiate the OAuth authorization flow. This requires the `get_oauth_provider_branding` and `url_for` functions.

```jinja2
{% if not finalize and oauth_providers | length > 0 %}
  {% for oauth_provider in oauth_providers %}
    {% set display_name, logo_svg = get_oauth_provider_branding(oauth_provider) %}
      [{% if logo_svg %} ![](data:image/svg+xml;base64,{{ logo_svg }}) {% endif %} {{ _('Sign up with %(provider)s', provider=display_name) }}]({{ url_for('oauth:authorize') }}?tenant={{ tenant.id }}&provider={{ oauth_provider.id }})
    {% endfor %}
{% endif %}
```

--------------------------------

### Initialize PostHog Analytics

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/base.html

This snippet initializes PostHog analytics with a provided API key and host. It also sets a group identifier for the server and optionally identifies the user if a user ID is available. A listener is added to capture page views on HTMX history pushes.

```javascript
if (posthog_api_key) {
  !function(t,e){
    var o,n,p,r;
    e.__SV || (window.posthog=e,e._i=[],e.init=function(i,s,a){
      function g(t,e){
        var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}
      }
      p=t.createElement("script"),p.type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js";
      (r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);
      var u=e;
      void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){
        var e="posthog";
        return"posthog"!==a&&(e+="."+a),
t||(e+=" (stub)"),e
      },u.people.toString=function(){
        return u.toString(1)+".people (stub)"
      };
      o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags group".split(" "),n=0;n<o.length;n++)g(u,o[n])
      e._i.push([i,s,a])
    },e.__SV=1)
  }(document,window.posthog||[]);
  posthog.init('{{ posthog_api_key }}', { api_host: 'https://eu.posthog.com' });
  posthog.group('server', '{{ request.state.server_id }}');
  if (request.state.user_id) {
    posthog.identify('{{ request.state.user_id }}');
  }
  document.addEventListener('htmx:pushedIntoHistory', () => window.posthog.capture('$pageview'));
}
```

--------------------------------

### User Registration Link

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/login.html

Provides a link for new users to sign up if registration is allowed by the tenant. It displays a prompt asking if the user has an account.

```html
{% if tenant.registration_allowed %}

{{ _("Don't have an account?") }} [{{ _('Sign up') }}]({{ tenant.url_path_for(request, 'register:register') }})

{% endif %}
```

--------------------------------

### Email Template Type Column Macro

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/email_templates/table.html

This macro defines how the 'type' column for an email template is displayed in the datatable. It calls a method on the email template object to get its display name.

```jinja
{% macro type_column(email_template) %}
{{ email_template.get_type_display_name() }}
{% endmacro %}
```

--------------------------------

### Conditional Sign-up/Login Links

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/register.html

Displays different content based on whether the user is finalizing sign-up or not. If not finalizing, it provides a link to log in if the user already has an account and the main sign-up button.

```jinja2
{% if finalize %}
  {{ _('Finalize sign up') }}
{% else %}
  [{{ _('I already have an account') }}]({{ tenant.url_path_for(request, 'auth:login') }})
  {{ _('Sign up') }}
{% endif %}
```

--------------------------------

### OAuth Provider Login Options

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/login.html

Displays buttons for signing in via various OAuth providers. It prioritizes the 'login hint' provider if available, followed by other configured providers.

```html
{% if oauth_providers | length > 0 %}

{% if oauth_provider_login_hint %}

{{ oauth_provider_button(oauth_provider_login_hint, tenant )}}

{{ _('Used last') }}

{% endif %} {% for oauth_provider in oauth_providers %} {% if oauth_provider != oauth_provider_login_hint %} {{ oauth_provider_button(oauth_provider, tenant )}} {% endif %} {% endfor %}

{% endif %}
```

--------------------------------

### Create Client Form with Macros

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/clients/create.html

This snippet demonstrates the use of HTML macros to render a form for creating a new client. It includes fields for client details and CSRF protection, along with modal components for user interaction.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/clients/list.html" %} {% block head_title_content %}Create Client · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %}

{% call modal.header() %} {% call modal.title() %}Create Client{% endcall %} {% endcall %} {% call modal.body() %}

{{ forms.form_field(form.name) }} {{ forms.form_field(form.first_party) }} {{ forms.form_field(form.client_type) }} {{ forms.form_field(form.redirect_uris) }} {{ forms.form_field(form.tenant) }} {{ forms.form_csrf_token(form) }}

{% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %}

{% endblock %}
```

--------------------------------

### Authentication Form Fields

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/login.html

Renders the input fields for email and password, along with the CSRF token for security. It also includes a link to initiate the password reset process.

```html
{{ forms.form_field(form.email) }}
{{ forms.form_field(form.password) }}
{{ forms.form_csrf_token(form) }}

[{{ _('I forgot my password') }}]({{ tenant.url_path_for(request, 'reset:forgot') }})
```

--------------------------------

### Navigation Menu Items

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/sidebar.html

Renders various navigation links for the dashboard, including dashboard home, tenants, clients, OAuth providers, users, and more. It utilizes the `menu_item` and `submenu_item` macros.

```html
Close sidebar [![Fief]({{ url_for('dashboard:static', path='fief-logo.svg') }})]({{ url_for('dashboard:index') }})

{{ menu_item( "Dashboard", url_for('dashboard:index'), '', check_fn="isExactPath" ) }} {{ menu_item( "Tenants", url_for('dashboard.tenants:list'), '', ) }} {{ menu_item( "Clients", url_for('dashboard.clients:list'), '', ) }} {{ menu_item( "OAuth Providers", url_for('dashboard.oauth_providers:list'), 'app store', ) }} {{ menu_item( "Users", url_for('dashboard.users:list'), '', ) }} {{ menu_item( "User fields", url_for('dashboard.user_fields:list'), 'tag', ) }} {{ submenu_item( "Access control", request.base_url ~ "admin/access-control", 'lock', [ {"title": "Permissions", "href": url_for('dashboard.permissions:list') }, {"title": "Roles", "href": url_for('dashboard.roles:list') }, ] ) }} {{ submenu_item( "Customization", request.base_url ~ "admin/customization", 'geometry', [ {"title": "Email templates", "href": url_for('dashboard.email_templates:list') }, {"title": "Themes", "href": url_for('dashboard.themes:list') }, ] ) }} {{ menu_item( "Webhooks", url_for('dashboard.webhooks:list'), '', ) }} {{ menu_item( "API Keys", url_for('dashboard.api_keys:list'), '', ) }}
```

--------------------------------

### Import Macros and Extend Base Template (Jinja)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/get/base.html

This snippet demonstrates importing Jinja2 macros for buttons and icons, and extending a base HTML template for user list views. It sets up the basic structure for the admin user list page.

```jinja
{% import "macros/buttons.html" as buttons %} {% import "macros/icons.html" as icons %} {% extends "admin/users/list.html" %}
```

--------------------------------

### Create Tenant Modal - Fief HTML

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/tenants/create.html

This snippet defines the HTML structure for the 'Create Tenant' modal. It includes form fields for tenant name, registration allowance, logo URL, application URL, theme, and OAuth providers, along with CSRF token protection. It utilizes imported macros for rendering form elements, buttons, and modal components.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/tenants/list.html" %} {% block head_title_content %}Create Tenant · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %}

{% call modal.header() %} {% call modal.title() %}Create Tenant{% endcall %} {% endcall %} {% call modal.body() %}

{{ forms.form_field(form.name) }} {{ forms.form_field(form.registration_allowed) }} {{ forms.form_field(form.logo_url) }} {{ forms.form_field(form.application_url) }} {{ forms.form_field(form.theme) }} {{ forms.form_field(form.oauth_providers) }} {{ forms.form_csrf_token(form) }}

{% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %}

{% endblock %}
```

--------------------------------

### Create Data Table with Pagination (HTML)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/macros/datatable.html

This macro generates an HTML data table with support for pagination and column ordering. It imports icons and pagination macros, iterates through columns and data rows, and allows for custom column rendering. Dependencies include macros for icons and pagination, and query parameters for managing table state.

```html
{% import "macros/icons.html" as icons %} {% import "macros/pagination.html" as pagination %} {% macro datatable(data, count, query_parameters, title, columns) %}

{{ title }} {{ count }}

{% for column in columns | selectattr('slug', 'in', query_parameters.columns) %} {% endfor %} {% for row in data %} {% for column in columns | selectattr('slug', 'in', query_parameters.columns) %} {% endfor %} {% endfor %}

{% if column.ordering %} [{{ column.title }} {% if query_parameters.is_ordered(column.ordering, "asc") %} {{ icons.arrow_down('ml-1 w-2 h-2 fill-current') }} {% elif query_parameters.is_ordered(column.ordering, "desc") %} {{ icons.arrow_up('ml-1 w-2 h-2 fill-current') }} {% endif %}](?{{ query_parameters.toggle_field_ordering(column.ordering) }}) {% else %} {{ column.title }} {% endif %}

{{ column.renderer_macro(row, **column.renderer_macro_kwargs) }}

{{ pagination.pagination(count, query_parameters) }}

{% endmacro %}
```

--------------------------------

### HTML Structure for User Management Page

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/list.html

This HTML snippet, likely rendered by Jinja2, outlines the main content area for the users page. It includes a heading, an icon for actions, a loop to render column switchers, a button to create a new user, and conditional rendering for tenant filtering based on the number of tenants available. It also includes a search icon and includes a user table.

```html
Users
=====

{{ icons.ellipsis_vertical('w-4 h-4') }}

{% for column in columns %} {{ column_switcher(column.title, column.slug) }} {% endfor %}

[{{ icons.plus('w-4 h-4') }} Create User]({{ url_for('dashboard.users:create') }})

{% if tenants | length > 1 %} {% set base_button_classes = 'inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border shadow-sm duration-150 ease-in-out' %} {% set inactive_button_classes = 'border-slate-200 hover:border-slate-300 bg-white text-slate-500' %} {% set active_button_classes = 'border-transparent bg-primary-500 text-white' %}

*   [All tenants](?{{ datatable_query_parameters.set_param('tenant', None) }})
{% for tenant in tenants %}*   [{{ tenant.name }}](?{{ datatable_query_parameters.set_param('tenant', tenant.id) }})
{% endfor %}

{% endif %}

 {{ icons.magnifying_glass('w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2') }}

{% include "admin/users/table.html" %}
```

--------------------------------

### HTML Macro: Menu Item

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/sidebar.html

A macro for generating a list item representing a menu entry. It includes an optional icon and allows specifying a path checking function.

```html
{% macro menu_item(title, href, icon, check_fn = 'isPrefixPath') %}*   [
    
    {{ icon | safe }} {{ title }}
    
    ]({{ href }})
{% endmacro %}
```

--------------------------------

### Display Client Details in HTML

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/clients/get/general.html

This snippet shows how to display various client details within an HTML template using Jinja2 syntax. It includes client type, ID, secret, redirect URIs, and ID token encryption status.

```html
{% extends "admin/clients/get/base.html" %} {% block tab %}

*   Type
    
    {{ client.client_type.get_display_name() }}
    
*   ID
    
    {{ client.client_id }}
    
    {{ buttons.clipboard(client.client_id) }}
*   Secret
    
    {{ client.client_secret }}
    
    {{ buttons.clipboard(client.client_secret) }}

Redirect URIs

{% for redirect_uri in client.redirect_uris %}*   {{ redirect_uri }}
    
{% endfor %}

[Edit Client]({{ url_for('dashboard.clients:update', id=client.id) }})

ID Token Encryption

{% if client.encrypt_jwk %} Enabled {% else %} Disabled {% endif %}

{% if client.encrypt_jwk %} Regenerate key {% else %} Generate key {% endif %}

[Delete Client]({{ url_for('dashboard.clients:delete', id=client.id) }})

{% endblock %}
```

--------------------------------

### Create Theme Modal - HTML

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/themes/create.html

This snippet defines the HTML structure for the 'Create Theme' modal. It includes form fields for the theme name, CSRF token, and buttons for canceling and submitting the creation request. It leverages imported HTML macros for rendering.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/themes/list.html" %} {% block head_title_content %}Create Theme · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %}

{% call modal.header() %} {% call modal.title() %}Create Theme{% endcall %} {% endcall %} {% call modal.body() %}

{{ forms.form_field(form.name) }} {{ forms.form_csrf_token(form) }}

{% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %}

{% endblock %}
```

--------------------------------

### Create Tab Navigation Macro (Jinja)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/get/base.html

A Jinja2 macro is defined to generate navigation tabs. It takes a title, a route name, and an active state as input, creating a Markdown-formatted link that highlights the currently active tab.

```jinja
{% macro tab_header(title, route, active) %}*   [{{ title }}]({{ url_for(route, id=user.id) }})
{% endmacro %}
```

--------------------------------

### Create Webhook Form (Jinja/HTML)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/webhooks/create.html

This Jinja/HTML template defines the structure for creating a webhook. It imports macros for common UI elements like buttons, forms, and modals. The template renders a modal dialog containing a form with fields for the webhook URL and events, along with CSRF token protection. It also includes buttons for canceling and submitting the webhook creation.

```jinja
{% import "macros/buttons.html" as buttons %}
{% import "macros/forms.html" as forms %}
{% import "macros/modal.html" as modal %}
{% import "macros/icons.html" as icons %}
{% extends "admin/webhooks/list.html" %}

{% block head_title_content %}
    Create Webhook · {{ super() }}
{% endblock %}

{% set open_modal = true %}

{% block modal %}
    {% call modal.header() %}
        {% call modal.title() %}
            Create Webhook
        {% endcall %}
    {% endcall %}

    {% call modal.body() %}
        {{ forms.form_field(form.url) }}
        {{ forms.form_field(form.events) }}
        {{ forms.form_csrf_token(form) }}
    {% endcall %}

    {% call modal.footer() %}
        Cancel
        {% call buttons.submit('btn-sm') %}
            Create
        {% endcall %}
    {% endcall %}
{% endblock %}
```

--------------------------------

### Create User Access Token Modal (HTML)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/access_token.html

This snippet defines the HTML structure for a modal used to create an access token for a user. It imports macros for buttons, forms, and modals, and includes fields for client selection and scope definition, along with CSRF token submission.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/users/list.html" %} {% block head_title_content %}{{ user.email }} · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %}

{% call modal.header() %} {% call modal.title() %}Create an access token{% endcall %} {% endcall %} {% call modal.body() %}

{{ forms.form_field(form.client) }} {{ forms.form_field(form.scopes) }} {{ forms.form_csrf_token(form) }}

{% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %}

{% endblock %}
```

--------------------------------

### Displaying DNS Records for Tenant Domain Authentication (HTML/Jinja)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/tenants/get/email_domain_authentication.html

This snippet demonstrates how to iterate through DNS records required for domain authentication and display their type, host, and value. It includes logic to show a verification status icon based on whether the record is verified. The code utilizes Jinja2 macros for rendering interactive elements like clipboard buttons and status icons.

```jinja
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/tenants/get/email.html" %} {% block head_title_content %}{{ tenant.name }} · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %} {% call modal.header() %} {% call modal.title() %}Domain authentication for "{{ tenant.email_domain.domain }}"{% endcall %} {% endcall %} {% call modal.body("p-0") %} Add the following DNS records on your domain's DNS provider. When it's done, click on the **Verify** button to check if they are correctly set up. {% for record in tenant.email_domain.records %} Type Host Value Verified {{ record.type | upper }} {{ buttons.clipboard(record.host) }} {{ record.host }} {{ buttons.clipboard(record.value) }} {{ record.value }} {% if record.verified %} {{ icons.check('w-4 h-4 text-green-600') }} {% else %} {{ icons.x_mark('w-4 h-4 text-red-600') }} {% endif %} {% endcall %} {% call modal.footer() %} {{ icons.spinner('hidden group-disabled:block w-4 h-4 shrink-0 mr-2') }} Verify Close {% endcall %} {% endblock %}
```

--------------------------------

### OAuth Provider Button Generation

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/login.html

Generates a button for signing in with a specific OAuth provider. It includes the provider's logo if available and a localized display name. The button links to the OAuth authorization URL, passing tenant and provider IDs.

```html
{% macro oauth_provider_button(oauth_provider, tenant) %}
{% set display_name, logo_svg = get_oauth_provider_branding(oauth_provider) %}
[{% if logo_svg %} ![](data:image/svg+xml;base64,{{ logo_svg }}) {% endif %} {{ _('Sign in with %(provider)s', provider=display_name) }}]({{ url_for('oauth:authorize') }}?tenant={{ tenant.id }}&provider={{ oauth_provider.id }})
{% endmacro %}
```

--------------------------------

### Jinja Macro for Page Preview Form

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/themes/edit.html

This Jinja macro defines a form element for page preview. It uses a 'form-select' class and includes an 'on change' event handler that triggers an HTMX AJAX POST request to update the preview section.

```jinja
{% macro preview() %}

{{ page_preview_form.page( class="form-select w-1/4 mb-2", script=" on change call htmx.ajax( 'POST', `?preview=${event.target.value}`, {source: '#theme-form', target: '#preview'} ) end " ) }}

{% endmacro %}
```

--------------------------------

### Render Sign-up Form Fields

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/register.html

Renders the email field, optional password field, and any other custom fields defined in the form. It also includes the CSRF token for security. This snippet uses Jinja2 templating with macros for form field rendering.

```jinja2
{% import 'macros/forms.html' as forms %}
{% extends "auth/layout.html" %}

{% block head_title_content %}
  {% if finalize %}
    {{ _('Finalize sign up') }}
  {% else %}
    {{ _('Sign up') }}
  {% endif %}
{% endblock %}

{% block title %}
  {% if finalize %}
    {{ _('Finalize sign up') }}
  {% else %}
    {{ _('Sign up') }}
  {% endif %}
{% endblock %}

{% block auth_form %}
  {{ forms.form_field(form.email) }}
  {% if form.password %}
    {{ forms.form_field(form.password) }}
  {% endif %}
  {% for field in form.fields %}
    {{ forms.form_field(field) }}
  {% endfor %}
  {{ forms.form_csrf_token(form) }}
{% endblock %}
```

--------------------------------

### Create OAuth Provider Form

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/oauth_providers/create.html

This snippet defines the HTML structure for creating an OAuth provider. It uses Jinja2 macros for rendering form fields and modal components. The form includes fields for provider, name, OpenID configuration endpoint (optional), client ID, client secret, and scopes, along with CSRF token protection.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/oauth_providers/list.html" %} {% block head_title_content %}Create OAuth Provider · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %} {% call modal.header() %} {% call modal.title() %}Create OAuth Provider{% endcall %} {% endcall %} {% call modal.body() %} {{ forms.form_field(form.provider, **{"hx-post": url_for('dashboard.oauth_providers:create'), "hx-trigger": "change", "hx-target": "#modal"}) }} {{ forms.form_field(form.name) }} {% if form.openid_configuration_endpoint %} {{ forms.form_field(form.openid_configuration_endpoint) }} {% endif %} {{ forms.form_field(form.client_id) }} {{ forms.form_field(form.client_secret) }} {{ forms.form_field(form.scopes) }} {{ forms.form_csrf_token(form) }} {% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %} {% endblock %}
```

--------------------------------

### Code Contributions to Fief Project

Source: https://github.com/fief-dev/fief/blob/main/README.md

This snippet highlights individuals who have contributed code to the Fief project. It lists their GitHub profiles and indicates their code contributions.

```HTML
<td align="center" valign="top" width="14.28%"><a href="https://github.com/zfei"><img src="https://avatars.githubusercontent.com/u/1736058?v=4?s=100" width="100px;" alt="zfei"/><br /><sub><b>zfei</b></sub></a><br /><a href="https://github.com/fief-dev/fief/commits?author=zfei" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="http://razalt.com"><img src="https://avatars.githubusercontent.com/u/10688199?v=4?s=100" width="100px;" alt="oaltun"/><br /><sub><b>oaltun</b></sub></a><br /><a href="https://github.com/fief-dev/fief/commits?author=oaltun" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/yaroslaff"><img src="https://avatars.githubusercontent.com/u/4574588?v=4?s=100" width="100px;" alt="Yaroslav Polyakov"/><br /><sub><b>Yaroslav Polyakov</b></sub></a><br /><a href="https://github.com/fief-dev/fief/commits?author=yaroslaff" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ScottFred"><img src="https://avatars.githubusercontent.com/u/1937793?v=4?s=100" width="100px;" alt="Scott Fredericksen"/><br /><sub><b>Scott Fredericksen</b></sub></a><br /><a href="https://github.com/fief-dev/fief/commits?author=ScottFred" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://robertbabaev.tech/home"><img src="https://avatars.githubusercontent.com/u/32110856?v=4?s=100" width="100px;" alt="Robert Babaev"/><br /><sub><b>Robert Babaev</b></sub></a><br /><a href="https://github.com/fief-dev/fief/commits?author=ApprenticeofEnder" title="Code">💻</a></td>
```

--------------------------------

### Tenant Base URL Column Rendering

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/tenants/table.html

Displays the tenant's base URL and provides a button to copy it to the clipboard. It retrieves the host using the tenant's get_host() method.

```jinja2
{% macro base_url_column(tenant) %}
{% set base_url = tenant.get_host() %}

{{ base_url }} {{ buttons.clipboard(base_url) }}

{% endmacro %}
```

--------------------------------

### Data Table and Purchase Summary Styling

Source: https://github.com/fief-dev/fief/blob/main/fief/services/email_template/templates/base.html

Styles data tables, particularly for purchase summaries. Includes formatting for headers, items, and totals, with borders and alignment for clarity.

```CSS
/* Data table ------------------------------ */
.purchase {
  width: 100%;
  margin: 0;
  padding: 35px 0;
  -premailer-width: 100%;
  -premailer-cellpadding: 0;
  -premailer-cellspacing: 0;
}
.purchase_content {
  width: 100%;
  margin: 0;
  padding: 25px 0 0 0;
  -premailer-width: 100%;
  -premailer-cellpadding: 0;
  -premailer-cellspacing: 0;
}
.purchase_item {
  padding: 10px 0;
  color: #51545E;
  font-size: 15px;
  line-height: 18px;
}
.purchase_heading {
  padding-bottom: 8px;
  border-bottom: 1px solid #EAEAEC;
}
.purchase_heading p {
  margin: 0;
  color: #85878E;
  font-size: 12px;
}
.purchase_footer {
  padding-top: 15px;
  border-top: 1px solid #EAEAEC;
}
.purchase_total {
  margin: 0;
  text-align: right;
  font-weight: bold;
  color: #333333;
}
.purchase_total--label {
  padding: 0 15px 0 0;
}
```

--------------------------------

### Display Email Verification Instructions (HTML/Jinja2)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/dashboard/email/verify.html

This Jinja2 macro renders an informational alert box instructing the user to check their email for a verification code and enter it into the provided form.

```html
{% call alerts.info() %} {{ \_("To complete the email change, please check your email for the verification code. Enter the code below to verify your new email address.") }} {% endcall %}
```

--------------------------------

### Display One-Time Key with Clipboard Button

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/clients/encryption_key.html

This snippet shows how to display a one-time key that is only visible once, along with a button to copy it to the clipboard. It uses Jinja2 templating and custom HTML macros for alerts and buttons. The key is displayed in a modal dialog.

```jinja2
{% import "macros/alerts.html" as alerts %} {% import "macros/buttons.html" as buttons %} {% import "macros/modal.html" as modal %} {% extends layout %} {% block head_title_content %}{{ client.name }} · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %} {% call modal.body() %} {% call alerts.warning() %} The key below will be shown only once. Make sure to copy it and store it somewhere safe. {% endcall %} {{ buttons.clipboard(key | tojson | trim | forceescape) }} {{ key | tojson(indent=4) | trim }} {% endcall %} {% call modal.footer() %} Close {% endcall %} {% endblock %}
```

--------------------------------

### HTML Macro: Submenu Item

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/sidebar.html

A macro for creating a main submenu item that can contain multiple subitems. It includes an icon and a dropdown indicator.

```html
{% macro submenu_item(title, base_href, icon, items) %}*   {{ icon | safe }} {{ title }}
    
    {{ icons.chevron_down('w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 submenu-chevron') }}
    
    {% for item in items %} {{ submenu_subitem(item.title, item.href) }} {% endfor %}
    
{% endmacro %}
```

--------------------------------

### Render Users Data Table

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/table.html

This macro renders a complete data table for users. It takes the list of users, the total count, query parameters, a table title, and a list of column macros as input, utilizing the imported datatable macro.

```jinja2
{{ datatable.datatable( users, count, datatable_query_parameters, "Users", columns | map("get_column_macro") | list, ) }}
```

--------------------------------

### Jinja Template: Theme Styling

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/base.html

This snippet demonstrates how to apply theme-specific styling within a Jinja template. It imports custom fonts and sets CSS variables based on theme properties like colors, font size, and font family. This allows for dynamic theming of the application.

```jinja
{% block style %} {% if theme %} {% if theme.font_css_url %} @import url('{{ theme.font_css_url }}'); {% endif %} :root { --color-primary-300: {{ theme.primary_color_light }}; --color-primary-500: {{ theme.primary_color }}; --color-primary-600: {{ theme.primary_color_hover }}; --color-input: {{ theme.input_color }}; --color-bg-input: {{ theme.input_color_background }}; --color-light: {{ theme.light_color }}; --color-light-hover: {{ theme.light_color_hover }}; --color-accent: {{ theme.accent_color }}; color: {{ theme.text_color }}; background-color: {{ theme.background_color }}; font-size: {{ theme.font_size }}px; font-family: {{ theme.font_family | safe }}; } {% endif %} {% endblock %}
```

--------------------------------

### Render OAuth Providers Datatable

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/oauth_providers/table.html

This macro renders a datatable for OAuth providers. It takes a list of providers, a count, query parameters, a title, and a list of column macros as input. It uses imported macros for buttons, icons, and the datatable structure.

```html
{% import "macros/buttons.html" as buttons %} {% import "macros/icons.html" as icons %} {% import "macros/datatable.html" as datatable %} {% macro provider_column(oauth_provider) %} [{{ oauth_provider.get_provider_display_name() }}]({{ url_for('dashboard.oauth_providers:get', id=oauth_provider.id) }}) {% endmacro %} {% macro name_column(oauth_provider) %} {{ oauth_provider.name }} {% endmacro %} {{ datatable.datatable( oauth_providers, count, datatable_query_parameters, "OAuth Providers", columns | map("get_column_macro") | list, ) }}
```

--------------------------------

### Create API Key Modal - Jinja2

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/api_keys/create.html

This Jinja2 template defines the structure for a modal dialog to create an API key. It utilizes imported macros for buttons, forms, modals, and icons to render the user interface, including form fields and CSRF token protection.

```jinja2
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/api_keys/list.html" %} {% block head_title_content %}Create API Key · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %}

{% call modal.header() %} {% call modal.title() %}Create API Key{% endcall %} {% endcall %} {% call modal.body() %}

{{ forms.form_field(form.name) }} {{ forms.form_csrf_token(form) }}

{% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %}

{% endblock %}
```

--------------------------------

### Datatable Rendering for Tenants

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/tenants/table.html

Renders a datatable for tenants using a macro. It takes the tenant list, count, query parameters, and column definitions as input.

```jinja2
{{ datatable.datatable( tenants, count, datatable_query_parameters, "Tenants", columns | map("get_column_macro") | list, ) }}
```

--------------------------------

### Render User Aside Navigation (Jinja)

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/get/base.html

This Jinja2 block renders the aside section of the user profile page. It displays the user's email and uses the `tab_header` macro to create navigation links for different user sections, indicating the active tab.

```jinja
{% block aside %}

{{ user.email }}
----------------

{{ tab_header("Account", route="dashboard.users:get", active=tab == "account") }} {{ tab_header("Roles", route="dashboard.users:roles", active=tab == "roles") }} {{ tab_header("Permissions", route="dashboard.users:permissions", active=tab == "permissions") }} {{ tab_header("OAuth", route="dashboard.users:oauth_accounts", active=tab == "oauth") }}

{% block tab %}{% endblock %} {% endblock %}
```

--------------------------------

### Render User Creation Timestamp

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/table.html

This macro formats and displays the creation timestamp of a user. It uses the strftime method to format the date and time according to locale-specific settings ('%x %X').

```jinja2
{% macro created_at_column(user) %}
{{ user.created_at.strftime('%x %X') }}
{% endmacro %}
```

--------------------------------

### Hyperscript: HTMX Event Handling

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/auth/base.html

This snippet illustrates the use of Hyperscript to manage HTMX events. It includes logic to re-swap content on a 400 status code from an HTMX request and to disable submit buttons during form submission to prevent multiple submissions. This enhances the user experience by providing visual feedback and preventing race conditions.

```hyperscript
on htmx:beforeSwap from document if event.detail.xhr.status == 400 set event.detail.shouldSwap to true end end on every htmx:beforeSend from <form /> for submitButton in <button[type='submit'] /> in it toggle @disabled on submitButton until htmx:afterOnLoad end end
```

--------------------------------

### Button Styling and Responsiveness

Source: https://github.com/fief-dev/fief/blob/main/fief/services/email_template/templates/base.html

Styles buttons with customizable background colors (default, green, red) and padding. Includes a media query to ensure buttons are full-width and centered on smaller screens.

```CSS
/* Buttons ------------------------------ */
.button {
  background-color: #3869D4;
  border-top: 10px solid #3869D4;
  border-right: 18px solid #3869D4;
  border-bottom: 10px solid #3869D4;
  border-left: 18px solid #3869D4;
  display: inline-block;
  color: #FFF;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
}

.button--green {
  background-color: #22BC66;
  border-top: 10px solid #22BC66;
  border-right: 18px solid #22BC66;
  border-bottom: 10px solid #22BC66;
  border-left: 18px solid #22BC66;
}

.button--red {
  background-color: #FF6136;
  border-top: 10px solid #FF6136;
  border-right: 18px solid #FF6136;
  border-bottom: 10px solid #FF6136;
  border-left: 18px solid #FF6136;
}

@media only screen and (max-width: 500px) {
  .button {
    width: 100% !important;
    text-align: center !important;
  }
}
```

--------------------------------

### Link to Webhook Log Details

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/webhooks/logs/table.html

Generates a link to view the detailed information for a specific webhook log entry.

```html
{% macro actions_column(webhook_log) %}

[Details]({{ url_for('dashboard.webhooks:log', id=webhook_log.webhook_id, log_id=webhook_log.id) }})

{% endmacro %}
```

--------------------------------

### Render User Creation Form Fields

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/create.html

This snippet demonstrates how to render various form fields for user creation using Jinja2 macros. It includes specific fields like email, email verification, password, and tenant, as well as a loop to render all form fields and the CSRF token.

```jinja2
{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/users/list.html" %} {% block head_title_content %}Create User · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %} {% call modal.header() %} {% call modal.title() %}Create User{% endcall %} {% endcall %} {% call modal.body() %} {{ forms.form_field(form.email) }} {{ forms.form_field(form.email_verified) }} {{ forms.form_field(form.password) }} {{ forms.form_field(form.tenant) }} * * * {% for field in form.fields %} {{ forms.form_field(field) }} {% endfor %} {{ forms.form_csrf_token(form) }} {% endcall %} {% call modal.footer() %} Cancel {% call buttons.submit('btn-sm') %} Create {% endcall %} {% endcall %} {% endblock %}
```

--------------------------------

### Fief Admin Base Template Structure

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/layout.html

This snippet outlines the basic structure of the Fief admin base template, including block definitions for title, body, main content, aside, and modals. It also demonstrates the inclusion of macros and other template partials.

```jinja
{% import "macros/icons.html" as icons %} {% extends "admin/base.html" %} {% block head_title_content %}Fief{% endblock %} {% block body %} {% include "admin/sidebar.html" %} {% include "admin/header.html" %} {% block main %}{% endblock %} {% block aside %}{% endblock %} {% block modal %}{% endblock %} {% endblock %}
```

--------------------------------

### Generate Themes Datatable

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/themes/table.html

This macro generates a complete datatable for themes. It takes the theme data, count, query parameters, table title, and column definitions as input.

```html
{{ datatable.datatable( themes, count, datatable_query_parameters, "Themes", columns | map("get_column_macro") | list, ) }}
```

--------------------------------

### HTML Macro for Code Input Behavior

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/macros/verify_email.html

Defines a JavaScript behavior for code input fields. It handles user input by converting it to uppercase, updating a code value, and managing focus to the next input field, ultimately submitting the form when the last field is filled.

```html
{% macro code_inputs(code_length) %}
behavior CodeInput() on input halt the event set inputValue to value of target of event set value of me to inputValue.toUpperCase()
updateCodeValue()
set nextInput to next <input[type='text' />
if nextInput != null focus() the nextInput
else submitForm()
end
end
end
{% endmacro %}
```

--------------------------------

### Jinja2 Datatable Rendering

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/clients/table.html

This code snippet renders a datatable using a macro imported from `macros/datatable.html`. It passes the client data, count, query parameters, table title, and a list of column macros to the datatable macro for display.

```jinja2
{% import "macros/datatable.html" as datatable %}

{{ datatable.datatable(
    clients,
    count,
    datatable_query_parameters,
    "Clients",
    columns | map("get_column_macro") | list,
) }}
```

--------------------------------

### Generate and Display User Access Token Modal

Source: https://github.com/fief-dev/fief/blob/main/fief/templates/admin/users/access_token_result.html

This snippet shows the HTML structure for a modal that generates and displays a user's access token. It includes important security warnings about handling the token and provides a button to copy the token to the clipboard. The modal is part of the user administration interface.

```html
{% import "macros/alerts.html" as alerts %} {% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/modal.html" as modal %} {% import "macros/icons.html" as icons %} {% extends "admin/users/list.html" %} {% block head_title_content %}{{ user.email }} · {{ super() }}{% endblock %} {% set open_modal = true %} {% block modal %} {% call modal.header() %} {% call modal.title() %}Create an access token{% endcall %} {% endcall %} {% call modal.body() %} {% call alerts.warning() %} Treat this access token with extreme care: it gives access to a user account. Don't save it in a file and don't share it online. {% endcall %} {{ buttons.clipboard(access_token | trim) }} {{ access_token | trim }} It will expire in {{ expires_in }} seconds. {% endcall %} {% call modal.footer() %} Close {% endcall %} {% endblock %}
```