Displays the current authentication mechanism in the admin panel (#981)

* Adds authentication mechanism to admin panel

Adds field to the "Security settings" admin display, showing the
currently configured authentication mechanism.

* Adds 14px margin to admin panel names

app/client/ui/AdminPanel.ts

@@ -105,6 +105,13 @@ export class AdminPanel extends Disposable {
           value: this._buildSandboxingDisplay(owner),
           expandedContent: this._buildSandboxingNotice(),
         }),
+        dom.create(AdminSectionItem, {
+          id: 'authentication',
+          name: t('Authentication'),
+          description: t('Current authentication method'),
+          value: this._buildAuthenticationDisplay(owner),
+          expandedContent: this._buildAuthenticationNotice(owner),
+        })
       ]),
 
       dom.create(AdminSection, t('Version'), [
@@ -156,6 +163,37 @@ isolated from other documents and isolated from the network.'),
     ];
   }
 
+  private _buildAuthenticationDisplay(owner: IDisposableOwner) {
+    return dom.domComputed(
+      use => {
+        const req = this._checks.requestCheckById(use, 'authentication');
+        const result = req ? use(req.result) : undefined;
+        if (!result) {
+          return cssValueLabel(cssErrorText('unavailable'));
+        }
+
+        const { success, details } = result;
+        const loginSystemId = details?.loginSystemId;
+
+        if (!success || !loginSystemId) {
+          return cssValueLabel(cssErrorText('auth error'));
+        }
+
+        if (loginSystemId === 'no-logins') {
+          return cssValueLabel(cssDangerText('no authentication'));
+        }
+
+        return cssValueLabel(cssHappyText(loginSystemId));
+      }
+    );
+  }
+
+  private _buildAuthenticationNotice(owner: IDisposableOwner) {
+    return t('Grist allows different types of authentication to be configured, including SAML and OIDC. \
+    We recommend enabling one of these if Grist is accessible over the network or being made available \
+    to multiple people.');
+  }
+
   private _buildUpdates(owner: MultiHolder) {
     // We can be in those states:
     enum State {
@@ -446,6 +484,10 @@ const cssErrorText = styled('span', `
   color: ${theme.errorText};
 `);
 
+export const cssDangerText = styled('div', `
+  color: ${theme.dangerText};
+`);
+
 const cssHappyText = styled('span', `
   color: ${theme.controlFg};
 `);

app/client/ui/AdminPanelCss.ts

@@ -124,6 +124,7 @@ const cssItemName = styled('div', `
   font-weight: bold;
   display: flex;
   align-items: center;
+  margin-right: 14px;
   font-size: ${vars.largeFontSize};
   padding-left: 24px;
   &-prefixed {