Feat/game 82

src-ts/lib/form/Form.tsx

@@ -35,6 +35,7 @@ interface FormProps<ValueType, RequestType> {
     readonly onChange?: (inputs: ReadonlyArray<FormInputModel>) => void,
     readonly onSuccess?: () => void
     readonly requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => RequestType
+    readonly resetFormOnUnmount?: boolean
     readonly save: (value: RequestType) => Promise<void>
 }
 
@@ -83,6 +84,14 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
             inputs,
         ])
 
+        useEffect(() => {
+            return () => {
+                if (props.resetFormOnUnmount) {
+                    onReset()
+                }
+            }
+        }, [])
+
         function checkIfFormIsValid(formInputFields: Array<FormInputModel>): void {
             setFormInvalid(formInputFields.filter(item => !!item.error).length > 0)
         }

src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss

@@ -45,9 +45,6 @@ $error-line-height: 14px;
             display: flex;
             flex-direction: row;
             align-items: center;
-            @include ltemd {
-                align-items: flex-start;
-            }
             .checkbox-label {
                 margin-left: $space-sm;
                 flex: 1;

src-ts/lib/form/validator-functions/validator.functions.ts

@@ -90,7 +90,7 @@ export function matchOther(value: InputValue, formElements?: HTMLFormControlsCol
 }
 
 export function required(value: InputValue): string | undefined {
-    return (value === undefined || value === '') ? 'Required' : undefined
+    return (value === undefined || value === '' || !(value as FileList).length) ? 'Required' : undefined
 }
 
 export function requiredIfOther(value: InputValue, formElements?: HTMLFormControlsCollection, otherFieldName?: string): string | undefined {

src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.module.scss

@@ -1,8 +1,11 @@
 @import "../../../../../lib/styles/variables";
+@import "../../../../../lib/styles/includes";
 
 .wrapper {
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+    min-height: 100%;
 
     .badge {
         display: flex;
@@ -28,12 +31,21 @@
         }
     }
 
-    .actions {
+    .actions-wrap {
         display: flex;
-        align-items: center;
+        flex-direction: column;
+
+        .actions {
+            display: flex;
+            align-items: center;
+
+            @include ltemd {
+                justify-content: flex-end;
+            }
 
-        a {
-            margin-right: $space-md;
+            a {
+                margin-right: $space-md;
+            }
         }
     }
 }

src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { BaseModal, Button } from '../../../../../lib'
+import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../../lib'
 import { badgeDetailPath } from '../../../gamification-admin.routes'
 import { GameBadge } from '../../game-badge.model'
 
@@ -13,6 +13,8 @@ export interface BadgeCreatedModalProps {
 
 const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalProps) => {
 
+    const isMobile: boolean = useCheckIsMobile()
+
     function onClose(): void {
         props.onClose()
     }
@@ -34,17 +36,22 @@ const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalP
                     />
                     <p className={styles['badge-name']}>{props.badge.badge_name} badge has been sucessfully created.</p>
                 </div>
-                <div className={styles.actions}>
-                    <Button
-                        label='View'
-                        buttonStyle='primary'
-                        route={badgeDetailPath(props.badge.id)}
-                    />
-                    <Button
-                        label='Create a new badge'
-                        buttonStyle='secondary'
-                        onClick={() => window.location.reload()}
-                    />
+                <div className={styles['actions-wrap']}>
+                    {
+                        isMobile && <PageDivider />
+                    }
+                    <div className={styles.actions}>
+                        <Button
+                            label='View'
+                            buttonStyle='primary'
+                            route={badgeDetailPath(props.badge.id)}
+                        />
+                        <Button
+                            label='Create a new badge'
+                            buttonStyle='secondary'
+                            onClick={() => window.location.reload()}
+                        />
+                    </div>
                 </div>
             </div>
         </BaseModal>

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx

@@ -42,6 +42,7 @@ const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps)
         <Form
             formDef={props.formDef}
             requestGenerator={generateRequest}
+            resetFormOnUnmount={true}
             save={saveAsync}
         />
     )

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx

@@ -52,6 +52,7 @@ export const createBadgeFormDef: FormDefinition = {
                 {
                     label: 'Badge Name',
                     name: CreateBadgeFormField.badgeName,
+                    placeholder: 'Enter badge name',
                     type: 'text',
                     validators: [
                         {
@@ -62,6 +63,7 @@ export const createBadgeFormDef: FormDefinition = {
                 {
                     label: 'Badge Description',
                     name: CreateBadgeFormField.badgeDesc,
+                    placeholder: 'Enter badge description, details, how to get awarded info',
                     type: 'textarea',
                     validators: [
                         {