Implement public How-to-Connect page

Author: oharsta

client/src/locale/en.js

@@ -722,7 +722,8 @@ const en = {
         samlOidc: "SAML & OpenID Connect",
         samlOidcInfo: "We use these open standards as they are used in most countries and many sectors.",
         attributes: "Attributes and claims",
-        attributesInfo: "Learn more about use these open standards as they are used in most countries and many sectors."
+        attributesInfo: "Learn more about use these open standards as they are used in most countries and many sectors.",
+        connect: "Connect your application now"
     },
     forms: {
         cancel: "Cancel",

client/src/pages/Connect.jsx

@@ -3,9 +3,13 @@ import "./Connect.scss";
 import React from "react";
 import I18n from "../locale/I18n.js";
 import StudentPng from "../icons/student.png";
+import {Button, ButtonType, Tooltip} from "@surfnet/sds";
+import {useNavigate} from "react-router-dom";
 
 const Connect = () => {
 
+    const navigate = useNavigate();
+
     return (
         <div className="connect-container">
             <div className="connect-header-container">
@@ -83,6 +87,11 @@ const Connect = () => {
                         <p>{I18n.t("connect.attributesInfo")}</p>
                     </div>
                 </div>
+                <div className="button-container">
+                    <Button type={ButtonType.Primary}
+                            onClick={() => navigate("/login-info")}
+                            txt={I18n.t("connect.connect")}/>
+                </div>
             </div>
         </div>
     );

client/src/pages/Connect.scss

@@ -49,6 +49,7 @@ div.connect-container {
         .table-container {
             padding: 8px 15px 20px 15px ;
             background-color: var(--sds--color--gray--100);
+            border-radius: 8px;
 
             p.sup-info {
                 font-size: 14px;
@@ -96,5 +97,10 @@ div.connect-container {
         }
 
     }
+    .button-container {
+        max-width: $width;
+        margin: 40px auto 0 auto;
+
+    }
 
 }