update login page UI

src/Utils/Funcs.ts

@@ -4,23 +4,27 @@ import { SPDEVMODE_LOCAL_STORAGE_KEY } from '../webparts/constants';
 
 export function getEntryWebAccessUrl(
   nodeId: string,
-  repoId: string,
   waUrl: string,
-  isContainer: boolean
+  isContainer: boolean,
+  repoId?: string
 ): string | undefined {
-  if (nodeId?.length === 0 || repoId?.length === 0 || waUrl?.length === 0) {
+  if (!nodeId || nodeId?.length === 0 || !waUrl || waUrl?.length === 0) {
     return undefined;
   }
   let newUrl: string;
   if (isContainer) {
-    const queryParams: UrlUtils.QueryParameter[] = [['repo', repoId]];
+    const queryParams: UrlUtils.QueryParameter[] = repoId
+      ? [['repo', repoId]]
+      : [];
     newUrl = UrlUtils.combineURLs(waUrl ?? '', 'Browse.aspx', queryParams);
     newUrl += `#?id=${encodeURIComponent(nodeId)}`;
   } else {
-    const queryParams: UrlUtils.QueryParameter[] = [
-      ['repo', repoId],
-      ['docid', nodeId],
-    ];
+    const queryParams: UrlUtils.QueryParameter[] = repoId
+      ? [
+          ['repo', repoId],
+          ['docid', nodeId],
+        ]
+      : [['docid', nodeId]];
     newUrl = UrlUtils.combineURLs(waUrl ?? '', 'DocView.aspx', queryParams);
   }
   return newUrl;

src/extensions/savetoLaserfiche/CommonDialogs.tsx

@@ -1,91 +1,89 @@
 import * as React from 'react';
-import { Navigation } from 'spfx-navigation';
 import styles from './SendToLaserFiche.module.scss';
+import { SPComponentLoader } from '@microsoft/sp-loader';
+import { SavedToLaserficheDocumentData } from './SaveDocumentToLaserfiche';
 
-const SAVING_DOCUMENT_TO_LASERFICHE = 'Saving your document to Laserfiche';
+const SAVING_DOCUMENT_TO_LASERFICHE = 'Saving document to Laserfiche...';
 
 export default function LoadingDialog() {
   return (
     <>
-      <img
-        style={{ marginLeft: '28%' }}
-        src='/_layouts/15/images/progress.gif'
-        id='imgid'
-      />
-      <div>
-        <p className={styles.text}>{SAVING_DOCUMENT_TO_LASERFICHE}</p>
-      </div>
+      <img src='/_layouts/15/images/progress.gif' />
+      <br />
+      <div>{SAVING_DOCUMENT_TO_LASERFICHE}</div>
     </>
   );
 }
 
-const DOCUMENT_UPLOADED = 'Document uploaded';
-const DOCUMENT_UPLOADED_METADATA_FAILED =
-  'Document uploaded to repository, updating metadata failed due to constraint mismatch';
+const DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME =
+  'Document successfully uploaded to Laserfiche with name:';
+const METADATA_FAILED_TO_SAVE_INVALID_FIELD =
+  'All metadata failed to save due to at least one invalid field';
 const TEMPLATE_FIELDS_NOT_APPLIED =
   'The Laserfiche template and fields were not applied to this document.';
 const CLOSE = 'Close';
-const GO_TO_FILE = 'Go to File';
-const GO_TO_LIBRARY = 'Go to Library';
-const CLICK_HERE_VIEW_FILE_LASERFICHE =
-  'Click here to view the file in Laserfiche';
-const CLICK_HERE_GO_SHAREPOINT_LIBRARY =
-  'Click here to go back to your SharePoint library';
+const VIEW_FILE_IN_LASERFICHE = 'View file in Laserfiche';
 
-export function SavedToLaserficheSuccessDialog(props: {
-  closeClick: () => Promise<void>;
-  successfulSave: {
-    fileLink: string;
-    pathBack: string;
-    metadataSaved: boolean;
-  };
+export function SavedToLaserficheSuccessDialogText(props: {
+  successfulSave: SavedToLaserficheDocumentData;
 }) {
+  React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+  }, []);
+
   const metadataFailedNotice: JSX.Element = (
     <span>
-      {DOCUMENT_UPLOADED_METADATA_FAILED}
+      {METADATA_FAILED_TO_SAVE_INVALID_FIELD}
       <br /> <p style={{ color: 'red' }}>{TEMPLATE_FIELDS_NOT_APPLIED}</p>
     </span>
   );
 
+  return (
+    <>
+      <div>
+        {`${DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME}  ${props.successfulSave.fileName}.`}
+        {!props.successfulSave.metadataSaved && metadataFailedNotice}
+      </div>
+    </>
+  );
+}
+
+export function SavedToLaserficheSuccessDialogButtons(props: {
+  closeClick: () => Promise<void>;
+  successfulSave: SavedToLaserficheDocumentData;
+}) {
+  React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+  }, []);
+
   function viewFile() {
     window.open(props.successfulSave.fileLink);
   }
 
-  function redirect() {
-    Navigation.navigate(props.successfulSave.pathBack, true);
-  }
-
   return (
     <>
-      <div>
-        <p className={styles.text}>
-          {props.successfulSave.metadataSaved
-            ? DOCUMENT_UPLOADED
-            : metadataFailedNotice}
-        </p>
-      </div>
-
-      <div className={styles.button}>
-        <button className={styles.button1} onClick={props.closeClick}>
-          {CLOSE}
-        </button>
-        {props.successfulSave.fileLink && (
-          <button
-            className={styles.button2}
-            title={CLICK_HERE_VIEW_FILE_LASERFICHE}
-            onClick={viewFile}
-          >
-            {GO_TO_FILE}
-          </button>
-        )}
+      {props.successfulSave?.fileLink && (
         <button
-          className={styles.button2}
-          title={CLICK_HERE_GO_SHAREPOINT_LIBRARY}
-          onClick={redirect}
+          className={`lf-button primary-button ${styles.actionButton}`}
+          title={VIEW_FILE_IN_LASERFICHE}
+          onClick={viewFile}
         >
-          {GO_TO_LIBRARY}
+          {VIEW_FILE_IN_LASERFICHE}
         </button>
-      </div>
+      )}
+      <button className='lf-button sec-button' onClick={props.closeClick}>
+        {CLOSE}
+      </button>
     </>
   );
 }

