>>> continue

dist/styles/bootstrap-darkster.css

@@ -5945,6 +5945,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;

dist/styles/bootstrap-default.css

@@ -5899,6 +5899,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;

dist/styles/bootstrap-greyson.css

@@ -5654,6 +5654,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;

dist/styles/bootstrap-herbie.css

@@ -5902,6 +5902,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;

dist/styles/bootstrap-monotony.css

@@ -5903,6 +5903,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;

src/Gargantext/Components/Bootstrap/Bootstrap.purs

@@ -9,6 +9,7 @@ import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
 import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
 import Gargantext.Components.Bootstrap.ContextMenu(contextMenu, contextMenuItem) as Exports
 import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
+import Gargantext.Components.Bootstrap.FormCheckbox(formCheckbox) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
 import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports

src/Gargantext/Components/Bootstrap/Form/FormCheckbox.purs

+module Gargantext.Components.Bootstrap.FormCheckbox (formCheckbox) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (elem, intercalate)
+import Effect (Effect)
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Unsafe.Coerce (unsafeCoerce)
+
+type Props =
+  ( callback    :: Boolean -> Effect Unit
+  , value       :: Boolean
+  | Options
+  )
+
+type Options =
+  ( status      :: ComponentStatus
+  , className   :: String
+  )
+
+options :: Record Options
+options =
+  { status      : Enabled
+  , className   : ""
+  }
+
+-- | Structural Component for an <input type="checkbox">
+-- |
+-- |    - not using "bootstrap" here, as their checkbox does not have many
+-- |      feature (sizing, colour variant), and their use of checkbox/label
+-- |      is far too opinionated
+formCheckbox :: forall r. R2.OptLeaf Options Props r
+formCheckbox = R2.optLeaf component options
+
+componentName :: String
+componentName = "b-form-checkbox"
+
+component :: R.Component Props
+component = R.hooksComponent componentName cpt where
+  cpt props@{ callback
+            , status
+            } _ = do
+    -- Computed
+    className <- pure $ intercalate " "
+      -- provided custom className
+      [ props.className
+      -- BEM classNames
+      , componentName
+      , componentName <> "--" <> show status
+      ]
+
+    change <- pure $ onChange status callback
+    -- Render
+    pure $
+
+      H.input
+      { className
+      , on: { change }
+      , type: "checkbox"
+      , disabled: elem status [ Disabled ]
+      , readOnly: elem status [ Idled ]
+      , value: props.value
+      , checked: props.value
+      }
+
+-- | * Change event will effectively be triggered according to the
+-- | component status props
+-- | * Also directly returns the newly input value
+-- | (usage not so different from `targetValue` of ReactBasic)
+onChange :: forall event.
+     ComponentStatus
+  -> (Boolean -> Effect Unit)
+  -> event
+  -> Effect Unit
+onChange status callback event = do
+  if   status == Enabled
+  then callback $ (unsafeCoerce event).target.checked
+  else pure unit

src/Gargantext/Components/Login.purs

@@ -35,7 +35,7 @@ import Gargantext.Ends (Backend(..))
 import Gargantext.Hooks.Loader as GHL
 import Gargantext.Sessions (Session(..), Sessions, Action(Logout), unSessions)
 import Gargantext.Sessions as Sessions
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -200,10 +200,6 @@ activeConnections :: T.Box Sessions -> Sessions -> Array R.Element
 activeConnections _        sessions' | Sessions.null sessions'  = mempty
 activeConnections sessions sessions'                            =
   [
-    H.h6
-    {}
-    [ H.text "Active place(s)" ]
-  ,
     H.table
     { className: intercalate " "
         [ "login-modal__active-places"
@@ -216,7 +212,7 @@ activeConnections sessions sessions'                            =
       [
         H.tr
         {} $
-        [ "", "Active(s) connection(s)", "Fonction", "Clear data/Logout"] <#>
+        [ "", "Active connections", "Fonction", "Clear data/Logout"] <#>
         (
           B.th_
         )
@@ -281,8 +277,13 @@ renderSessionCpt = here.component "renderSession" cpt where
       H.tr
       {}
       [
-        B.td_ $
-        nbsp 1
+        H.td
+        {}
+        [
+          B.icon
+          { name: "user"
+          }
+        ]
       ,
         B.td_ $
         show session
@@ -354,7 +355,7 @@ renderBackendCpt = here.component "renderBackend" cpt where
         {}
         [
           B.icon
-          { name: "hand-o-right"
+          { name: "database"
           }
         ]
       ,

src/Gargantext/Components/Login/Form.purs

@@ -26,6 +26,7 @@ import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
+import Record.Unsafe (unsafeSet)
 import Toestand as T
 
 here :: R2.Here
@@ -57,7 +58,10 @@ componentCpt = here.component "main" cpt where
 
     -- | Hooks
     -- |
-    { state, bindStateKey } <- useStateRecord (defaultData :: FormData)
+    { state
+    , bindStateKey
+    , stateBox
+    } <- useStateRecord (defaultData :: FormData)
     fv <- useFormValidation
 
     -- | Behaviors
@@ -94,6 +98,18 @@ componentCpt = here.component "main" cpt where
 
             T.write_ false onPending
 
+      -- @XXX StateRecord with distinct value types
+      onAgreedCheckboxChange :: Boolean -> Effect Unit
+      onAgreedCheckboxChange value = T.modify_
+        (\prev -> unsafeSet "agreed" value prev)
+        stateBox
+
+      -- @XXX StateRecord with distinct value types
+      onAgreedLabelClick :: Unit -> Effect Unit
+      onAgreedLabelClick _ = T.modify_
+        (\prev -> unsafeSet "agreed" (not state.agreed) prev)
+        stateBox
+
     -- | Render
     -- |
     pure $
@@ -131,7 +147,7 @@ componentCpt = here.component "main" cpt where
           { name: "hand-o-right" }
         ,
           B.wad_
-          [ "d-inline-block", "virtual-space", "w-1" ]
+          [ "d-inline-block", "virtual-space", "w-2" ]
         ,
           H.text "Request access"
         ]
@@ -204,11 +220,54 @@ componentCpt = here.component "main" cpt where
             ,
               H.a
               { on: { click: onPasswordForgottenClick }
-              , className: "font-size-95 text-decoration-underline"
+              , className: "font-size-95 text-decoration-underline float-right"
               }
               [ H.text "Password forgotten" ]
             ]
           ]
+        ,
+          -- Agreed
+          H.div
+          { className: intercalate " "
+              [ "form-group"
+              , (fv.hasError' "agreed") ?
+                  "form-group--error" $
+                  mempty
+              , "d-flex"
+              ]
+          }
+          [
+            H.div
+            { className: "form-group__field" }
+            [
+              B.formCheckbox
+              { value: state.agreed
+              , callback: onAgreedCheckboxChange
+              }
+            ]
+          ,
+            H.div
+            { className: intercalate " "
+                [ "form-group__label"
+                , "px-2"
+                ]
+            }
+            [
+              H.label
+              { on: { click: onAgreedLabelClick }
+              }
+              [
+                H.text "I hereby accept the "
+              ,
+                H.a
+                { target: "_blank"
+                , className: "text-decoration-underline"
+                , href: "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
+                }
+                [ H.text "terms of use" ]
+              ]
+            ]
+          ]
         ,
           -- Error
           R2.fromMaybe error' $
@@ -226,10 +285,10 @@ componentCpt = here.component "main" cpt where
           }
           [
             B.icon
-            { name: "hand-o-right" }
+            { name: "sign-in" }
           ,
             B.wad_
-            [ "d-inline-block", "virtual-space", "w-1" ]
+            [ "d-inline-block", "virtual-space", "w-1", "cursor-pointer" ]
           ,
             H.text "Log in"
           ]

src/Gargantext/Hooks/StateRecord/Unboxed.purs

@@ -13,6 +13,10 @@ import Prim.RowList (class RowToList)
 import Reactix as R
 import Toestand as T
 
+-- @XXX StateRecord with distinct value types → eg. conflicts when "string" and
+--      "boolean" are coexisting as value on the same hook
+--        ↳ workaround is to manually bind the input (copying `setStateKey`
+--          method)
 
 type Methods r a =
   -- | Every provided props will be available within the `formFields` proxy

src/sass/base/_form.scss

@@ -45,7 +45,6 @@
   label { color: $danger; }
 
   .b-form-input { @include inputError; }
-
 }
 
 .form-group {

src/sass/components/_grouped.scss

@@ -22,6 +22,19 @@
   }
 }
 
+/// Checkbox
+///-----------------------------------------------------------------------------
+
+.b-form-checkbox {
+  @include clickable();
+
+  &--disabled,
+  &--deferred,
+  &--idled {
+    @include unclickable();
+  }
+}
+
 /// Modal
 ///-----------------------------------------------------------------------------