FUI - Moving to the native elements - Sign in and Product pages (#2702)

Author: jsorohova

src/components/operations/operation-details/react/runtime/operation-console/ConsoleAuthorization.tsx

@@ -54,15 +54,15 @@ export const ConsoleAuthorization = ({
     const [selectedAuthorizationFlow, setSelectedAuthorizationFlow] = useState<string>(noAuthFlow);
     const [selectedSubscriptionKey, setSelectedSubscriptionKey] = useState<{ name: string, value: string }>(
         subscriptionKey
-            ? products.flatMap(p => p.subscriptionKeys).find(k => k.value === subscriptionKey)
+            ? products?.flatMap(p => p.subscriptionKeys).find(k => k.value === subscriptionKey)
             : products?.[0]?.subscriptionKeys[0] ?? null
     );
     const [username, setUsername] = useState<string>("");
     const [password, setPassword] = useState<string>("");
 
     const renderAuthorization = () => (
         <>
-            {authorizationServers.length > 0 && selectedAuthorizationServer &&
+            {authorizationServers?.length > 0 && selectedAuthorizationServer &&
                 <>
                     <Stack className="auth-detail">
                         <Label htmlFor="auth-servers-dropdown">Authorization server</Label>
@@ -108,7 +108,7 @@ export const ConsoleAuthorization = ({
                                     type="text"
                                     placeholder="Enter username"
                                     value={username}
-                                    onChange={(VARIABLE_DEFINITION, data) => setUsername(data.value)}
+                                    onChange={(_, data) => setUsername(data.value)}
                                 />
                             </Stack>
                             <Stack className="auth-detail" styles={{ root: { marginBottom: 24 } }}>
@@ -129,7 +129,7 @@ export const ConsoleAuthorization = ({
                 </>
             }
             {subscriptionRequired && (
-                (products.length > 0 && selectedSubscriptionKey)
+                (products?.length > 0 && selectedSubscriptionKey)
                     ? <Stack className="auth-detail">
                         <Label htmlFor="subscription-key-dropdown">Subscription key</Label>
                         <Dropdown

src/components/products/product-details/react/ProductDetailsRuntime.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { Stack } from "@fluentui/react";
-import { Body1, Caption1, FluentProvider, Spinner, Title1 } from "@fluentui/react-components";
+import { FluentProvider, Spinner } from "@fluentui/react-components";
 import { CircleSmallFilled } from "@fluentui/react-icons";
 import { Resolve } from "@paperbits/react/decorators";
 import { Router } from "@paperbits/common/routing";
@@ -67,14 +67,12 @@ const ProductDetailsRuntimeFC = ({ usersService, productService, productName }:
 
     return (
         <Stack tokens={{ childrenGap: 20 }}>
-            <Title1>{product.displayName}</Title1>
+            <h1>{product.displayName}</h1>
 
-            <Caption1 block>
-                Product {!!product.state && <><CircleSmallFilled /> {productStateToLabel(product.state)}</>}
-            </Caption1>
+            <h6> Product {!!product.state && <><CircleSmallFilled /> {productStateToLabel(product.state)}</>}</h6>
 
             {product.description &&
-                <Body1 block><MarkdownProcessor markdownToDisplay={product.description} /></Body1>
+                <span><MarkdownProcessor markdownToDisplay={product.description} /></span>
             }
         </Stack>
     );

src/components/products/product-subscribe/react/ProductSubscribeForm.tsx

@@ -26,19 +26,21 @@ export const ProductSubscribeForm = ({ subscribe, termsOfUse, showTermsByDefault
                 horizontal
                 verticalAlign={"center"}
                 tokens={{ childrenGap: 15 }}
+                className="form-group"
             >
                 <Stack.Item>
-                    <Input
+                    <input
                         value={subscriptionName}
-                        onChange={(_, data) => setSubscriptionName(data.value)}
+                        onChange={(event) => setSubscriptionName(event.target.value)}
                         placeholder={"Your new product subscription name"}
+                        className="form-control"
                         style={{ width: "20em" }}
                     />
                 </Stack.Item>
                 <Stack.Item>
                     <BtnSpinner
                         onClick={() => subscribe(subscriptionName, consented)}
-                        appearance="primary"
+                        className="button button-primary"
                         disabled={!subscriptionName || (termsOfUse && !consented)}
                     >
                         Subscribe

src/components/products/product-subscribe/react/ProductSubscribeRuntime.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { Body1Strong, FluentProvider, Spinner } from "@fluentui/react-components";
+import { FluentProvider, Spinner } from "@fluentui/react-components";
 import { Resolve } from "@paperbits/react/decorators";
 import { Router } from "@paperbits/common/routing";
 import * as Constants from "../../../../constants";
@@ -117,7 +117,7 @@ const ProductSubscribeRuntimeFC = ({ backendService, usersService, tenantService
     }, [backendService, productService, productName, userId, isDelegationEnabled, hasToS]);
 
     if (working) return <Spinner size="extra-tiny" label={"Loading data"} labelPosition={"after"} />;
-    if (isLimitReached) return <Body1Strong style={{ display: "block", padding: "1rem 0" }}>You've reached maximum number of subscriptions.</Body1Strong>;
+    if (isLimitReached) return <span className="strong" style={{ display: "block", padding: "1rem 0" }}>You've reached maximum number of subscriptions.</span>;
 
     return <ProductSubscribeForm subscribe={subscribe} termsOfUse={product?.terms} showTermsByDefault={showTermsByDefault} />;
 };

src/components/users/signin/react/SignInForm.tsx

@@ -69,29 +69,27 @@ export const SignInForm = ({
     return (
         <Stack tokens={{ childrenGap: 20, maxWidth: 435 }}>
             <Stack.Item>
-                <Stack>
-                    <Label required htmlFor="email">
-                        Email address
-                    </Label>
-                    <Input
+                <Stack className="form-group">
+                    <label htmlFor="email">Email address</label>
+                    <input
                         id="email"
                         placeholder="Enter email address"
                         type="email"
+                        className="form-control"
                         value={email}
                         onChange={(event) => setEmail(event.target.value)}
                     />
                 </Stack>
             </Stack.Item>
 
             <Stack.Item>
-                <Stack>
-                    <Label required htmlFor="password">
-                        Password
-                    </Label>
-                    <Input
+                <Stack className="form-group">
+                    <label htmlFor="password">Password</label>
+                    <input
                         id="password"
                         placeholder="Enter password"
                         type="password"
+                        className="form-control"
                         value={password}
                         onChange={(event) => setPassword(event.target.value)}
                     />
@@ -100,9 +98,9 @@ export const SignInForm = ({
 
             <Stack.Item>
                 <BtnSpinner
-                    appearance="primary"
                     onClick={submit}
                     disabled={!email || !password}
+                    className="button button-primary"
                 >
                     Sign in
                 </BtnSpinner>

src/components/utils/react/BtnSpinner.tsx

@@ -1,32 +1,33 @@
 import * as React from "react";
 import { useState } from "react";
-import { Button, ButtonProps, Spinner } from "@fluentui/react-components";
+import { ButtonProps, Spinner } from "@fluentui/react-components";
 
 export type TProps = ButtonProps & {
     onClick: () => Promise<unknown>;
     working?: boolean;
+    className?: string;
 };
 
 export const BtnSpinner = ({
     children,
     onClick,
     disabled,
     working: workingProp,
-    ...props
+    className
 }: TProps) => {
     const [working, setWorking] = useState(false);
 
     return (
-        <Button
-            {...props}
+        <button
             disabled={disabled || working || workingProp}
             onClick={() => {
                 setWorking(true);
                 onClick().finally(() => setWorking(false));
             }}
+            className={className}
         >
             {(working || workingProp) && <Spinner size={"extra-tiny"} style={{ marginRight: ".5rem" }} />}
             {children}
-        </Button>
+        </button>
     );
 };

src/themes/website/styles/buttons.scss

@@ -1,4 +1,12 @@
 .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:disabled {
+        pointer-events: none;
+    }
+
     &.button-noborder {
         border: none;
         background: transparent;

src/themes/website/styles/forms.scss

@@ -109,6 +109,10 @@ input[type="range"] {
     }
 }
 
+input:focus-visible {
+    outline: none;
+}
+
 input[type=search] {
     white-space: nowrap;
     overflow: hidden;

src/themes/website/styles/text.scss

@@ -12,3 +12,7 @@ h6 {
 pre {
     white-space: pre-wrap;
 }
+
+span.strong {
+    font-weight: 600;
+}