src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx

@@ -34,6 +34,7 @@ import { getSPListURL } from '../../Utils/Funcs';
 import SaveToLaserficheCustomDialog from './SaveToLaserficheDialog';
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import LoadingDialog from './CommonDialogs';
+import { SPComponentLoader } from '@microsoft/sp-loader';
 
 const signInPageRoute = '/SitePages/LaserficheSpSignIn.aspx';
 
@@ -73,7 +74,8 @@ export class GetDocumentDataCustomDialog extends BaseDialog {
           spFileInfo={this.fileInfo}
           context={this.context}
           showSaveToDialog={this.showNextDialog}
-        />
+          handleCancelDialog={this.close}
+      />
       </React.StrictMode>
     );
     ReactDOM.render(element, this.domElement);
@@ -90,8 +92,11 @@ const FOLLOWING_SP_FIELDS_BLANK_MAPPED_TO_REQUIRED_LF_FIELDS =
 const PLEASE_FILL_OUT_REQUIRED_FIELDS_TRY_AGAIN =
   'Please fill out these required fields and try again.';
 
+const CANCEL = 'Cancel';
+
 function GetDocumentDialogData(props: {
   showSaveToDialog: (fileData: ISPDocumentData) => void;
+  handleCancelDialog: () => Promise<void>;
   spFileInfo: {
     fileName: string;
     spContentType: string;
@@ -117,6 +122,13 @@ function GetDocumentDialogData(props: {
   ));
 
   React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+
     saveDocumentToLaserficheAsync();
   }, []);
 
@@ -428,19 +440,38 @@ function GetDocumentDialogData(props: {
   }
 
   return (
-    <div className={styles.maindialog}>
-      <div id='overlay' className={styles.overlay} />
-      <div>
-        <img
-          src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
-          width='42'
-          height='42'
-        />
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div className={styles.logoHeader}>
+          <img
+            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
+            width='30'
+            height='30'
+          />
+          <p className={styles.dialogTitle}>Laserfiche</p>
+        </div>
+
+        <button
+          className={styles.lfCloseButton}
+          title='close'
+          onClick={props.handleCancelDialog}
+        >
+          <span className='material-icons-outlined'> close </span>
+        </button>
+      </div>
+
+      <div className={styles.contentBox}>
         {!(missingFields?.length > 0) && <LoadingDialog />}
         {missingFields?.length > 0 && (
           <MissingFieldsDialog missingFields={listFields} />
         )}
       </div>
+
+      <div className={styles.footer}>
+        <button onClick={props.handleCancelDialog} className='lf-button sec-button'>
+          {CANCEL}
+        </button>
+      </div>
     </div>
   );
 }
@@ -456,7 +487,7 @@ function MissingFieldsDialog(props: { missingFields: JSX.Element[] }) {
 
   return (
     <div>
-      <p className={styles.text}>{textInside}</p>
+      <p>{textInside}</p>
     </div>
   );
 }