Improve UI to incorporate authentication flow with the external authentication service

features/admin.connections.v1/api/use-get-connection-templates.ts

@@ -80,6 +80,7 @@ export const useGetConnectionTemplates = <Data = ConnectionTemplateInterface[],
             CommonAuthenticatorConstants.CONNECTION_TEMPLATE_IDS
                 .ORGANIZATION_ENTERPRISE_IDP,
             CommonAuthenticatorConstants.CONNECTION_TEMPLATE_IDS.ENTERPRISE,
+            CommonAuthenticatorConstants.CONNECTION_TEMPLATE_IDS.CUSTOM_AUTHENTICATION,
             ...(UIConfig?.hiddenConnectionTemplates || [])
         ];
 

features/admin.connections.v1/components/create/authenticator-create-wizard-factory.tsx

@@ -23,6 +23,9 @@ import React, { FC, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { CreateConnectionWizard } from "./add-connection-wizard";
+import {
+    CustomAuthenticationCreateWizard
+} from "./custom-authentication-create-wizard";
 import {
     EnterpriseConnectionCreateWizard
 } from "./enterprise-connection-create-wizard";
@@ -167,6 +170,8 @@ export const AuthenticatorCreateWizardFactory: FC<AuthenticatorCreateWizardFacto
 
         if (type === "enterprise-protocols") {
             setSelectedTemplate(parentSelectedTemplate);
+        } else if (type === "custom-authentication") {
+            setSelectedTemplate(parentSelectedTemplate);
         } else {
             if (!connectionTemplate) {
                 return;
@@ -330,6 +335,24 @@ export const AuthenticatorCreateWizardFactory: FC<AuthenticatorCreateWizardFacto
                     />
                 );
 
+            // TODO: use local for headings
+            case "custom-authentication":
+                return (
+                    <CustomAuthenticationCreateWizard
+                        title= { "Custom Authentication" }
+                        subTitle= { "Register externally implemented authentication service." }
+                        onWizardClose={ () => {
+                            setSelectedTemplateWithUniqueName(undefined);
+                            setSelectedTemplate(undefined);
+                            handleModalVisibility(false);
+                            onWizardClose();
+                        } }
+                        template={ selectedTemplateWithUniqueName }
+                        data-componentid={ selectedTemplate?.templateId }
+                        { ...rest }
+                    />
+                );
+
             case CommonAuthenticatorConstants.CONNECTION_TEMPLATE_IDS.EXPERT_MODE:
                 return (
                     <ExpertModeAuthenticationProviderCreateWizard

features/admin.connections.v1/components/create/custom-authentication-create-wizard.scss

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+ .wizard-wrapper {
+    .wizard-container {
+        margin-top: 0px;
+        margin-bottom: 0px;
+    }
+
+    .box-container {
+        background-color: #f9fafb;
+        border-radius: 8px;
+        padding: 30px;
+
+        .box-field {
+            margin-top: 20px;
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+
+    .text-field-container {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    .select-field-container {
+        margin-bottom: 8px;
+    }
+
+    .hint-text {
+        margin-top: 0px;
+        margin-bottom: 8px;
+    }
+
+    .divider-container {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .heading-container {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .button-container {
+        margin-top: 30px;
+    }
+
+    .alert-title {
+        font-weight: 100;
+    }
+
+    .secondary-button {
+        margin-top: 10px;
+    }
+
+    .placeholder {
+        border-radius: 8px;
+        margin-bottom: 8px;
+
+        &.label {
+            height: 20px;
+            max-width: 100px;
+        }
+
+        &.text-field {
+            height: 40px;
+        }
+    }
+
+    .placeholder-box {
+        > * {
+            margin-bottom: 8px; 
+        }
+    }
+}
+
+.sub-template-selection {
+
+    .sub-template-selection-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        column-gap: 20px;
+
+        .sub-template-selection-card {
+            flex: 1;
+            height: 260px;
+            margin: none;
+            white-space: normal;
+
+            .card-text-container {
+                .header {
+                    white-space: normal;
+                    font-weight: bold;
+                    margin: 20px;
+                }
+                .p {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    white-space: normal;
+                }
+                .main-description {
+                    margin-bottom: 15px;
+                    white-space: normal;
+                }
+            }
+
+            .card-image-container {
+                height: 10px;
+            }
+        }
+        .sub-template-selection-card:first-child {
+            margin-top: 14px; // semantic-ui-react Card has set top margin of the first child to zero. We are overriding it.
+        }
+    }
+}