Enable connecting to JabRef Desktop's https server

.gitignore

@@ -1,3 +1,5 @@
+.idea/
+
 # Logs
 logs
 *.log

README.md

@@ -3,7 +3,8 @@
 ## Getting started
 
 - Install [Node.js](https://nodejs.org/).
-- Create .env file in the root directory containing the `HOST_API_URL` key
+- Get the JabRef Desktop http server running
+- If you want to connect to another service, adapt the `.env` file in the root directory containing the desired `HOST_API_URL` key
 
   e.g., `API_HOST = "https://mango-pebble-0224c3803.1.azurestaticapps.net/"`
 
@@ -52,3 +53,15 @@ Note: If you're testing add-in on Mac, run `yarn dev-server` to start the local
 
 - [React.js](https://reactjs.org): UI framework [Documentation](https://reactjs.org/docs/getting-started.html)
 - [Microsoft Office Add-in](https://docs.microsoft.com/en-us/office/dev/add-ins/)
+
+## Get SSL Working
+
+(Based on <https://stackoverflow.com/a/57511038/873282>)
+
+Howto vor Windows - other operating systems work similar:
+
+1. As admin `choco install mkcert`
+2. As admin: `mkcert -install`
+3. `cd %APPDATA%\..\local\org.jabref\jabref\ssl`
+4. `mkcert -pkcs12 jabref.desktop jabref localhost 127.0.0.1 ::1`
+5. Rename the file to `server.p12`

manifest.xml

@@ -72,13 +72,13 @@
         <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
       </bt:Urls>
       <bt:ShortStrings>
-        <bt:String id="GetStarted.Title" DefaultValue="Get started with your sample add-in!"/>
-        <bt:String id="CommandsGroup.Label" DefaultValue="Commands Group"/>
+        <bt:String id="GetStarted.Title" DefaultValue="Get started with JabRef!"/>
+        <bt:String id="CommandsGroup.Label" DefaultValue="JabRef"/>
         <bt:String id="TaskpaneButton.Label" DefaultValue="JabRef"/>
       </bt:ShortStrings>
       <bt:LongStrings>
-        <bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started."/>
-        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>
+        <bt:String id="GetStarted.Description" DefaultValue="JabRef add-in loaded successfully. Go to the References tab and click the 'JabRef' button to get started."/>
+        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to show JabRef panel"/>
       </bt:LongStrings>
     </Resources>
   </VersionOverrides>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jabref-office-addin",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "repository": {
     "type": "git",
     "url": "https//github.com/JabRef/JabRef-Word-Addin.git"
@@ -24,81 +24,71 @@
     "stop": "office-addin-debugging stop manifest.xml",
     "validate": "office-addin-manifest validate manifest.xml",
     "watch": "webpack --mode development --watch",
-    "generate": "graphql-codegen --config codegen.yml",
-    "postinstall": "yarn generate && crlf --set=LF node_modules/.bin/office-addin-*"
+    "postinstall": "crlf --set=LF node_modules/.bin/office-addin-*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.97.0",
-    "@apollo/client": "^3.7.0",
+    "@fluentui/react": "^8.107.3",
     "citeproc": "^2.4.62",
-    "core-js": "^3.25.3",
+    "core-js": "^3.30.0",
     "cross-var": "^1.1.0",
     "dotenv": "^16.0.3",
-    "dotenv-cli": "^6.0.0",
+    "dotenv-cli": "^7.2.1",
     "es6-promise": "^4.2.8",
     "formik": "^2.2.9",
-    "graphql": "^16.6.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "regenerator-runtime": "^0.13.9"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "regenerator-runtime": "^0.13.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@graphql-codegen/cli": "2.13.1",
-    "@graphql-codegen/typescript": "2.8.1",
-    "@graphql-codegen/typescript-operations": "2.5.3",
-    "@graphql-codegen/typescript-react-apollo": "3.3.3",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
     "@types/find-process": "1.2.0",
-    "@types/office-js": "^1.0.287",
-    "@types/office-runtime": "^1.0.29",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-hot-loader": "^4.1.0",
+    "@types/office-js": "^1.0.318",
+    "@types/office-runtime": "^1.0.30",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/webpack": "^5.28.0",
+    "@types/webpack": "^5.28.1",
     "@types/webpack-dev-server": "^4.7.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "babel-loader": "^8.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^6.4.1",
+    "copy-webpack-plugin": "^11.0.0",
     "crlf": "^1.1.1",
-    "css-loader": "^5.2.7",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-office-addins": "^2.0.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-office-addins": "^2.1.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-unused-imports": "^1.1.5",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "file-loader": "^6.2.0",
     "find-process": "^1.4.7",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.3",
-    "less-loader": "^7.3.0",
-    "office-addin-cli": "^1.5.3",
-    "office-addin-debugging": "^4.6.2",
-    "office-addin-dev-certs": "^1.9.2",
-    "office-addin-lint": "^2.0.1",
-    "office-addin-manifest": "^1.10.3",
+    "less-loader": "^11.1.0",
+    "office-addin-cli": "^1.5.5",
+    "office-addin-debugging": "^5.0.5",
+    "office-addin-dev-certs": "^1.11.3",
+    "office-addin-lint": "^2.2.5",
+    "office-addin-manifest": "^1.12.3",
     "office-addin-prettier-config": "^1.2.0",
-    "postcss-loader": "^4.0.0",
-    "prettier": "2.7.1",
-    "react-hot-loader": "^4.12.6",
-    "source-map-loader": "^1.1.3",
-    "style-loader": "^2.0.0",
-    "ts-loader": "8.2.0",
-    "typescript": "^4.5.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
+    "postcss-loader": "^7.2.4",
+    "prettier": "2.8.7",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "ts-loader": "9.4.2",
+    "typescript": "^5.0.4",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2",
     "worker-loader": "^3.0.8"
   }
 }

src/taskpane/components/App.tsx

@@ -1,12 +1,8 @@
 import React, { ReactElement } from 'react';
-import { Switch, Route } from 'react-router-dom';
 import Progress from './Progress';
-import Login from '../pages/Login';
 import Layout from '../layout/Layout';
-import ProtectedRoutes from '../../utils/ProtectedRoutes';
 import { CitationStoreProvider } from '../contexts/CitationStoreContext';
 import { CiteSupportProvider } from '../contexts/CiteSupportContext';
-import Wrapper from './Wrapper';
 
 export interface AppProps {
   title: string;
@@ -18,25 +14,16 @@ function App(props: AppProps): ReactElement {
 
   if (!isOfficeInitialized) {
     return (
-      <Progress title={title} message="Loading JabRef Addin" logo="../../../assets/jabref.svg" />
+      <Progress title={title} message="Loading JabRef Addin..." logo="../../../assets/jabref.svg" />
     );
   }
 
   return (
-    <Wrapper>
-      <Switch>
-        <Route path="/login">
-          <Login />
-        </Route>
-        <ProtectedRoutes path="/">
-          <CiteSupportProvider>
-            <CitationStoreProvider>
-              <Layout />
-            </CitationStoreProvider>
-          </CiteSupportProvider>
-        </ProtectedRoutes>
-      </Switch>
-    </Wrapper>
+    <CiteSupportProvider>
+      <CitationStoreProvider>
+        <Layout />
+      </CitationStoreProvider>
+    </CiteSupportProvider>
   );
 }
 export default App;

src/taskpane/components/Footer.style.tsx

@@ -38,14 +38,14 @@ export const contentWrapper: IStackStyles = {
   },
 };
 
-export const Signout: IIconProps = { iconName: 'SignOut' };
 export const SyncBib: IIconProps = { iconName: 'InsertSignatureLine' };
 export const light: IIconProps = { iconName: 'Brightness' };
 export const dark: IIconProps = { iconName: 'LowerBrightness' };
 
 export const imageProps: IImageProps = {
   imageFit: ImageFit.center,
+  alt: 'JabRef logo',
   src: '../../../assets/logo.svg',
-  width: '110rem',
-  height: '40rem',
+  width: '35%',
+  height: '35%',
 };

src/taskpane/components/Footer.tsx

@@ -1,45 +1,43 @@
-import { Stack, ActionButton } from '@fluentui/react';
+import { ActionButton, Image, Stack } from '@fluentui/react';
 import React, { ReactElement } from 'react';
 
 import {
-  Signout,
-  SyncBib,
-  imageProps,
-  footerStackStyle,
   contentWrapper,
   footerIconOnlyButton,
+  footerStackStyle,
+  imageProps,
+  light,
+  SyncBib,
 } from './Footer.style';
 
 interface FooterProps {
   onSyncBibliography: () => void;
-  onLogout: () => void;
+  onFetchJabRefData: () => void;
 }
 
-function Footer({ onSyncBibliography, onLogout }: FooterProps): ReactElement {
+function Footer({ onSyncBibliography, onFetchJabRefData }: FooterProps): ReactElement {
   return (
-    <Stack styles={footerStackStyle}>
-      <Stack
-        horizontal
-        verticalAlign="center"
-        styles={contentWrapper}
-        horizontalAlign="space-between"
-      >
-        <img {...imageProps} alt="jabref logo" />
-        <Stack horizontal>
-          <ActionButton
-            iconProps={SyncBib}
-            styles={footerIconOnlyButton}
-            ariaLabel="Add Bibliography"
-            onClick={onSyncBibliography}
-          />
-          <ActionButton
-            onClick={onLogout}
-            iconProps={Signout}
-            ariaLabel="Sign Out"
-            styles={footerIconOnlyButton}
-          />
-        </Stack>
-      </Stack>
+    <Stack
+      horizontal
+      horizontalAlign="space-between"
+      verticalAlign="center"
+      styles={{ ...contentWrapper, ...footerStackStyle }}
+    >
+      <Image {...imageProps} />
+      <Stack.Item>
+        <ActionButton
+          iconProps={light}
+          styles={footerIconOnlyButton}
+          ariaLabel="Fetch JabRef Data"
+          onClick={onFetchJabRefData}
+        />
+        <ActionButton
+          iconProps={SyncBib}
+          styles={footerIconOnlyButton}
+          ariaLabel="Add Reference List"
+          onClick={onSyncBibliography}
+        />
+      </Stack.Item>
     </Stack>
   );
 }