UI Improvements (#7)

* Initial version with UI templates

* Implement basic screens

* Linting & bump to 0.3.0

* Tick off some TODOs

custom_components/auth_oidc/endpoints/callback.py

@@ -4,7 +4,7 @@ from homeassistant.components.http import HomeAssistantView
 from aiohttp import web
 from ..oidc_client import OIDCClient
 from ..provider import OpenIDAuthProvider
-from ..helpers import get_url
+from ..helpers import get_url, get_view
 
 PATH = "/auth/oidc/callback"
 
@@ -30,21 +30,29 @@ class OIDCCallbackView(HomeAssistantView):
         state = params.get("state")
 
         if not (code and state):
-            return web.Response(
-                headers={"content-type": "text/html"},
-                text="<h1>Error</h1><p>Missing code or state parameter</p>",
+            view_html = await get_view(
+                "error",
+                {
+                    "error": "Missing code or state parameter.",
+                    "link": get_url("/auth/oidc/redirect"),
+                },
             )
+            return web.Response(text=view_html, content_type="text/html")
 
         redirect_uri = get_url("/auth/oidc/callback")
         user_details = await self.oidc_client.async_complete_token_flow(
             redirect_uri, code, state
         )
         if user_details is None:
-            return web.Response(
-                headers={"content-type": "text/html"},
-                text="<h1>Error</h1><p>Failed to get user details, see console.</p>",
+            view_html = await get_view(
+                "error",
+                {
+                    "error": "Failed to get user details, "
+                    + "see Home Assistant logs for more information.",
+                    "link": get_url("/auth/oidc/redirect"),
+                },
             )
+            return web.Response(text=view_html, content_type="text/html")
 
         code = await self.oidc_provider.async_save_user_info(user_details)
-
         return web.HTTPFound(get_url("/auth/oidc/finish?code=" + code))

custom_components/auth_oidc/endpoints/finish.py

@@ -2,8 +2,7 @@
 
 from homeassistant.components.http import HomeAssistantView
 from aiohttp import web
-
-from ..helpers import get_url
+from ..helpers import get_view, get_url
 
 PATH = "/auth/oidc/finish"
 
@@ -21,18 +20,16 @@ class OIDCFinishView(HomeAssistantView):
         code = request.query.get("code", "FAIL")
         link = get_url("/")
 
+        view_html = await get_view("finish", {"code": code, "link": link})
         return web.Response(
             headers={
                 "content-type": "text/html",
+                # Set a cookie to enable autologin on only the specific path used
+                # for the POST request, with all strict parameters set
+                # This cookie should not be read by any Javascript or any other paths.
                 "set-cookie": "auth_oidc_code="
                 + code
                 + "; Path=/auth/login_flow; SameSite=Strict; HttpOnly; Max-Age=300",
             },
-            text=f"<h1>Done!</h1><p>Your code is: <b>{code}</b></p>"
-            + "<p>Please return to the Home Assistant login "
-            + "screen (or your mobile app) and fill in this code into the single login field. "
-            + "It should be visible if you "
-            + "select 'Login with OpenID Connect (SSO)'.</p><p><a href='"
-            + link
-            + "'>Click here to login automatically (on desktop).</a></p>",
+            text=view_html,
         )

custom_components/auth_oidc/endpoints/redirect.py

@@ -5,7 +5,7 @@ from aiohttp import web
 from homeassistant.components.http import HomeAssistantView
 
 from ..oidc_client import OIDCClient
-from ..helpers import get_url
+from ..helpers import get_url, get_view
 
 PATH = "/auth/oidc/redirect"
 
@@ -29,10 +29,14 @@ class OIDCRedirectView(HomeAssistantView):
         if auth_url:
             return web.HTTPFound(auth_url)
 
-        return web.Response(
-            headers={"content-type": "text/html"},
-            text="<h1>Plugin is misconfigured, discovery could not be obtained</h1>",
+        view_html = await get_view(
+            "error",
+            {
+                "error": "Integration is misconfigured, discovery could not be obtained.",
+                "link": get_url("/auth/oidc/redirect"),
+            },
         )
+        return web.Response(text=view_html, content_type="text/html")
 
     async def post(self, request: web.Request) -> web.Response:
         """POST"""

custom_components/auth_oidc/endpoints/welcome.py

@@ -2,6 +2,7 @@
 
 from aiohttp import web
 from homeassistant.components.http import HomeAssistantView
+from ..helpers import get_view
 
 PATH = "/auth/oidc/welcome"
 
@@ -15,8 +16,5 @@ class OIDCWelcomeView(HomeAssistantView):
 
     async def get(self, _: web.Request) -> web.Response:
         """Receive response."""
-
-        return web.Response(
-            headers={"content-type": "text/html"},
-            text="<h1>OIDC Login</h1><p><a href='/auth/oidc/redirect'>Login with OIDC</a></p>",
-        )
+        view_html = await get_view("welcome")
+        return web.Response(text=view_html, content_type="text/html")