Commit 7e35901f authored by arturo's avatar arturo

>>> continue

parent 2c7161f6
...@@ -9046,6 +9046,46 @@ a:focus { ...@@ -9046,6 +9046,46 @@ a:focus {
#portal .hidden { #portal .hidden {
visibility: hidden; visibility: hidden;
} }
#app .cursor-crosshair,
#portal .cursor-crosshair {
cursor: crosshair;
}
#app .cursor-text,
#portal .cursor-text {
cursor: text;
}
#app .cursor-move,
#portal .cursor-move {
cursor: move;
}
#app .cursor-grab,
#portal .cursor-grab {
cursor: grab;
}
#app .cursor-grabbing,
#portal .cursor-grabbing {
cursor: grabbing;
}
#app .cursor-not-allowed,
#portal .cursor-not-allowed {
cursor: not-allowed;
}
#app .cursor-all-scroll,
#portal .cursor-all-scroll {
cursor: all-scroll;
}
#app .cursor-ew-resize,
#portal .cursor-ew-resize {
cursor: ew-resize;
}
#app .cursor-ns-resize,
#portal .cursor-ns-resize {
cursor: ns-resize;
}
#app .cursor-pointer,
#portal .cursor-pointer {
cursor: pointer;
}
#app .virtual-space::after, #app .virtual-space::after,
#portal .virtual-space::after { #portal .virtual-space::after {
content: "​"; content: "​";
...@@ -9757,6 +9797,7 @@ input[type=range]:-moz-focusring { ...@@ -9757,6 +9797,7 @@ input[type=range]:-moz-focusring {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
width: 200px; width: 200px;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__log-in { .login-modal-form__log-in {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
...@@ -9766,6 +9807,7 @@ input[type=range]:-moz-focusring { ...@@ -9766,6 +9807,7 @@ input[type=range]:-moz-focusring {
margin-right: auto; margin-right: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__form { .login-modal-form__form {
margin: 0 auto; margin: 0 auto;
...@@ -9777,6 +9819,61 @@ input[type=range]:-moz-focusring { ...@@ -9777,6 +9819,61 @@ input[type=range]:-moz-focusring {
text-align: center; text-align: center;
} }
.forgot-password-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.forgot-password-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.forgot-password-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.forgot-password-form__subtitle {
padding-top: calc(2 * 0.75rem);
padding-left: calc(2* 1.25rem);
padding-right: calc(2* 1.25rem);
padding-bottom: 0.75rem;
text-align: center;
font-family: "Comfortaa";
font-size: 24px;
}
.forgot-password-form__submit {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
font-weight: bold;
}
.forgot-password-form__form {
margin: 0 auto;
width: 520px;
}
.forgot-password-form__error {
margin-bottom: 24px;
color: #FF304F;
text-align: center;
}
.forgot-password-form__success {
margin-bottom: 24px;
color: #015668;
text-align: center;
}
.maintree { .maintree {
position: relative; position: relative;
animation: 15ms fade-in; animation: 15ms fade-in;
......
...@@ -8995,6 +8995,46 @@ a:focus { ...@@ -8995,6 +8995,46 @@ a:focus {
#portal .hidden { #portal .hidden {
visibility: hidden; visibility: hidden;
} }
#app .cursor-crosshair,
#portal .cursor-crosshair {
cursor: crosshair;
}
#app .cursor-text,
#portal .cursor-text {
cursor: text;
}
#app .cursor-move,
#portal .cursor-move {
cursor: move;
}
#app .cursor-grab,
#portal .cursor-grab {
cursor: grab;
}
#app .cursor-grabbing,
#portal .cursor-grabbing {
cursor: grabbing;
}
#app .cursor-not-allowed,
#portal .cursor-not-allowed {
cursor: not-allowed;
}
#app .cursor-all-scroll,
#portal .cursor-all-scroll {
cursor: all-scroll;
}
#app .cursor-ew-resize,
#portal .cursor-ew-resize {
cursor: ew-resize;
}
#app .cursor-ns-resize,
#portal .cursor-ns-resize {
cursor: ns-resize;
}
#app .cursor-pointer,
#portal .cursor-pointer {
cursor: pointer;
}
#app .virtual-space::after, #app .virtual-space::after,
#portal .virtual-space::after { #portal .virtual-space::after {
content: "​"; content: "​";
...@@ -9705,6 +9745,7 @@ input[type=range]:-moz-focusring { ...@@ -9705,6 +9745,7 @@ input[type=range]:-moz-focusring {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
width: 200px; width: 200px;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__log-in { .login-modal-form__log-in {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
...@@ -9714,6 +9755,7 @@ input[type=range]:-moz-focusring { ...@@ -9714,6 +9755,7 @@ input[type=range]:-moz-focusring {
margin-right: auto; margin-right: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__form { .login-modal-form__form {
margin: 0 auto; margin: 0 auto;
...@@ -9725,6 +9767,60 @@ input[type=range]:-moz-focusring { ...@@ -9725,6 +9767,60 @@ input[type=range]:-moz-focusring {
text-align: center; text-align: center;
} }
.forgot-password-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.forgot-password-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.forgot-password-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.forgot-password-form__subtitle {
padding-top: calc(2 * 0.75rem);
padding-left: calc(2* 1.25rem);
padding-right: calc(2* 1.25rem);
padding-bottom: 0.75rem;
text-align: center;
font-size: 24px;
}
.forgot-password-form__submit {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
font-weight: bold;
}
.forgot-password-form__form {
margin: 0 auto;
width: 520px;
}
.forgot-password-form__error {
margin-bottom: 24px;
color: #dc3545;
text-align: center;
}
.forgot-password-form__success {
margin-bottom: 24px;
color: #28a745;
text-align: center;
}
.maintree { .maintree {
position: relative; position: relative;
animation: 15ms fade-in; animation: 15ms fade-in;
......
...@@ -8755,6 +8755,46 @@ a:focus { ...@@ -8755,6 +8755,46 @@ a:focus {
#portal .hidden { #portal .hidden {
visibility: hidden; visibility: hidden;
} }
#app .cursor-crosshair,
#portal .cursor-crosshair {
cursor: crosshair;
}
#app .cursor-text,
#portal .cursor-text {
cursor: text;
}
#app .cursor-move,
#portal .cursor-move {
cursor: move;
}
#app .cursor-grab,
#portal .cursor-grab {
cursor: grab;
}
#app .cursor-grabbing,
#portal .cursor-grabbing {
cursor: grabbing;
}
#app .cursor-not-allowed,
#portal .cursor-not-allowed {
cursor: not-allowed;
}
#app .cursor-all-scroll,
#portal .cursor-all-scroll {
cursor: all-scroll;
}
#app .cursor-ew-resize,
#portal .cursor-ew-resize {
cursor: ew-resize;
}
#app .cursor-ns-resize,
#portal .cursor-ns-resize {
cursor: ns-resize;
}
#app .cursor-pointer,
#portal .cursor-pointer {
cursor: pointer;
}
#app .virtual-space::after, #app .virtual-space::after,
#portal .virtual-space::after { #portal .virtual-space::after {
content: "​"; content: "​";
...@@ -9466,6 +9506,7 @@ input[type=range]:-moz-focusring { ...@@ -9466,6 +9506,7 @@ input[type=range]:-moz-focusring {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
width: 200px; width: 200px;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__log-in { .login-modal-form__log-in {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
...@@ -9475,6 +9516,7 @@ input[type=range]:-moz-focusring { ...@@ -9475,6 +9516,7 @@ input[type=range]:-moz-focusring {
margin-right: auto; margin-right: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__form { .login-modal-form__form {
margin: 0 auto; margin: 0 auto;
...@@ -9486,6 +9528,61 @@ input[type=range]:-moz-focusring { ...@@ -9486,6 +9528,61 @@ input[type=range]:-moz-focusring {
text-align: center; text-align: center;
} }
.forgot-password-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.forgot-password-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.forgot-password-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.forgot-password-form__subtitle {
padding-top: calc(2 * 0.75rem);
padding-left: calc(2* 1.25rem);
padding-right: calc(2* 1.25rem);
padding-bottom: 0.75rem;
text-align: center;
font-family: "Oswald";
font-size: 24px;
}
.forgot-password-form__submit {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
font-weight: bold;
}
.forgot-password-form__form {
margin: 0 auto;
width: 520px;
}
.forgot-password-form__error {
margin-bottom: 24px;
color: #cc330d;
text-align: center;
}
.forgot-password-form__success {
margin-bottom: 24px;
color: #3e4d59;
text-align: center;
}
.maintree { .maintree {
position: relative; position: relative;
animation: 15ms fade-in; animation: 15ms fade-in;
......
...@@ -9003,6 +9003,46 @@ a:focus { ...@@ -9003,6 +9003,46 @@ a:focus {
#portal .hidden { #portal .hidden {
visibility: hidden; visibility: hidden;
} }
#app .cursor-crosshair,
#portal .cursor-crosshair {
cursor: crosshair;
}
#app .cursor-text,
#portal .cursor-text {
cursor: text;
}
#app .cursor-move,
#portal .cursor-move {
cursor: move;
}
#app .cursor-grab,
#portal .cursor-grab {
cursor: grab;
}
#app .cursor-grabbing,
#portal .cursor-grabbing {
cursor: grabbing;
}
#app .cursor-not-allowed,
#portal .cursor-not-allowed {
cursor: not-allowed;
}
#app .cursor-all-scroll,
#portal .cursor-all-scroll {
cursor: all-scroll;
}
#app .cursor-ew-resize,
#portal .cursor-ew-resize {
cursor: ew-resize;
}
#app .cursor-ns-resize,
#portal .cursor-ns-resize {
cursor: ns-resize;
}
#app .cursor-pointer,
#portal .cursor-pointer {
cursor: pointer;
}
#app .virtual-space::after, #app .virtual-space::after,
#portal .virtual-space::after { #portal .virtual-space::after {
content: "​"; content: "​";
...@@ -9714,6 +9754,7 @@ input[type=range]:-moz-focusring { ...@@ -9714,6 +9754,7 @@ input[type=range]:-moz-focusring {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
width: 200px; width: 200px;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__log-in { .login-modal-form__log-in {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
...@@ -9723,6 +9764,7 @@ input[type=range]:-moz-focusring { ...@@ -9723,6 +9764,7 @@ input[type=range]:-moz-focusring {
margin-right: auto; margin-right: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__form { .login-modal-form__form {
margin: 0 auto; margin: 0 auto;
...@@ -9734,6 +9776,61 @@ input[type=range]:-moz-focusring { ...@@ -9734,6 +9776,61 @@ input[type=range]:-moz-focusring {
text-align: center; text-align: center;
} }
.forgot-password-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.forgot-password-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.forgot-password-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.forgot-password-form__subtitle {
padding-top: calc(2 * 0.75rem);
padding-left: calc(2* 1.25rem);
padding-right: calc(2* 1.25rem);
padding-bottom: 0.75rem;
text-align: center;
font-family: "Crete Round";
font-size: 24px;
}
.forgot-password-form__submit {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
font-weight: bold;
}
.forgot-password-form__form {
margin: 0 auto;
width: 520px;
}
.forgot-password-form__error {
margin-bottom: 24px;
color: #FF4057;
text-align: center;
}
.forgot-password-form__success {
margin-bottom: 24px;
color: #0074E4;
text-align: center;
}
.maintree { .maintree {
position: relative; position: relative;
animation: 15ms fade-in; animation: 15ms fade-in;
......
...@@ -9004,6 +9004,46 @@ a:focus { ...@@ -9004,6 +9004,46 @@ a:focus {
#portal .hidden { #portal .hidden {
visibility: hidden; visibility: hidden;
} }
#app .cursor-crosshair,
#portal .cursor-crosshair {
cursor: crosshair;
}
#app .cursor-text,
#portal .cursor-text {
cursor: text;
}
#app .cursor-move,
#portal .cursor-move {
cursor: move;
}
#app .cursor-grab,
#portal .cursor-grab {
cursor: grab;
}
#app .cursor-grabbing,
#portal .cursor-grabbing {
cursor: grabbing;
}
#app .cursor-not-allowed,
#portal .cursor-not-allowed {
cursor: not-allowed;
}
#app .cursor-all-scroll,
#portal .cursor-all-scroll {
cursor: all-scroll;
}
#app .cursor-ew-resize,
#portal .cursor-ew-resize {
cursor: ew-resize;
}
#app .cursor-ns-resize,
#portal .cursor-ns-resize {
cursor: ns-resize;
}
#app .cursor-pointer,
#portal .cursor-pointer {
cursor: pointer;
}
#app .virtual-space::after, #app .virtual-space::after,
#portal .virtual-space::after { #portal .virtual-space::after {
content: "​"; content: "​";
...@@ -9715,6 +9755,7 @@ input[type=range]:-moz-focusring { ...@@ -9715,6 +9755,7 @@ input[type=range]:-moz-focusring {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
width: 200px; width: 200px;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__log-in { .login-modal-form__log-in {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
...@@ -9724,6 +9765,7 @@ input[type=range]:-moz-focusring { ...@@ -9724,6 +9765,7 @@ input[type=range]:-moz-focusring {
margin-right: auto; margin-right: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: bold;
} }
.login-modal-form__form { .login-modal-form__form {
margin: 0 auto; margin: 0 auto;
...@@ -9735,6 +9777,61 @@ input[type=range]:-moz-focusring { ...@@ -9735,6 +9777,61 @@ input[type=range]:-moz-focusring {
text-align: center; text-align: center;
} }
.forgot-password-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.forgot-password-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.forgot-password-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.forgot-password-form__subtitle {
padding-top: calc(2 * 0.75rem);
padding-left: calc(2* 1.25rem);
padding-right: calc(2* 1.25rem);
padding-bottom: 0.75rem;
text-align: center;
font-family: "Open Sans";
font-size: 24px;
}
.forgot-password-form__submit {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
font-weight: bold;
}
.forgot-password-form__form {
margin: 0 auto;
width: 520px;
}
.forgot-password-form__error {
margin-bottom: 24px;
color: #434343;
text-align: center;
}
.forgot-password-form__success {
margin-bottom: 24px;
color: #333333;
text-align: center;
}
.maintree { .maintree {
position: relative; position: relative;
animation: 15ms fade-in; animation: 15ms fade-in;
......
...@@ -27,8 +27,8 @@ import Effect.Aff (Milliseconds(..), delay, launchAff_) ...@@ -27,8 +27,8 @@ import Effect.Aff (Milliseconds(..), delay, launchAff_)
import Effect.Class (liftEffect) import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), Position(..), TooltipPosition(..), Variant(..)) import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), Position(..), TooltipPosition(..), Variant(..))
import Gargantext.Components.Login.ForgotPassword (forgotPassword) import Gargantext.Components.Login.PasswordForm as PasswordForm
import Gargantext.Components.Login.Form as Form import Gargantext.Components.Login.LoginForm as LoginForm
import Gargantext.Components.Login.Types (FormType(..)) import Gargantext.Components.Login.Types (FormType(..))
import Gargantext.Components.NgramsTable.Loader as NTL import Gargantext.Components.NgramsTable.Loader as NTL
import Gargantext.Ends (Backend(..)) import Gargantext.Ends (Backend(..))
...@@ -105,16 +105,16 @@ loginContainerCpt = here.component "container" cpt where ...@@ -105,16 +105,16 @@ loginContainerCpt = here.component "container" cpt where
Just backend -> case formType' of Just backend -> case formType' of
Login -> Login ->
Form.component LoginForm.component
{ backend { backend
, formType , formType
, sessions , sessions
, visible , visible
} }
ForgotPassword -> ForgotPassword ->
forgotPassword PasswordForm.component
{ backend { backend
, sessions , formType
} }
Manager -> Manager ->
chooser $ chooser $
...@@ -151,7 +151,7 @@ chooserCpt = here.component "chooser" cpt where ...@@ -151,7 +151,7 @@ chooserCpt = here.component "chooser" cpt where
<> <>
[ [
H.h6 H.h6
{} { className: "mt-4" }
[ H.text "Existing places" ] [ H.text "Existing places" ]
, ,
B.tooltipContainer B.tooltipContainer
......
module Gargantext.Components.Login.ForgotPassword where
import Gargantext.Prelude
import DOM.Simple.Event as DE
import Data.Either (Either(..))
import Effect (Effect)
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Formula as F
import Gargantext.Ends (Backend)
import Gargantext.Sessions (Sessions, postForgotPasswordRequest)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Reactix.SyntheticEvent as E
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.Login.ForgotPassword"
type Email = String
type Props =
( backend :: Backend
, sessions :: T.Box Sessions )
forgotPassword :: R2.Leaf Props
forgotPassword = R2.leaf forgotPasswordCpt
forgotPasswordCpt :: R.Component Props
forgotPasswordCpt = here.component "forgotPassword" cpt where
cpt { backend, sessions } _ = do
email <- T.useBox ""
message <- T.useBox ""
disabled <- T.useBox false
pure $ H.div { className: "row" }
[ H.form { className: "text-center col-md-12" }
[ H.h4 {} [ H.text "Forgot password" ]
, messageDisplay { message }
, H.div { className: "form-group" }
[ emailInput { email, disabled} ]
, submitButton { backend, email, sessions, message, disabled }
]
]
emailInput :: R2.Leaf (email :: T.Box Email, disabled :: T.Box Boolean)
emailInput = R2.leaf emailInputCpt
emailInputCpt :: R.Component (email :: T.Box Email, disabled :: T.Box Boolean)
emailInputCpt = here.component "emailInput" cpt where
cpt { email, disabled } _ = do
disabled' <- T.useLive T.unequal disabled
pure $ F.bindInput { value: email
, type: "email"
, className: "form-control"
, id: "id_email"
, placeholder: "email"
, name: "email"
, maxLength: "254"
, disabled: disabled' }
type SubmitButtonProps =
( email :: T.Box Email
, message :: T.Box String
, disabled :: T.Box Boolean
| Props )
submitButton :: R2.Leaf SubmitButtonProps
submitButton = R2.leafComponent submitButtonCpt
submitButtonCpt :: R.Component SubmitButtonProps
submitButtonCpt = here.component "submitButton" cpt where
cpt { backend, email, sessions, message, disabled} _ = do
email' <- T.useLive T.unequal email
disabled' <- T.useLive T.unequal disabled
pure $ H.div {className: "form-group text-center"}
[ H.button { className: "btn btn-primary"
, disabled: disabled'
, on: { click: click email' }}
[ H.text "Submit" ]
]
where
click :: Email -> R.SyntheticEvent DE.MouseEvent -> Effect Unit
click email' e = do
liftEffect $ T.write_ true disabled
E.preventDefault e
here.log2 "email" email'
here.log2 "backend" backend
here.log2 "sessions" sessions
launchAff_ $ do
res <- postForgotPasswordRequest backend email'
liftEffect $ here.log2 "res" res
liftEffect $ case res of
Left s -> do
T.write_ false disabled
T.write_ s message
Right _ -> T.write_ "Request sent!" message
messageDisplay :: R2.Leaf (message :: T.Box String)
messageDisplay = R2.leafComponent messageDisplayCpt
messageDisplayCpt :: R.Component (message :: T.Box String)
messageDisplayCpt = here.component "messageDisplay" cpt where
cpt {message} _ = do
message' <- T.useLive T.unequal message
pure $ H.p {} [H.text message']
module Gargantext.Components.Login.Form module Gargantext.Components.Login.LoginForm
( component ( component
) where ) where
...@@ -62,6 +62,7 @@ componentCpt = here.component "main" cpt where ...@@ -62,6 +62,7 @@ componentCpt = here.component "main" cpt where
, bindStateKey , bindStateKey
, stateBox , stateBox
} <- useStateRecord (defaultData :: FormData) } <- useStateRecord (defaultData :: FormData)
fv <- useFormValidation fv <- useFormValidation
-- | Behaviors -- | Behaviors
...@@ -249,12 +250,13 @@ componentCpt = here.component "main" cpt where ...@@ -249,12 +250,13 @@ componentCpt = here.component "main" cpt where
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group__label" [ "form-group__label"
, "px-2" , "px-1"
] ]
} }
[ [
H.label H.label
{ on: { click: onAgreedLabelClick } { on: { click: onAgreedLabelClick }
, className: "cursor-pointer"
} }
[ [
H.text "I hereby accept the " H.text "I hereby accept the "
...@@ -288,75 +290,22 @@ componentCpt = here.component "main" cpt where ...@@ -288,75 +290,22 @@ componentCpt = here.component "main" cpt where
{ name: "sign-in" } { name: "sign-in" }
, ,
B.wad_ B.wad_
[ "d-inline-block", "virtual-space", "w-1", "cursor-pointer" ] [ "d-inline-block", "virtual-space", "w-1" ]
, ,
H.text "Log in" H.text "Log in"
] ]
] ]
] ]
-- R2.row
-- [
-- H.form
-- { className: "col-md-12" }
-- [
-- H.h4
-- { className: "text-center" }
-- [ H.text $ "Login to garg://" <> show backend ]
-- ,
-- H.div
-- { className: "text-center" }
-- [
-- H.a
-- { href: "https://iscpif.fr/apply-for-a-services-account/"
-- , target: "_blank"
-- }
-- [ H.text "request access" ]
-- ]
-- ,
-- H.div
-- { className: "form-group form-check text-center" }
-- [
-- F.bindCheckbox
-- { checked: cursors.agreed
-- , className: "form-check-input"
-- }
-- ,
-- H.label
-- { className: "form-check-label" }
-- [
-- H.text "I hereby accept the "
-- ,
-- H.a
-- { target: "_blank"
-- , href: "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
-- }
-- [ H.text "terms of use" ]
-- ]
-- ]
-- H.div
-- {}
-- [
-- H.a
-- { on: { click: \_ -> T.write_ ForgotPassword formType
-- }
-- }
-- [ H.text "Forgot password?" ]
-- ]
-- ]
-- ]
type FormData = type FormData =
{ error :: String { username :: String
, username :: String
, password :: String , password :: String
, agreed :: Boolean , agreed :: Boolean
} }
defaultData :: FormData defaultData :: FormData
defaultData = defaultData =
{ error : "" { username : ""
, username : ""
, password : "" , password : ""
, agreed : false , agreed : false
} }
...@@ -367,7 +316,7 @@ formValidation r = foldl append mempty rules ...@@ -367,7 +316,7 @@ formValidation r = foldl append mempty rules
rules = rules =
[ FV.nonEmpty "username" r.username [ FV.nonEmpty "username" r.username
, FV.nonEmpty "password" r.password , FV.nonEmpty "password" r.password
, FV.equals "agreed" false r.agreed , FV.equals "agreed" true r.agreed
] ]
----------------------------------------------- -----------------------------------------------
......
module Gargantext.Components.Login.PasswordForm
( component
) where
import Gargantext.Prelude
import Data.Either (Either(..))
import Data.Foldable (foldl, intercalate)
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Elevation(..), Sizing(..), Variant(..))
import Gargantext.Components.Login.Types (FormType(..))
import Gargantext.Ends (Backend)
import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
import Gargantext.Hooks.FormValidation.Unboxed as FV
import Gargantext.Hooks.StateRecord (useStateRecord)
import Gargantext.Sessions (postForgotPasswordRequest)
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Record as Record
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.Login.ForgotPassword"
type Props =
( backend :: Backend
, formType :: T.Box FormType
)
component :: R2.Leaf Props
component = R2.leaf componentCpt
componentCpt :: R.Component Props
componentCpt = here.component "main" cpt where
cpt { backend
, formType
} _ = do
-- | States
-- |
error' /\ error
<- R2.useBox' (Nothing :: Maybe String)
success' /\ success
<- R2.useBox' (Nothing :: Maybe String)
onPending' /\ onPending
<- R2.useBox' false
-- | Hooks
-- |
{ state
, bindStateKey
} <- useStateRecord (defaultData :: FormData)
fv <- useFormValidation
-- | Behaviors
-- |
let
onReturnClick :: Unit -> Effect Unit
onReturnClick _ = T.write_ (Login) formType
onSubmit :: Unit -> Effect Unit
onSubmit _ = do
result <- fv.try (\_ -> formValidation state)
case result of
Left err -> here.log3 "validation error" state err
Right _ -> do
T.write_ true onPending
launchAff_
$ sendEmail backend state
>>= case _ of
Left err -> liftEffect
$ here.warn3 "request error" state err
*> T.write_ (Just err) error
*> T.write_ false onPending
Right _ -> liftEffect
$ T.write_ (Just "Request sent!") success
-- | Render
-- |
pure $
H.div
{ className: "forgot-password-form" }
[
H.div
{ className: "forgot-password-form__title" }
[
B.iconButton
{ name: "arrow-left"
, className: "forgot-password-form__title__return"
, elevation: Level2
, callback: onReturnClick
}
,
H.span
{ className: "forgot-password-form__title__text" }
[
H.text $ "garg://" <> show backend
]
]
,
B.div'
{ className: "forgot-password-form__subtitle" }
"Password forgotten"
,
H.form
{ className: "forgot-password-form__form" }
[
-- Username
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "email") ?
"form-group--error" $
mempty
]
}
[
H.div { className: "form-group__label" }
[
H.label {} [ H.text "Email" ]
]
,
H.div { className: "form-group__field" }
[
B.formInput $
{ size: LargeSize
} `Record.merge` bindStateKey "email"
,
R2.when (fv.hasError' "email") $
B.div'
{ className: "form-group__error" }
"Invalid email format"
]
]
,
-- Error
R2.fromMaybe error' $
B.div'
{ className: "forgot-password-form__error" }
,
-- Suvvess
R2.fromMaybe success' $
B.div'
{ className: "forgot-password-form__success" }
,
-- Submit
B.button
{ callback: onSubmit
, status: onPending' ? Disabled $ Enabled
, variant: ButtonVariant Primary
, type: "submit"
, className: "forgot-password-form__submit"
}
[ H.text "Submit" ]
]
]
type FormData =
{ email :: String
}
defaultData :: FormData
defaultData =
{ email: ""
}
formValidation :: FormData -> Effect VForm
formValidation r = foldl append mempty rules
where
rules =
[ FV.email "email" r.email
]
-------------------------------------------------------
sendEmail ::
Backend
-> FormData
-> Aff (Either String { status :: String })
sendEmail backend { email } = postForgotPasswordRequest backend email
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
padding: $btn-padding-y-lg $btn-padding-x-lg padding: $btn-padding-y-lg $btn-padding-x-lg
width: $cta-width width: $cta-width
display: block display: block
font-weight: bold
&__log-in &__log-in
padding: $btn-padding-y-lg $btn-padding-x-lg padding: $btn-padding-y-lg $btn-padding-x-lg
...@@ -68,6 +69,7 @@ ...@@ -68,6 +69,7 @@
margin-right: auto margin-right: auto
margin-top: $card-spacer-y margin-top: $card-spacer-y
display: block display: block
font-weight: bold
&__form &__form
margin: 0 auto margin: 0 auto
...@@ -77,3 +79,63 @@ ...@@ -77,3 +79,63 @@
margin-bottom: $form-group-margin-bottom margin-bottom: $form-group-margin-bottom
color: $danger color: $danger
text-align: center text-align: center
//////////////////////////////////////////////////////////
.forgot-password-form
$cta-width: 200px
$form-width: 520px
&__title
position: relative
background-color: $border-color
padding: $card-spacer-y $card-spacer-x
text-align: center
// (?) dirty negative margins to overlap the ".modal-body" paddings
margin-top: - $modal-inner-padding
margin-left: - $modal-inner-padding
margin-right: - $modal-inner-padding
&__return
@include centered
position: absolute
left: space-x(3.5)
&__text
font-family: $font-family-monospace
font-size: 20px
font-weight: bold
&__subtitle
padding-top: calc(2 * #{ $card-spacer-y})
padding-left: calc(2* #{ $card-spacer-x })
padding-right: calc(2* #{ $card-spacer-x })
padding-bottom: $card-spacer-y
text-align: center
font-family: $headings-font-family
font-size: 24px
&__submit
padding: $btn-padding-y-lg $btn-padding-x-lg
width: $cta-width
margin-bottom: calc(2 * #{ $card-spacer-y})
margin-left: auto
margin-right: auto
margin-top: $card-spacer-y
display: block
font-weight: bold
&__form
margin: 0 auto
width: $form-width
&__error
margin-bottom: $form-group-margin-bottom
color: $danger
text-align: center
&__success
margin-bottom: $form-group-margin-bottom
color: $success
text-align: center
...@@ -328,6 +328,23 @@ ...@@ -328,6 +328,23 @@
.visible { visibility: visible; } .visible { visibility: visible; }
.hidden { visibility: hidden; } .hidden { visibility: hidden; }
/// Cursor
$cursors:
crosshair,
text,
move,
grab,
grabbing,
not-allowed,
all-scroll,
ew-resize,
ns-resize,
pointer;
@each $value in $cursors {
.cursor-#{$value} { cursor: $value; }
}
/// Content helpers /// Content helpers
.virtual-space { .virtual-space {
&::after { &::after {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment