Merge pull request #570 from fairDataSociety/feat/hidden-functionalities

Feat/hidden functionalities

package.json

@@ -25,7 +25,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fairdatasociety/blossom": "^0.5.0",
-    "@fairdatasociety/fdp-storage": "^0.13.0",
+    "@fairdatasociety/fdp-storage": "^0.16.0",
     "@headlessui/react": "^1.7.14",
     "@metamask/sdk": "^0.5.6",
     "@types/react-blockies": "^1.4.1",

src/components/Connect/Metamask/MetamaskConnect.tsx

@@ -74,7 +74,7 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => {
       setAddress(wallet.address);
       setMnemonic(mnemonic);
 
-      router.push('/overview');
+      router.push('/drive');
     } catch (error) {
       console.error(error);
       setErrorMessage(String(error.message || error));

src/components/Footers/MainFooter/MainFooter.tsx

@@ -27,7 +27,7 @@ const MainFooter: FC = () => {
   const { intl } = useLocales();
 
   return (
-    <div className="hidden md:flex justify-between items-center w-full h-32 px-8 bg-white shadow-top">
+    <div className="hidden md:flex justify-between items-center w-full py-2 px-8 bg-white shadow-top">
       <div className="flex items-center flex-wrap mr-4">
         <a
           href="https://fairdatasociety.org/"

src/components/Forms/LoginForm/LoginForm.tsx

@@ -19,6 +19,7 @@ import { setDefaultNetwork } from '@utils/localStorage';
 import { useLocales } from '@context/LocalesContext';
 import CustomCheckbox from '@components/Inputs/CustomCheckbox/CustomCheckbox';
 import { useMatomoContext } from '@context/Matomo';
+import MetamaskConnect from '@components/Connect/Metamask/MetamaskConnect';
 
 const ALLOW_TRACKING_KEY = 'allow-matomo';
 
@@ -51,6 +52,7 @@ const LoginForm: FC = () => {
   } = useFdpStorage();
   const router = useRouter();
   const { intl } = useLocales();
+  const fdsLoginEnabled = router?.query['fdsLogin'] === 'true';
 
   const onSubmit = async (data: { user_name: string; password: string }) => {
     try {
@@ -116,10 +118,12 @@ const LoginForm: FC = () => {
 
   return (
     <div className="flex flex-col px-3 justify-center items-center">
-      <DisclaimerMessage
-        icon={IconType.WARNING}
-        text={disclaimerMessages.join(' ')}
-      />
+      <div className="max-w-xl">
+        <DisclaimerMessage
+          icon={IconType.WARNING}
+          text={disclaimerMessages.join(' ')}
+        />
+      </div>
 
       <AuthenticationHeader
         title={intl.get('WELCOME_BACK')}
@@ -131,78 +135,87 @@ const LoginForm: FC = () => {
           <FeedbackMessage type="error" message={errorMessage} />
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="w-full">
-          <label className="font-normal text-base text-color-accents-plum-black dark:text-color-accents-grey-pastel">
-            {intl.get('CHOOSE_NETWORK')}:
-          </label>
-          <NetworkDropdown
-            className="mb-3"
-            value={network}
-            onChange={onNetworkChange}
-          />
-
-          <AuthenticationInput
-            label={intl.get('USERNAME')}
-            id="user_name"
-            type="text"
-            name="user_name"
-            placeholder={intl.get('TYPE_HERE')}
-            useFormRegister={register}
-            validationRules={{
-              required: intl.get('USERNAME_IS_REQUIRED'),
-              minLength: {
-                value: 4,
-                message: intl.get('USERNAME_MIN_LENGTH_ERROR'),
-              },
-            }}
-            // @ts-ignore
-            error={errors.user_name}
-          />
-
-          <AuthenticationInput
-            label={intl.get('PASSWORD')}
-            id="password"
-            type="password"
-            name="password"
-            placeholder={intl.get('TYPE_HERE')}
-            useFormRegister={register}
-            validationRules={{
-              required: intl.get('PASSWORD_IS_REQUIRED'),
-            }}
-            // @ts-ignore
-            error={errors.password}
-          />
-
-          <CustomCheckbox
-            className="mb-3 sm:mb-0"
-            name="confirm"
-            onChange={onAllowTrackingClick}
-            checked={allowTracking}
-          >
-            {intl.get('ALLOW_TRACKING')}
-          </CustomCheckbox>
-
-          <div className="mt-8 text-center">
-            <Button
-              loading={loading}
-              disabled={!isValid}
-              type="submit"
-              variant="secondary"
-              label={intl.get('LOGIN')}
+        {fdsLoginEnabled ? (
+          <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+            <label className="font-normal text-base text-color-accents-plum-black dark:text-color-accents-grey-pastel">
+              {intl.get('CHOOSE_NETWORK')}:
+            </label>
+            <NetworkDropdown
+              className="mb-3"
+              value={network}
+              onChange={onNetworkChange}
+            />
+
+            <AuthenticationInput
+              label={intl.get('USERNAME')}
+              id="user_name"
+              type="text"
+              name="user_name"
+              placeholder={intl.get('TYPE_HERE')}
+              useFormRegister={register}
+              validationRules={{
+                required: intl.get('USERNAME_IS_REQUIRED'),
+                minLength: {
+                  value: 4,
+                  message: intl.get('USERNAME_MIN_LENGTH_ERROR'),
+                },
+              }}
+              // @ts-ignore
+              error={errors.user_name}
+            />
+
+            <AuthenticationInput
+              label={intl.get('PASSWORD')}
+              id="password"
+              type="password"
+              name="password"
+              placeholder={intl.get('TYPE_HERE')}
+              useFormRegister={register}
+              validationRules={{
+                required: intl.get('PASSWORD_IS_REQUIRED'),
+              }}
+              // @ts-ignore
+              error={errors.password}
             />
-          </div>
 
-          <div className="my-6 text-center">
-            <a
-              href={CREATE_USER_URL}
-              target={'_blank'}
-              rel="noopener noreferrer"
-              className="font-normal text-xs text-color-accents-purple-black dark:text-color-accents-grey-lavendar"
+            <CustomCheckbox
+              className="mb-3 sm:mb-0"
+              name="confirm"
+              onChange={onAllowTrackingClick}
+              checked={allowTracking}
             >
-              {intl.get('REGISTER_NEW_ACCOUNT')}
-            </a>
+              {intl.get('ALLOW_TRACKING')}
+            </CustomCheckbox>
+
+            <div className="mt-8 text-center">
+              <Button
+                loading={loading}
+                disabled={!isValid}
+                type="submit"
+                variant="secondary"
+                label={intl.get('LOGIN')}
+              />
+            </div>
+
+            <div className="my-6 text-center">
+              <a
+                href={CREATE_USER_URL}
+                target={'_blank'}
+                rel="noopener noreferrer"
+                className="font-normal text-xs text-color-accents-purple-black dark:text-color-accents-grey-lavendar"
+              >
+                {intl.get('REGISTER_NEW_ACCOUNT')}
+              </a>
+            </div>
+          </form>
+        ) : (
+          <div className="w-full flex">
+            <span className="m-auto">
+              {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
+              <MetamaskConnect onConnect={() => {}} onError={() => {}} />
+            </span>
           </div>
-        </form>
+        )}
       </div>
     </div>
   );

src/components/Layouts/MainLayout/MainLayout.tsx

@@ -49,7 +49,8 @@ const MainLayout: FC<MainLayoutProps> = ({
       </div>
 
       <div className="flex flex-col sm:flex-row justify-items-stretch items-stretch w-full h-full overflow-hidden">
-        <div className="sm:w-28 dark:bg-color-shade-dark-3-night">
+        {/* sm:w-28 */}
+        <div className="dark:bg-color-shade-dark-3-night">
           <MainSideBar
             driveSideBarToggle={driveSideBarToggle}
             updateDrive={updateDrive}
@@ -87,7 +88,7 @@ const MainLayout: FC<MainLayoutProps> = ({
         </div>
       </div>
 
-      <div className="hidden md:block w-full h-36 dark:bg-color-shade-dark-3-night">
+      <div className="hidden md:block w-full dark:bg-color-shade-dark-3-night">
         <MainFooter />
       </div>
     </div>

src/components/Modals/UploadFileModal/UploadFileModal.tsx

@@ -120,9 +120,9 @@ const UploadFileModal: FC<CreatorModalProps> = ({
               podName: activePod,
             },
             (event: UploadProgressInfo) => {
-              const { uploadPercentage } = event.data || {};
+              const { percentage } = event.data || {};
 
-              if (uploadPercentage) {
+              if (percentage) {
                 setUploadPercentage(
                   calculateUploadPercentage(
                     uploadedItemsRef.current.length + failedUplods.length,

src/components/NavigationBars/AuthenticationNavbar/AuthenticationNavbar.tsx

@@ -9,9 +9,12 @@ import ConnectDropdown from '@components/Dropdowns/ConnectDropdown/ConnectDropdo
 import classes from './AuthenticationNavbar.module.scss';
 import { useLocales } from '@context/LocalesContext';
 import LanguageDropdown from '@components/Dropdowns/LanguageDropdown/LanguageDropdown';
+import { useRouter } from 'next/router';
 
 const AuthenticationNavbar: FC = () => {
   const { intl } = useLocales();
+  const router = useRouter();
+  const fdsLoginEnabled = router?.query['fdsLogin'] === 'true';
 
   return (
     <div
@@ -20,9 +23,11 @@ const AuthenticationNavbar: FC = () => {
       <Logo />
 
       <div className="flex justify-between items-center">
-        <a className={`${classes.button} mr-4`}>
-          <ConnectDropdown />
-        </a>
+        {fdsLoginEnabled && (
+          <a className={`${classes.button} mr-4`}>
+            <ConnectDropdown />
+          </a>
+        )}
 
         <ThemeToggle />
 

src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.module.scss

@@ -0,0 +1,6 @@
+@media (max-width: 440px) {
+  .DriveActionBarItem {
+    width: 80px;
+    font-size: 12px;
+  }
+}

src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx

@@ -24,6 +24,8 @@ import { UpdateDriveProps } from '@interfaces/handlers';
 import { useLocales } from '@context/LocalesContext';
 import PodContext from '@context/PodContext';
 
+import classes from './DriveActionBarMobile.module.scss';
+
 export interface DriveActionBarMobileProps extends UpdateDriveProps {
   refreshPods?: () => void;
 }
@@ -38,7 +40,7 @@ const DriveActionBarItem = (
 ) => {
   return (
     <div
-      className="py-2 w-24 block md:hidden sm:w-full py-1 flex-shrink-0 md:py-4 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night"
+      className={`py-2 w-24 block md:hidden sm:w-full py-1 flex-shrink-0 md:py-4 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night ${classes.DriveActionBarItem}`}
       onClick={disabled ? undefined : onClick}
     >
       <a className="flex flex-col justify-center items-center">

src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx

@@ -31,7 +31,7 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
     <nav>
       <div className="flex justify-between items-center w-full h-16 px-6 shadow-lg">
         <div className="flex items-center">
-          <Button
+          {/* <Button
             onClick={() => setMobileNavigationOpen(true)}
             variant="tertiary"
             className="cursor-pointer block md:hidden"
@@ -42,7 +42,7 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
                 <NavigationMenuDark className="inline-block" />
               )
             }
-          />
+          /> */}
           <Logo />
         </div>
 
@@ -64,7 +64,8 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}
               onClickHandler={() => setShowUserDropdown(true)}
-              showNotification={metamaskMigrationNotification === 'closed'}
+              showNotification={false}
+              // showNotification={metamaskMigrationNotification === 'closed'}
             />
             <LanguageDropdown />
           </div>