Fixed a few bugs

Author: stephenwf

services/madoc-ts/src/frontend/shared/components/TermsPopup.tsx

@@ -2,11 +2,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSite, useUser } from '../hooks/use-site';
 import { HrefLink } from '../utility/href-link';
+import { useLocation } from 'react-router-dom';
 
 export function TermsPopup() {
   const user = useUser();
   const site = useSite();
   const { t } = useTranslation();
+  const location = useLocation();
+  const [closed, setClosed] = React.useState(false);
 
   if (!user || !site.latestTerms) {
     return null;
@@ -34,6 +37,14 @@ export function TermsPopup() {
     return null;
   }
 
+  if (location.pathname === '/terms') {
+    return null;
+  }
+
+  if (closed) {
+    return null;
+  }
+
   return (
     <div
       style={{
@@ -44,17 +55,43 @@ export function TermsPopup() {
         background: 'rgba(0,0,0,.8)',
         color: '#fff',
         padding: '1em',
-        paddingTop: '0.4em',
+        paddingTop: '0.8em',
         fontSize: '0.8em',
+        paddingRight: '2.5em',
+        borderRadius: '3px',
+        zIndex: 99999999,
       }}
     >
+      <div>
+        <button
+          style={{
+            position: 'absolute',
+            top: '0.5em',
+            right: '0.5em',
+            background: 'none',
+            border: 'none',
+            color: '#fff',
+            fontSize: '1.2em',
+            cursor: 'pointer',
+          }}
+          onClick={() => setClosed(true)}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              fill="currentColor"
+            />
+            <path d="M0 0h24v24H0z" fill="none" />
+          </svg>
+        </button>
+      </div>
       <div>
         {newTerms ? (
           <p>{t('You have not yet accepted the terms of use for this site.')}</p>
         ) : (
           <p>{t('The terms of use for this site have changed since you last accepted them.')}</p>
         )}
-        <HrefLink style={{ color: '#fff' }} href={`/terms`}>
+        <HrefLink style={{ color: '#fff', marginTop: '1em', display: 'block' }} href={`/terms`}>
           {termsMessage}
         </HrefLink>
       </div>

services/madoc-ts/src/frontend/shared/navigation/Button.tsx

@@ -44,6 +44,10 @@ export const Button = styled.button<{
   background: linear-gradient(180deg, #fafbfc 0%, #eff3f6 90%);
   border: 1px solid rgba(27, 31, 35, 0.15);
   color: #333;
+
+  &[type="submit"] {
+    background: linear-gradient(180deg, #fafbfc 0%, #eff3f6 90%);
+  }
   
   
   ${props =>
@@ -97,6 +101,10 @@ export const Button = styled.button<{
       background: #4265e9;
       color: #fff;
       border: 1px solid #4265e9;
+
+      &[type='submit'] {
+        background: #4265e9;
+      }
       &:active {
         box-shadow: inset 0 2px 8px 0 rgba(39, 75, 155, 0.8);
       }

services/madoc-ts/src/frontend/site/blocks/ProjectStatistics.tsx

@@ -46,7 +46,7 @@ export const ProjectStatistics: React.FC = () => {
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const total = Object.values(project?.statistics).reduce((a, b) => Math.max(a, 0) + Math.max(b, 0));
+  const total = Object.values(project?.statistics || {}).reduce((a, b) => Math.max(a, 0) + Math.max(b, 0), 0);
 
   if (hideStatistics || !project) {
     return null;

services/madoc-ts/src/frontend/site/pages/user/login-page.tsx

@@ -49,9 +49,9 @@ export const LoginPage: React.FC = () => {
               <div dangerouslySetInnerHTML={{ __html: system.loginFooter }} style={{ marginBottom: '1em' }} />
             ) : null}
             <LoginActions>
-              <FlexSpacer>
+              <div style={{ flex: 1 }}>
                 <HrefLink href={`/forgot-password`}>{t('Forgot password?')}</HrefLink>
-              </FlexSpacer>
+              </div>
               <Button $primary>{t('Login')}</Button>
             </LoginActions>
           </InputContainer>

services/madoc-ts/src/frontend/site/pages/user/register.tsx

@@ -69,7 +69,7 @@ export const Register: React.FC = () => {
   }
 
   const acceptTerms = site.latestTerms ? (
-    <div>
+    <div style={{ marginBottom: '1em', fontSize: '0.875em', color: '#444' }}>
       <p>
         {t('By registering you agree to the ')}
         <a target="_blank" href={`/s/${site.slug}/terms`} rel="noreferrer">
@@ -139,9 +139,9 @@ export const Register: React.FC = () => {
           ) : null}
           <InputContainer>
             <LoginActions>
-              <FlexSpacer>
+              <div style={{ flex: 1 }}>
                 {t('Already have an account?')} <HrefLink href="/login">{t('Login')}</HrefLink>
-              </FlexSpacer>
+              </div>
               <Button type="submit" $primary>
                 {t('Register')}
               </Button>

services/madoc-ts/src/frontend/site/pages/view-project.tsx

@@ -28,6 +28,7 @@ import { useProject } from '../hooks/use-project';
 export const ViewProject: React.FC = () => {
   const { t } = useTranslation();
   const user = useUser();
+  const isAdmin = (user?.scope || []).includes('site.admin');
   const { data: project } = useProject();
   const available = (
     <AvailableBlocks>
@@ -56,24 +57,24 @@ export const ViewProject: React.FC = () => {
         {available}
       </Slot>
 
-      <SlotTabs initial={project?.isProjectMember ? 'project-my-work' : 'project-content'}>
+      <SlotTabs initial={project?.isProjectMember ? 'project-my-work' : undefined}>
         <Slot name="project-navigation" label={t('Overview')} />
-        <Slot name="project-my-work" label={t('My work')} hidden={!user}>
-          <ProjectContinueSubmissions />
-          <ProjectMyWork />
-          <ProjectPersonalNotes />
-        </Slot>
         <Slot name="project-content" label={t('Manifests and Collections')}>
           <ProjectCollections />
           <ProjectManifestList />
           {available}
         </Slot>
+        <Slot name="project-my-work" label={t('My work')} hidden={!user}>
+          <ProjectContinueSubmissions />
+          <ProjectMyWork />
+          <ProjectPersonalNotes />
+        </Slot>
         <Slot name="project-contributors" label={t('Contributors')} />
-        <Slot name="project-updates" label={t('Updates')}>
+        <Slot name="project-updates" label={t('Updates')} hidden={!project?.latestUpdate && !isAdmin}>
           <MostRecentProjectUpdate />
           <PostNewProjectUpdate />
         </Slot>
-        <Slot name="project-feedback" label={t('Feedback')} hidden={project?.isProjectMember !== true}>
+        <Slot name="project-feedback" label={t('Feedback')} hidden={project?.isProjectMember !== true && !isAdmin}>
           <ProjectFeedbackListing />
           <ProjectFeedback />
         </Slot>

services/madoc-ts/src/frontend/tailwind/components/slot-tabs.tsx

@@ -22,7 +22,7 @@ export function SlotTabs(props: SlotTabProps) {
 
       const slot = slots[name];
 
-      const empty = slot?.blocks.length === 0 && !(child as any).props.children;
+      const empty = slot ? slot?.blocks.length === 0 : !(child as any).props.children;
 
       const customLabel = slot?.props?.surface?.label;
 

services/madoc-ts/src/repository/site-user-repository.ts

@@ -1256,7 +1256,8 @@ export class SiteUserRepository extends BaseRepository {
   }
 
   async invalidateSiteCache(siteId: number) {
-    cache.del(`public-site-id:${siteId}`);
+    const slug = await this.connection.oneFirst(sql<{ slug: string }>`select slug from site where id = ${siteId}`);
+    cache.del(`public-site-id:${slug}`);
   }
 
   async updateInvitation(invitationId: string, siteId: number, req: UpdateInvitation) {