signup by type

Author: alexanmtz

frontend/src/components/areas/public/features/session/pages/session-page.tsx

@@ -19,7 +19,7 @@ const SessionPage = () => {
           <Route exact path="/reset-password/:token" component={ResetPasswordPageContainer} />
           <Route exact path="/token/:token" component={Session} />
           <Route exact path="/activate/user/:userId/token/:token" component={AccountActivation} />
-          <Route exact path="/signup/:status" component={RegisterPageContainer} />
+          <Route exact path="/signup/:type" component={RegisterPageContainer} />
           <Route exact path="/forgot" component={ForgotPasswordPageContainer} />
         </Switch>
       </HashRouter>

frontend/src/components/design-library/atoms/inputs/checkboxes/checkboxes.tsx

@@ -84,7 +84,7 @@ const Checkboxes = ({
 
   const columnCount = useMemo(() => {
     const count = checkboxesToRender.length || 1
-    return count > 4 ? 4 : count
+    return count > 5 ? 5 : count
   }, [checkboxesToRender.length])
 
   const mdSize = (12 / columnCount) as 3 | 4 | 6 | 12

frontend/src/components/design-library/atoms/inputs/fields/user-role-field/user-role-field.tsx

@@ -18,15 +18,16 @@ const UserRoleField = ({ roles, onChange }) => {
   )
 
   return (
-    <Grid container spacing={2} alignContent="center" alignItems="center">
-      <Grid size={{ xs: 12, md: 2 }}>
+    <Grid container spacing={2} alignContent="center" alignItems="center" style={{ marginTop: 20 }}>
+      <Grid size={{ xs: 12, md: 12 }}>
         <Typography
           variant="caption"
           color="textSecondary"
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
         >
           <FormattedMessage id="user.types.roles.select.label" defaultMessage="Signup as: " />
           <Tooltip
+            style={{ marginLeft: 5 }}
             placement="right"
             title={
               <FormattedMessage
@@ -39,7 +40,7 @@ const UserRoleField = ({ roles, onChange }) => {
           </Tooltip>
         </Typography>
       </Grid>
-      <Grid size={{ xs: 12, md: 10 }}>
+      <Grid size={{ xs: 12, md: 12 }}>
         <Checkboxes
           checkboxes={checkBoxes}
           includeSelectAll={true}

frontend/src/components/design-library/molecules/cards/spot-card/spot-card.styles.ts

@@ -1,12 +1,36 @@
 import { Card, CardContent } from '@mui/material'
-import { styled } from '@mui/material/styles'
+import { alpha, styled } from '@mui/material/styles'
 
-export const StyledCard = styled(Card)(() => ({
-  minWidth: 420,
-  marginTop: 40,
-  opacity: 0.8,
-  overflow: 'visible'
-}))
+const getThemePaletteByVariant = (theme, variant = 'default') => {
+  const variants = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    default: theme.palette.primary
+  }
+
+  return variants[variant] || variants.default
+}
+
+export const StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== '$themeVariant'
+})<{ $themeVariant?: string }>(({ theme, $themeVariant = 'default' }) => {
+  const palette = getThemePaletteByVariant(theme, $themeVariant)
+
+  return {
+    minWidth: 420,
+    marginTop: 40,
+    opacity: 0.8,
+    overflow: 'visible',
+    borderTop: `4px solid ${palette.main}`,
+    background: `linear-gradient(180deg, ${alpha(palette.light || palette.main, 0.14)} 0%, ${alpha(
+      theme.palette.background.paper,
+      0.95
+    )} 55%)`
+  }
+})
 
 export const StyledCardContent = styled(CardContent)(() => ({
   textAlign: 'center',

frontend/src/components/design-library/molecules/cards/spot-card/spot-card.tsx

@@ -9,7 +9,7 @@ import { StyledCard, StyledCardContent, Content } from './spot-card.styles'
 
 import logo from 'images/logo-complete.png'
 
-const SpotCard = ({ title, description, children }) => {
+const SpotCard = ({ title, description, children, themeVariant = 'default' }) => {
   const [openDialog, setOpenDialog] = useState(false)
   const [dialogType, setDialogType] = useState(null)
 
@@ -38,7 +38,7 @@ const SpotCard = ({ title, description, children }) => {
 
   return (
     <>
-      <StyledCard>
+      <StyledCard $themeVariant={themeVariant}>
         <StyledCardContent>
           <Link to="/">
             <img src={logo} width={140} alt="Logo" />

frontend/src/components/design-library/molecules/form-section/login-form/login-form-main/login-form.tsx

@@ -59,7 +59,7 @@ const LoginForm: React.FC<LoginButtonProps> = ({
   return (
     <Wrapper contrast={contrast}>
       <Content>
-        <div>
+        <div style={{ textAlign: 'center' }}>
           {mode !== 'reset' ? (
             <>
               <Typography

frontend/src/components/design-library/molecules/form-section/login-form/login-form-signup/login-form-signup.tsx

@@ -27,6 +27,8 @@ type LoginFormSignupProps = {
   onSignin?: () => void
   roles?: any
   fetchRoles?: () => void
+  hideRoleSelection?: boolean
+  presetRoleId?: string | number
 }
 
 const LoginFormSignup = ({
@@ -37,7 +39,9 @@ const LoginFormSignup = ({
   agreeTermsCheckError,
   onSignin,
   roles,
-  fetchRoles
+  fetchRoles,
+  hideRoleSelection,
+  presetRoleId
 }: LoginFormSignupProps) => {
   const [openTermsDialog, setOpenTermsDialog] = useState(false)
   const [openPrivacyDialog, setOpenPrivacyDialog] = useState(false)
@@ -227,6 +231,7 @@ const LoginFormSignup = ({
     e.preventDefault()
     const { captchaChecked, agreeTermsCheck, name, username, password, confirmPassword, Types } =
       state
+    const selectedTypes = hideRoleSelection && presetRoleId ? [presetRoleId] : Types
     const termsAgreed = termsChecked(agreeTermsCheck)
     const validName = validateName(name)
     const validEmail = validateEmail(username)
@@ -245,7 +250,7 @@ const LoginFormSignup = ({
           name: name,
           email: username,
           password: password,
-          Types: Types
+          Types: selectedTypes
         })
         const errorType = response?.error && response?.error?.response?.data.message
         if (errorType === 'user.exist') {
@@ -279,11 +284,20 @@ const LoginFormSignup = ({
   }
 
   useEffect(() => {
-    process.env.NODE_ENV === 'development' && setState({ ...state, captchaChecked: true })
-    process.env.NODE_ENV === 'test' && setState({ ...state, captchaChecked: true })
-    fetchRoles()
+    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+      setState((prev) => ({ ...prev, captchaChecked: true }))
+    }
+
+    fetchRoles?.()
   }, [])
 
+  useEffect(() => {
+    if (!hideRoleSelection) return
+    if (presetRoleId === undefined || presetRoleId === null) return
+
+    setState((prev) => ({ ...prev, Types: [presetRoleId] }))
+  }, [hideRoleSelection, presetRoleId])
+
   const { error, password, confirmPassword } = state
 
   return (
@@ -359,9 +373,11 @@ const LoginFormSignup = ({
             defaultValue={state.confirmPassword}
           />
         </Margins>
-        <Margins>
-          <UserRoleField roles={roles} onChange={handleTypesChange} />
-        </Margins>
+        {!hideRoleSelection && (
+          <Margins>
+            <UserRoleField roles={roles} onChange={handleTypesChange} />
+          </Margins>
+        )}
         <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
           <div style={{ display: 'flex', alignItems: 'center' }}>
             {state.agreeTermsCheck ? (

frontend/src/components/design-library/pages/public-pages/session-public-pages/signup-page/signup-page.tsx

@@ -2,23 +2,93 @@ import SpotCard from 'design-library/molecules/cards/spot-card/spot-card'
 import LoginFormSignup from 'design-library/molecules/form-section/login-form/login-form-signup/login-form-signup'
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
+
+const normalizeTypeValue = (value = '') =>
+  value
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/[_\s]+/g, '-')
+
+const singularizeTypeValue = (value = '') => normalizeTypeValue(value).replace(/s$/, '')
+
+const formatTypeLabel = (value = '') =>
+  value
+    .toString()
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+
+const getThemeVariant = (type = '') => {
+  const normalizedType = normalizeTypeValue(type)
+
+  if (normalizedType.includes('maintainer')) return 'primary'
+  if (normalizedType.includes('sponsor')) return 'secondary'
+  if (normalizedType.includes('contributor')) return 'success'
+  if (normalizedType.includes('manager')) return 'warning'
+  return 'info'
+}
+
+const resolveRoleByType = (rawType, rolesData = []) => {
+  const normalizedType = normalizeTypeValue(rawType)
+  const singularType = singularizeTypeValue(rawType)
+
+  if (!normalizedType || !Array.isArray(rolesData) || rolesData.length === 0) {
+    return null
+  }
+
+  return (
+    rolesData.find((role) => {
+      const candidates = [role?.name, role?.label, role?.id].filter(Boolean)
+      return candidates.some((candidate) => {
+        const normalizedCandidate = normalizeTypeValue(candidate)
+        const singularCandidate = singularizeTypeValue(candidate)
+
+        return (
+          normalizedCandidate === normalizedType ||
+          singularCandidate === singularType ||
+          normalizedCandidate.includes(normalizedType) ||
+          normalizedType.includes(normalizedCandidate) ||
+          singularCandidate.includes(singularType) ||
+          singularType.includes(singularCandidate)
+        )
+      })
+    }) || null
+  )
+}
 
 const SignupPage = ({ handleSignup, roles, fetchRoles }) => {
   const history = useHistory()
+  const { type, status } = useParams<{ type?: string; status?: string }>()
+  const routeType = type || status
+  const resolvedRole = resolveRoleByType(routeType, roles?.data)
+  const selectedTypeLabel = resolvedRole?.label || resolvedRole?.name || formatTypeLabel(routeType)
+  const isTypedSignup = !!resolvedRole
+
   return (
     <SpotCard
       title={<FormattedMessage id="signup.welcome" defaultMessage="Welcome!" />}
       description={
-        <FormattedMessage id="signup.description" defaultMessage="Create your account" />
+        isTypedSignup ? (
+          <FormattedMessage
+            id="signup.asType"
+            defaultMessage="Signup as a {type}"
+            values={{ type: selectedTypeLabel }}
+          />
+        ) : (
+          <FormattedMessage id="signup.description" defaultMessage="Create your account" />
+        )
       }
+      themeVariant={isTypedSignup ? getThemeVariant(resolvedRole?.name || routeType) : 'default'}
     >
       <LoginFormSignup
         onSignin={() => history.push('/signin')}
         onSubmit={handleSignup}
         roles={roles}
         fetchRoles={fetchRoles}
         noCancelButton
+        hideRoleSelection={isTypedSignup}
+        presetRoleId={resolvedRole?.id}
       />
     </SpotCard>
   )

frontend/src/main/routes.tsx

@@ -24,6 +24,7 @@ export default (props) => (
         path={[
           '/reset-password',
           '/signup',
+          '/signup/:type',
           '/signin',
           '/forgot',
           '/activate/user/:userId/token/:token',