From d134c9ab7388b5c1b52f03a8df528bf3014d3982 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 26 Nov 2024 08:41:12 +0100
Subject: [PATCH] Fix/add groups when register (#58)

* add groups

* add logging on error

* add correct naming for "plan" user groups

* Print out role of users in the userCard

* remove type warning
---
 src/components/LoginForm.tsx     |  6 +-----
 src/components/PlansModal.tsx    |  5 +----
 src/components/RegisterForm.tsx  | 25 +++++++++++++++++++++----
 src/components/RegisterModal.tsx |  2 +-
 src/components/UserCard.tsx      | 15 ++++++++++++---
 src/constants.ts                 |  6 +++---
 src/services.tsx                 | 16 ++++++++++++++++
 7 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 68dfb5f..2a55dd1 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -1,8 +1,4 @@
-import {
-  BadRequest,
-  NotAuthenticated,
-  type FeathersError,
-} from "@feathersjs/errors"
+import { type FeathersError } from "@feathersjs/errors"
 import React, { useRef } from "react"
 import { Form } from "react-bootstrap"
 import { useBrowserStore } from "../store"
diff --git a/src/components/PlansModal.tsx b/src/components/PlansModal.tsx
index d32483c..286b6d3 100644
--- a/src/components/PlansModal.tsx
+++ b/src/components/PlansModal.tsx
@@ -1,7 +1,6 @@
-import { Fragment } from "react"
 import Page from "./Page"
 // import PlanCard from "./PlanCard"
-import { Col, Container, OverlayTrigger, Row, Tooltip } from "react-bootstrap"
+import { Col, Container, Row } from "react-bootstrap"
 import type { Plan } from "./PlanCard"
 import { usePersistentStore } from "../store"
 import {
@@ -38,10 +37,8 @@ import {
   Minus,
   WarningCircle,
   Xmark,
-  UserBadgeCheck,
 } from "iconoir-react"
 import "./PlansModal.css"
-import PlanFeature from "./PlanFeatureCard"
 import MarkdownSnippet from "./MarkdownSnippet"
 import PlansModalFeatureRow from "./PlansModalFeatureRow"
 
diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx
index 441f510..ef1ac12 100644
--- a/src/components/RegisterForm.tsx
+++ b/src/components/RegisterForm.tsx
@@ -61,6 +61,20 @@ export interface RegisterFormPayload {
   plan: string
 }
 
+export interface RegisterFormPreview {
+  email: string
+  firstname: string
+  lastname: string
+  username: string
+  profile: {
+    pattern: string[]
+  }
+  pattern: string
+  isStaff: boolean
+  agreedToTerms: boolean
+  groups: string[]
+}
+
 export interface RegisterFormProps {
   className?: string
   onSubmit: (payload: RegisterFormPayload) => void
@@ -76,7 +90,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
   const acceptTermsDate = usePersistentStore((state) => state.acceptTermsDate)
   const setView = useBrowserStore((state) => state.setView)
   const [formError, setFormError] = useState<Error | null>(null)
-  const [formPreview, setFormPreview] = useState(() => ({
+  const [formPreview, setFormPreview] = useState<RegisterFormPreview>(() => ({
     email: "",
     firstname: "-",
     lastname: "-",
@@ -84,8 +98,10 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
     profile: {
       pattern: generatePattern(),
     },
+    pattern: "",
     isStaff: false,
     agreedToTerms: false,
+    groups: [],
   }))
 
   const formPayload = useRef<RegisterFormPayload>({
@@ -191,8 +207,9 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
         firstname: formPayload.current.firstname,
         lastname: formPayload.current.lastname,
         username: formPayload.current.email,
+        groups: [formPayload.current.plan],
       }))
-    }, 1000)
+    }, 100)
   }
 
   useEffect(() => {
@@ -205,7 +222,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
 
   return (
     <Form onSubmit={handleOnSubmit} className={`RegisterForm ${className}`}>
-      <ErrorManager error={formError || error} />
+      <ErrorManager error={error || formError} />
       <section className="mb-3 d-flex flex-wrap gap-2 align-items-center">
         {Plans.map((plan) => (
           <Form.Check
@@ -287,7 +304,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
       <Form.Group className="mb-3" controlId="ModalRegisterForm.agreedToTerms">
         <Form.Check
           checked={acceptTermsDate !== null}
-          onChange={(e) => {
+          onChange={() => {
             if (acceptTermsDate) {
               return
             }
diff --git a/src/components/RegisterModal.tsx b/src/components/RegisterModal.tsx
index 15951f2..d306366 100644
--- a/src/components/RegisterModal.tsx
+++ b/src/components/RegisterModal.tsx
@@ -31,7 +31,7 @@ const RegisterModal = () => {
       })
       .catch((err: FeathersError) => {
         setError(err)
-        console.error("[RegisterModal] create", err, err.data)
+        console.error("[RegisterModal] create", err, err.message, err.data)
       })
   }
 
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index 7df476b..42128b6 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -1,4 +1,5 @@
 import Avatar from "boring-avatars"
+import { PlanAcademicUser, PlanStudentUser } from "../constants"
 
 export interface User {
   username: string
@@ -23,6 +24,16 @@ const UserCard = ({
   user: User
 }) => {
   console.debug("[UserCard] rendering:", user)
+  let role = user.isStaff ? "Staff" : "Basic User"
+
+  if (user.groups) {
+    if (user.groups.includes(PlanStudentUser)) {
+      role = "Student"
+    } else if (user.groups.includes(PlanAcademicUser)) {
+      role = "Academic"
+    }
+  }
+
   return (
     <div className={`UserCard d-flex align-items-center ${className}`}>
       <div className="me-2">
@@ -37,9 +48,7 @@ const UserCard = ({
         <h3 className="m-0 small">
           {user.firstname} {user.lastname}
         </h3>
-        <p className="m-0 smallcaps">
-          {user.isStaff ? "staff" : "researcher"}{" "}
-        </p>
+        <p className="m-0 smallcaps">{role}</p>
       </div>
     </div>
   )
diff --git a/src/constants.ts b/src/constants.ts
index c0031a5..106233d 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -136,9 +136,9 @@ export const Features: string[] = [
 ]
 
 export const PlanGuest = "guest"
-export const PlanImpressoUser = "basic-user"
-export const PlanStudentUser = "student-user"
-export const PlanAcademicUser = "academic-user"
+export const PlanImpressoUser = "plan-basic"
+export const PlanStudentUser = "plan-educational"
+export const PlanAcademicUser = "plan-academic"
 export const PlanAcademicUserPlus = "academic-user-plus"
 export const PlanLabels: Record<string, string> = {
   [PlanGuest]: "Guest",
diff --git a/src/services.tsx b/src/services.tsx
index df2ccb2..620c449 100644
--- a/src/services.tsx
+++ b/src/services.tsx
@@ -24,6 +24,22 @@ app.configure(
     timeout: 20000,
   }),
 )
+app.hooks({
+  error: {
+    all: [
+      (context) => {
+        console.error(
+          `[services] error hook on ${context.path}/${context.method}`,
+        )
+        console.error("[services] error `data`:", context.error?.data)
+        console.error("[services] error `message`:", context.error?.message)
+        console.error("[services] error object:", context.error)
+        return
+      },
+    ],
+  },
+})
+
 console.info("[services] socket.io version", socket.io.engine.id)
 
 socket.on("connect_error", (err) => {