WIP

src/components/app/app.scss

@@ -91,7 +91,8 @@ div.group-list-item {
 
 div.member {
     border: solid 1px $grey-lighter;
-    min-width: 200px;
+    margin-right: 10px;
+    min-width: 150px;
     padding: 1rem;
 }
 

src/components/group-invitations/group-invitations.tsx

@@ -52,16 +52,17 @@ const GroupInvitations: FC<Props> = ({
             <div className="invitation-options">
                 <SelectField name="expiration" label="Expires" options={expirationOptions} icon={faStopwatch} />
                 <SelectField name="limit" label="Uses" options={limitOptions} icon={faPauseCircle} />
-            </div>
 
-            <div className="field">
-                <div className="control">
-                    <button className="button is-primary" onClick={() => createInvitation(expiration, limit)}>
-                        <span className="icon is-small">
-                            <FontAwesomeIcon icon={faCheckCircle} />
-                        </span>
-                        <span>Create</span>
-                    </button>
+                <div className="field">
+                    <div className="label">&nbsp;</div>
+                    <div className="control">
+                        <button className="button is-primary" onClick={() => createInvitation(expiration, limit)}>
+                            <span className="icon is-small">
+                                <FontAwesomeIcon icon={faCheckCircle} />
+                            </span>
+                            <span>Create</span>
+                        </button>
+                    </div>
                 </div>
             </div>
             <br />

src/components/member-list/member-list-item/index.tsx

@@ -24,20 +24,13 @@ const MemberListItem: FC<Props> = ({ member }) => {
     }
 
     return (
-        <article className="media">
-            <div className="media-content">
-                <div className="content">
-                    <div className="member">
-                        <Link to={`/u/${member.id}`} className="is-size-5">{member.name}</Link>
-                        <br />
-                        <Link to={`/u/${member.id}`} className="is-size-6 is-red">@{member.id}</Link>
-                        <br />
-                        <span className={classNames(tagClassDictionary)}>{capitalize(member.membership as string)}</span>
-                    </div>
-                    
-                </div>
-            </div>
-        </article>
+        <div className="member">
+            <Link to={`/u/${member.id}`} className="is-size-5">{member.name}</Link>
+            <br />
+            <Link to={`/u/${member.id}`} className="is-size-6 is-red">@{member.id}</Link>
+            <br />
+            <span className={classNames(tagClassDictionary)}>{capitalize(member.membership as string)}</span>
+        </div>
     )
 }
 

src/components/pages/group-admin/group-admin.tsx

@@ -129,6 +129,8 @@ const GroupAdmin: FC<Props> = ({
                             <div>
                                 <GroupInvitations group={match.params.id} />
                                 <hr />
+
+                                <h1 className="title is-size-4">Members</h1>
                                 <MemberList group={match.params.id} />
                             </div>
                         }

src/components/pages/register-group/index.ts

@@ -2,16 +2,30 @@ import { connect } from 'react-redux'
 
 import { handleApiError } from 'src/api/errors'
 import { fetchGroup } from 'src/actions/directory'
+import { initField } from 'src/actions/forms'
+import { showNotification } from 'src/actions/notifications'
+import { register } from 'src/actions/registration'
 import { getEntity } from 'src/selectors/entities'
-import { AppState, AppThunkDispatch, EntityType } from 'src/types'
+import { getForm } from 'src/selectors/forms'
+
+import { valueFromForm } from 'src/utils'
+import { AppState, AppThunkDispatch, EntityType, Form, NotificationType } from 'src/types'
 
 import RegisterGroup, { Props } from './register-group'
 
 const mapStateToProps = (state: AppState, ownProps: Props) => ({
     group: getEntity(state, EntityType.Group, ownProps.match.params.id),
+    form: getForm(state),
 })
 
 const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
+    initForm: () => {
+        dispatch(initField('user-id', 'id'))
+        dispatch(initField('user-name', 'name'))
+        dispatch(initField('user-email', 'email'))
+        dispatch(initField('password'))
+        dispatch(initField('user-agree'))
+    },
     fetchGroup: async () => {
         try {
             await dispatch(fetchGroup(ownProps.match.params.id))
@@ -19,6 +33,28 @@ const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
             handleApiError(err, dispatch, ownProps.history)
         }
     },
+    register: async (form: Form) => {
+        if (!valueFromForm<boolean>(form, 'user-agree', false)) {
+            dispatch(showNotification(NotificationType.Error, 'You must agree to the terms and conditions.'))
+            return
+        }
+
+        try {
+            await dispatch(register({
+                id: valueFromForm<string>(form, 'user-id', ''),
+                email: valueFromForm<string>(form, 'user-email', ''),
+                password: valueFromForm<string>(form, 'password', ''),
+                name: valueFromForm<string>(form, 'user-name', ''),
+                group: ownProps.match.params.id,
+            }))
+
+            dispatch(showNotification(NotificationType.Welcome, `Welcome to Flexor!`))
+    
+            ownProps.history.push('/self')
+        } catch (err) {
+            handleApiError(err, dispatch, ownProps.history)
+        }
+    }
 })
 
 export default connect(

src/components/pages/register-group/register-group.tsx

@@ -1,7 +1,16 @@
 import React, { FC, useEffect } from 'react'
 import { RouteComponentProps } from 'react-router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons'
 
-import { Entity } from 'src/types'
+import { setTitle } from 'src/utils'
+import { useDeepCompareEffect } from 'src/hooks'
+
+import { Entity, Form } from 'src/types'
+
+import PageHeader from 'src/components/page-header'
+import Loading from 'src/components/pages/loading'
+import CreateUserForm from 'src/components/create-user-form'
 
 interface Params {
     id: string
@@ -9,26 +18,42 @@ interface Params {
 
 export interface Props extends RouteComponentProps<Params> {
     group?: Entity
+    form: Form
     fetchGroup: () => void
+    initForm: () => void
+    register: (form: Form) => void
 }
 
-const RegisterGroup: FC<Props> = ({ group, fetchGroup }) => {
+const RegisterGroup: FC<Props> = ({ group, form, fetchGroup, initForm, register }) => {
     useEffect(() => {
         fetchGroup()
+        initForm()
+        setTitle('Register')
     }, [])
 
-    if (!group) {
-        return (
-            <div className="main-content">
-                <h1 className="title">Community Not Found</h1>
-            </div>
-        )
-    }
+    useDeepCompareEffect(() => {
+        if (group) setTitle(`Register @ ${group.name}`)
+    }, [group])
+
+    if (!group) return <Loading />
 
     return (
         <div>
-            <h1 className="title">{group.name}</h1>
-            <h2 className="subtitle">Create a new Account.</h2>
+            <PageHeader title="Register" subtitle={group ? group.name : ''} />
+
+            <div className="main-content">
+                <div className="centered-content">
+                    <CreateUserForm />
+                    <br />
+
+                    <button className="button is-primary" onClick={() => register(form)}>
+                        <span className="icon is-small">
+                            <FontAwesomeIcon icon={faUserPlus} />
+                        </span>
+                        <span>Create Your Account</span>
+                    </button>
+                </div>
+            </div>
         </div>
     )
 }

src/components/pages/register/index.ts

@@ -52,6 +52,8 @@ const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
                 name: valueFromForm<string>(form, 'group-name', ''),
                 registration: valueFromForm<string>(form, 'group-registration', ''),
             }))
+
+            dispatch(showNotification(NotificationType.Welcome, `Welcome to Flexor!`))
     
             ownProps.history.push('/self')
         } catch (err) {