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

@@ -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"

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"
 

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,16 +90,18 @@ 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: "-",
     username: "",
     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
             }

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)
       })
   }
 

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>
   )

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",

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) => {