Merge pull request #58 from djpugh/feature/container-class

docs/source/advanced.rst

@@ -66,6 +66,9 @@ These jinja templates also are structured (see :doc:`module/fastapi_aad_auth.ui`
 
 And can easily be extended or customised.
 
+Lastly, there is a context option on the :class:`~fastapi_aad_auth.config.LoginUIConfig` which can set additional context variables including the ``containerClass``
+to change the CSS ``div`` class to use.
+
 
 Token Scopes
 ~~~~~~~~~~~~

docs/source/conf.py

@@ -509,7 +509,7 @@ def _process_variables(self, object, path):
                 config_vars.append(f'  * ``{path}.{field_name}``{type_}: {field.field_info.description}{default_str}{env_var}')
         for field_name in sorted(config_nested.keys()):
             config_vars.append(f'  ``{path}.{field_name}``:')
-            for var in config_nested[field_name]:              
+            for var in config_nested[field_name]:
                 config_vars.append(f'  {var}')
         return config_vars
 

docs/source/usage.rst

@@ -28,7 +28,7 @@ Configure a web platform for the UI based redirection (or whatever else is set i
     https://<hostname>/oauth/aad/redirect
 
 e.g. for local development::
-    
+
     http://localhost:8000/oauth/aad/redirect
 
 .. warning::
@@ -40,21 +40,21 @@ Youu also need to decide whether the application is multi-tenant or single-tenan
 
 .. figure:: figures/App-Registration-Redirect-URIs.PNG
    :alt: Overview of redirect URI configuration for local testing
-   
-   An example configuration for rediredt URIs for testing an application
+
+   An example configuration for redirect URIs for testing an application
 
 On the "Expose an API tab", you need to set the Application ID URI
 
 .. figure:: figures/App-Registration-App-ID.PNG
    :alt: Overview of app id URI
-   
+
    An example configuration for api Scopes for testing an application
 
 and add scopes as configured for the application (e.g. the default ``openid`` scope is needed)
 
 .. figure:: figures/App-Registration-Scopes.PNG
    :alt: Overview of app scopes
-   
+
    An example configuration for api Scopes for testing an application
 
 .. _config-fastapi_aad_auth-env:
@@ -88,7 +88,7 @@ You can initialise it with::
     from fastapi_aad_auth import AADAuth, AuthenticationState, Config
     auth_provider = AADAuth()
 
-    # If you had a config that wasn't set in the environment, you could use 
+    # If you had a config that wasn't set in the environment, you could use
     # auth_provider = AADAuth(Config(<my config kwargs>)
 
 The full set of configuration options is documented in :doc:`config`
@@ -133,11 +133,11 @@ The :class:``fastapi.FastAPI`` ``swagger_ui_init_oauth`` variable is set automat
 
     auth_provider.configure_app(app)
 
- 
+
 Authenticating a client
 ~~~~~~~~~~~~~~~~~~~~~~~
 
-If you are authenticating an e.g. console client, you need to get an access token via the Azure active directory configuration, there are examples of this (developed from the 
+If you are authenticating an e.g. console client, you need to get an access token via the Azure active directory configuration, there are examples of this (developed from the
 `Azure Docs <https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-desktop-acquire-token?tabs=python#command-line-tool-without-a-web-browser>`_), e.g.::
 
     """Device Code authenticator for a target client"""
@@ -167,9 +167,9 @@ If you are authenticating an e.g. console client, you need to get an access toke
             self.msal_application = msal.PublicClientApplication(
                 client_id,
                 authority=self._authority)
-        
+
         def get_token(self):
-            """Authenticate via device code flow""" 
+            """Authenticate via device code flow"""
             # From https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-desktop-acquire-token?tabs=python#command-line-tool-without-a-web-browser
             flow = self.msal_application.initiate_device_flow(scopes=self._scopes)
             if "user_code" not in flow:
@@ -180,7 +180,7 @@ If you are authenticating an e.g. console client, you need to get an access toke
             sys.stdout.flush()  # Some terminal needs this to ensure the message is shown
             result = self.msal_application.acquire_token_by_device_flow(flow)
             return result
-        
+
         def get_session(self):
             tokens = self.get_token()
             access_token = tokens['access_token']
@@ -206,5 +206,5 @@ Tools like Postman allow you to configure authentication via oauth - this shows
 
 .. figure:: figures/Postman-Auth-Config.PNG
    :alt: Overview of authenticating for postman
-   
+
    An example of how to configure client credentials (using another app registration) for postman - replace the {tenant} and {appid} info, along with the client id and client secret

src/fastapi_aad_auth/ui/error.html

@@ -1,6 +1,10 @@
 {% extends "fastapi_aad_auth.ui:base.html" %}
 {% block Content %}
+    {% if containerClass %}
+        <main class='{{containerClass}}' role="main">
+    {% else %}
         <main class='container' role="main">
+    {% endif %}
         {% block ContentHeader %}
             {% if logo %}
                 {{logo | safe }}

src/fastapi_aad_auth/ui/login.html

@@ -1,6 +1,10 @@
 {% extends "fastapi_aad_auth.ui:base.html" %}
 {% block Content %}
+    {% if containerClass %}
+        <div class='{{containerClass}}'>
+    {% else %}
         <div class='container'>
+    {% endif %}
             <div class="cover-container d-flex h-100 p-3 mx-auto flex-column text-center justify-content-center">
                 <main class="inner-cover">
                 {% block ContentHeader %}

src/fastapi_aad_auth/ui/user.html

@@ -6,7 +6,12 @@
 {% endblock CSS %}
 
 {% block Content %}
+    {% if containerClass %}
+        <div class='{{containerClass}}'>
+    {% else %}
         <div class='container'>
+    {% endif %}
+
         {% block ContentHeader %}
             <div class="cover-container d-flex h-5 p-3 mx-auto flex-column text-center justify-content-center">
                 <main class="inner-cover">