login/logout/register; more admin aliases; smaller fixes

rage · Aug 31, 2023 · bd8a32e · bd8a32e
1 parent 962a24c
commit bd8a32e
Show file tree

Hide file tree

Showing 22 changed files with 182 additions and 95 deletions.
diff --git a/frontend/components/CreateAccountForm.tsx b/frontend/components/CreateAccountForm.tsx
@@ -235,6 +235,7 @@ class CreateAccountForm extends Component<CreateAccountFormProps> {
     const t = getSignUpTranslator(
       (this.props.router.locale ?? "fi") as LanguageKey,
     )
+    const baseUrl = this.props.router.asPath.includes("_new") ? "/_new" : ""
 
     return (
       <StyledPaper>
@@ -343,7 +344,7 @@ class CreateAccountForm extends Component<CreateAccountFormProps> {
         </Form>
 
         <Row>
-          <Link href="/sign-in">{t("signIn")}</Link>
+          <Link href={`${baseUrl}/sign-in`}>{t("signIn")}</Link>
         </Row>
 
         {this.state.error && (

diff --git a/frontend/components/Dashboard/Users/Search/MobileGrid.tsx b/frontend/components/Dashboard/Users/Search/MobileGrid.tsx
@@ -21,6 +21,7 @@ import { styled } from "@mui/material/styles"
 import InfoRow from "../InfoRow"
 import Pagination from "./Pagination"
 import UserSearchContext from "/contexts/UserSearchContext"
+import useIsNew from "/hooks/useIsNew"
 import { useTranslator } from "/hooks/useTranslator"
 import UsersTranslations from "/translations/users"
 
@@ -113,6 +114,8 @@ interface DataCardProps {
 }
 
 const DataCard = ({ row }: DataCardProps) => {
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const t = useTranslator(UsersTranslations)
 
   const fields = useMemo(() => {
@@ -176,14 +179,14 @@ const DataCard = ({ row }: DataCardProps) => {
         {row ? (
           <>
             <Button
-              href={`/users/${row.upstream_id}/summary`}
+              href={`${baseUrl}/users/${row.upstream_id}/summary`}
               prefetch={false}
               variant="contained"
             >
               {t("summary")}
             </Button>
             <Button
-              href={`/users/${row.upstream_id}/completions`}
+              href={`${baseUrl}/users/${row.upstream_id}/completions`}
               variant="contained"
               prefetch={false}
             >

diff --git a/frontend/components/Dashboard/Users/Search/WideGrid.tsx b/frontend/components/Dashboard/Users/Search/WideGrid.tsx
@@ -18,6 +18,7 @@ import { styled } from "@mui/material/styles"
 
 import Pagination from "./Pagination"
 import UserSearchContext from "/contexts/UserSearchContext"
+import useIsNew from "/hooks/useIsNew"
 import { useTranslator } from "/hooks/useTranslator"
 import UsersTranslations from "/translations/users"
 
@@ -95,6 +96,8 @@ const WideGrid = () => {
 }
 
 const RenderResults = () => {
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const t = useTranslator(UsersTranslations)
   const { data, loading, meta } = useContext(UserSearchContext)
   const isVeryWide = useMediaQuery("(min-width: 1200px)")
@@ -148,13 +151,13 @@ const RenderResults = () => {
             <TableCell align="right">
               <ButtonContainer>
                 <Button
-                  href={`/users/${upstream_id}/summary`}
+                  href={`${baseUrl}/users/${upstream_id}/summary`}
                   variant="contained"
                 >
                   {t("summary")}
                 </Button>
                 <Button
-                  href={`/users/${upstream_id}/completions`}
+                  href={`${baseUrl}/users/${upstream_id}/completions`}
                   variant="contained"
                 >
                   {t("completions")}

diff --git a/frontend/components/NewLayout/Common/Introduction.tsx b/frontend/components/NewLayout/Common/Introduction.tsx
@@ -168,6 +168,7 @@ const IntroductionTitle = styled("h2")(
   }
 `,
 )
+
 const IntroductionDescription = styled("p")(
   ({ theme }) => `
   ${fontSize(15, 22)}

diff --git a/frontend/components/NewLayout/Common/Paragraph.tsx b/frontend/components/NewLayout/Common/Paragraph.tsx
@@ -6,7 +6,7 @@ import { fontSize } from "/src/theme/util"
 const ParagraphText = styled("div")(
   ({ theme }) => `
   ${fontSize(15, 22)}
-  color: ${theme.palette.common.grayscale.darkText}
+  color: ${theme.palette.common.grayscale.darkText};
   letter-spacing: 0;
   width: 100%;
 
@@ -184,11 +184,25 @@ const ParagraphText = styled("div")(
 `,
 )
 
+const paragraphVariants = ["small", "large"] as const
+
+type ParagraphVariant = (typeof paragraphVariants)[number]
+
+interface ParagraphProps {
+  variant?: ParagraphVariant
+}
+
 const Paragraph = ({
   children,
+  variant = "small",
   ...props
-}: React.PropsWithChildren<PropsOf<typeof ParagraphText>>) => (
-  <ParagraphText {...props}>{children}</ParagraphText>
+}: React.PropsWithChildren<ParagraphProps & PropsOf<typeof ParagraphText>>) => (
+  <ParagraphText
+    {...props}
+    className={`${props.className ?? ""} paragraph__${variant}`}
+  >
+    {children}
+  </ParagraphText>
 )
 
 export default Paragraph
diff --git a/frontend/components/NewLayout/Frontpage/Hype.tsx b/frontend/components/NewLayout/Frontpage/Hype.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from "react"
 
 import ContentWrapper from "../Common/ContentWrapper"
-import GeneralList from "../Common/GeneralList"
-import { GeneralListItemProps } from "../Common/GeneralListItem"
-// import { LinkBoxProps } from "../Common/LinkBox"
-// import LinkBoxList from "../Common/LinkBoxList"
+//import GeneralList from "../Common/GeneralList"
+// import { GeneralListItemProps } from "../Common/GeneralListItem"
+import { LinkBoxProps } from "../Common/LinkBox"
+import LinkBoxList from "../Common/LinkBoxList"
 // import PartnerDivider from "/components/NewLayout/Common/PartnerDivider"
 import { useTranslator } from "/hooks/useTranslator"
 import NaviTranslations from "/translations/navi"
@@ -34,25 +34,25 @@ function Hype() {
   const items = t("naviItems") as readonly NaviItem[]
   //const customItems = t("customNaviItems") as readonly CustomNaviItem[]
 
-  /*const listItems: Array<LinkBoxProps> = useMemo(
+  const listItems: Array<LinkBoxProps> = useMemo(
     () =>
       items.map(({ title, text, link, linkText }) => ({
         title,
         description: text,
-//         imageProps: {
-//           src: '/images/navi/' + item.img,
-//           alt: item.title,
-//           fill: true
-//         },
+        /*imageProps: {
+           src: '/images/navi/' + item.img,
+           alt: item.title,
+           fill: true
+         },*/
         linkProps: {
           href: link,
           children: linkText,
         },
       })),
     [items],
-  )*/
+  )
 
-  const listItems: Array<GeneralListItemProps> = useMemo(
+  /*const listItems: Array<GeneralListItemProps> = useMemo(
     () =>
       items.map(({ title, text, link, linkText, img }) => ({
         title,
@@ -68,7 +68,7 @@ function Hype() {
         },
       })),
     [items],
-  )
+  )*/
   /*const customListItems: Array<LinkBoxProps> = useMemo(
     () =>
       customItems.map(
@@ -96,8 +96,8 @@ function Hype() {
 
   return (
     <ContentWrapper>
-      {/*<LinkBoxList items={listItems} />*/}
-      <GeneralList type="grid" items={listItems} />
+      <LinkBoxList items={listItems} />
+      {/*<GeneralList type="grid" items={listItems} />*/}
       {/*customListItems.length > 0 && (
         <>
           <PartnerDivider />

diff --git a/frontend/components/NewLayout/Navigation/DesktopNavigationMenu.tsx b/frontend/components/NewLayout/Navigation/DesktopNavigationMenu.tsx
@@ -55,7 +55,10 @@ const UserOptionsMenu = () => {
   }, [currentUser, t, isNarrow])
 */
   const onLogOut = useCallback(
-    () => signOut(apollo, logInOrOut),
+    (e: MouseEvent) => {
+      e.preventDefault()
+      signOut(apollo, logInOrOut)
+    },
     [apollo, logInOrOut],
   )
 
@@ -68,7 +71,7 @@ const UserOptionsMenu = () => {
             label: t("myProfile"),
             items: [
               {
-                href: "#",
+                href: "",
                 label: t("logout"),
                 onClick: onLogOut,
               },

diff --git a/frontend/components/NewLayout/Navigation/NavigationDropdown.tsx b/frontend/components/NewLayout/Navigation/NavigationDropdown.tsx
@@ -233,15 +233,17 @@ const NavigationDropdownShortcuts = ({
   items,
 }: NavigationDropdownShortcutsProps) => {
   const t = useTranslator(CommonTranslations)
+  console.log("items", items)
   return (
     <NavigationDropdownShortcutContainer>
       <h2>{t("shortcuts")}</h2>
       <NavigationDropdownMenuList>
-        {items.map(({ href, label, name, external }) => (
+        {items.map(({ href, label, name, external, onClick }) => (
           <NavigationDropdownMenuLink
             key={name ?? label}
-            href={href}
+            href={href ?? undefined}
             target={external ? "_blank" : undefined}
+            onClick={onClick}
           >
             <span>
               {label}
@@ -313,8 +315,12 @@ export const NavigationDropdownLink = ({
             hasShortcuts={(shortcuts ?? []).length > 0}
           >
             <NavigationDropdownMenuList aria-labelledby={buttonName}>
-              {items.map(({ name, label, href }) => (
-                <NavigationDropdownMenuLink key={name ?? label} href={href}>
+              {items.map(({ name, label, href, onClick }) => (
+                <NavigationDropdownMenuLink
+                  key={name ?? label}
+                  href={href}
+                  onClick={onClick}
+                >
                   {label}
                 </NavigationDropdownMenuLink>
               ))}

diff --git a/frontend/components/NewLayout/Profile/Header.tsx b/frontend/components/NewLayout/Profile/Header.tsx
@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
-import { CardBody, CardDescription, CardWrapper } from "../Common/Card"
+import { CardBody, CardWrapper } from "../Common/Card"
 
 import { CurrentUserQuery } from "/graphql/generated"
 
@@ -66,10 +66,10 @@ interface InfoRowProps {
 function InfoRow({ title, content }: InfoRowProps) {
   return (
     <InfoRowContainer>
-      <InfoRowTitle variant="h6" component="h3">
+      <InfoRowTitle variant="subtitle1" component="h5">
         {title}
       </InfoRowTitle>
-      <InfoRowContent variant="h6" component="h3">
+      <InfoRowContent variant="subtitle1" component="h5">
         {content}
       </InfoRowContent>
     </InfoRowContainer>
@@ -85,13 +85,11 @@ function ProfilePageHeader({ user }: ProfilePageHeaderProps) {
       <UserInfoWrapper>
         <ProfileCardWrapper>
           <CardBody>
-            <CardDescription>
-              <InfoRow title="Email" content={user?.email ?? "-"} />
-              <InfoRow
-                title="Student number"
-                content={user?.student_number ?? "-"}
-              />
-            </CardDescription>
+            <InfoRow title="Email" content={user?.email ?? "-"} />
+            <InfoRow
+              title="Student number"
+              content={user?.student_number ?? "-"}
+            />
           </CardBody>
         </ProfileCardWrapper>
       </UserInfoWrapper>

diff --git a/frontend/components/SignInForm.tsx b/frontend/components/SignInForm.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 
 import { useApolloClient } from "@apollo/client"
+import { PropsOf } from "@emotion/react"
 import {
   FormControl,
   FormHelperText,
@@ -20,7 +21,7 @@ const StyledForm = styled("form")`
   padding: 1em;
 `
 
-function SignIn() {
+function SignIn(props?: PropsOf<typeof StyledForm>) {
   const { logInOrOut } = useLoginStateContext()
   const t = useTranslator(CommonTranslations)
   const apollo = useApolloClient()
@@ -53,7 +54,7 @@ function SignIn() {
   }, [])
 
   return (
-    <StyledForm>
+    <StyledForm {...props}>
       <FormControl required fullWidth error={error}>
         <InputLabel htmlFor="email">{t("username")}</InputLabel>
         <Input

diff --git a/frontend/lib/with-admin.tsx b/frontend/lib/with-admin.tsx
@@ -14,6 +14,7 @@ function withAdmin(Component: any) {
     PropsWithChildren<{
       admin: boolean
       signedIn: boolean
+      baseUrl?: string
     }>
   > {
     static displayName = `withAdmin(${
@@ -24,22 +25,24 @@ function withAdmin(Component: any) {
     static async getInitialProps(context: NextPageContext) {
       const admin = isAdmin(context)
       const signedIn = isSignedIn(context)
+      const baseUrl = context.pathname.includes("_new") ? "/_new" : ""
 
       prevContext = context
 
       if (!signedIn) {
         redirect({
           context,
-          target: "/sign-in",
+          target: `${baseUrl}/sign-in`,
         })
 
-        return { signedIn: false }
+        return { signedIn: false, baseUrl }
       }
 
       return {
         ...(await Component.getInitialProps?.(context)),
         admin,
         signedIn,
+        baseUrl,
       }
     }
 
@@ -54,7 +57,7 @@ function withAdmin(Component: any) {
         if (prevContext) {
           redirect({
             context: prevContext,
-            target: "/sign-in",
+            target: `${this.props.baseUrl}/sign-in`,
           })
         }
         // We don't return here because when logging out it is better to keep the old content for a moment