Skip to content

P
purescript-gargantext
Commit 313c616d authored by arturo's avatar arturo
Browse files
Options

>>> continue

parent c4060538
Expand all Show whitespace changes
Inline Side-by-side
Showing with 837 additions and 269 deletions
dist/styles/bootstrap-darkster.css
View file @ 313c616d
......@@ -9699,6 +9699,71 @@ input[type=range]:-moz-focusring {
gap: 28px;
}
.login-modal-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.login-modal-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.login-modal-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.login-modal-form__separator {
padding: 0.75rem calc(2* 1.25rem);
position: relative;
}
.login-modal-form__separator__text {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: inline-block;
padding-left: 32px;
padding-right: 32px;
font-family: "Comfortaa";
font-size: 24px;
background-color: #fff;
}
.login-modal-form__request-access {
margin-top: calc(3 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
width: 200px;
display: block;
}
.login-modal-form__log-in {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
}
.login-modal-form__form {
margin: 0 auto;
width: 520px;
}
.login-modal-form__error {
margin-bottom: 24px;
color: #FF304F;
text-align: center;
}
.maintree {
position: relative;
animation: 15ms fade-in;
......
dist/styles/bootstrap-default.css
View file @ 313c616d
......@@ -9648,6 +9648,70 @@ input[type=range]:-moz-focusring {
gap: 28px;
}
.login-modal-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.login-modal-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.login-modal-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.login-modal-form__separator {
padding: 0.75rem calc(2* 1.25rem);
position: relative;
}
.login-modal-form__separator__text {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: inline-block;
padding-left: 32px;
padding-right: 32px;
font-size: 24px;
background-color: #fff;
}
.login-modal-form__request-access {
margin-top: calc(3 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
width: 200px;
display: block;
}
.login-modal-form__log-in {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
}
.login-modal-form__form {
margin: 0 auto;
width: 520px;
}
.login-modal-form__error {
margin-bottom: 24px;
color: #dc3545;
text-align: center;
}
.maintree {
position: relative;
animation: 15ms fade-in;
......
dist/styles/bootstrap-greyson.css
View file @ 313c616d
......@@ -9408,6 +9408,71 @@ input[type=range]:-moz-focusring {
gap: 28px;
}
.login-modal-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.login-modal-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.login-modal-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.login-modal-form__separator {
padding: 0.75rem calc(2* 1.25rem);
position: relative;
}
.login-modal-form__separator__text {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: inline-block;
padding-left: 32px;
padding-right: 32px;
font-family: "Oswald";
font-size: 24px;
background-color: #fff;
}
.login-modal-form__request-access {
margin-top: calc(3 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
width: 200px;
display: block;
}
.login-modal-form__log-in {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
}
.login-modal-form__form {
margin: 0 auto;
width: 520px;
}
.login-modal-form__error {
margin-bottom: 24px;
color: #cc330d;
text-align: center;
}
.maintree {
position: relative;
animation: 15ms fade-in;
......
dist/styles/bootstrap-herbie.css
View file @ 313c616d
......@@ -9656,6 +9656,71 @@ input[type=range]:-moz-focusring {
gap: 28px;
}
.login-modal-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.login-modal-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.login-modal-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.login-modal-form__separator {
padding: 0.75rem calc(2* 1.25rem);
position: relative;
}
.login-modal-form__separator__text {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: inline-block;
padding-left: 32px;
padding-right: 32px;
font-family: "Crete Round";
font-size: 24px;
background-color: #fff;
}
.login-modal-form__request-access {
margin-top: calc(3 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
width: 200px;
display: block;
}
.login-modal-form__log-in {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
}
.login-modal-form__form {
margin: 0 auto;
width: 520px;
}
.login-modal-form__error {
margin-bottom: 24px;
color: #FF4057;
text-align: center;
}
.maintree {
position: relative;
animation: 15ms fade-in;
......
dist/styles/bootstrap-monotony.css
View file @ 313c616d
......@@ -9657,6 +9657,71 @@ input[type=range]:-moz-focusring {
gap: 28px;
}
.login-modal-form__title {
position: relative;
background-color: #dee2e6;
padding: 0.75rem 1.25rem;
text-align: center;
margin-top: -1rem;
margin-left: -1rem;
margin-right: -1rem;
}
.login-modal-form__title__return {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 28px;
}
.login-modal-form__title__text {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
.login-modal-form__separator {
padding: 0.75rem calc(2* 1.25rem);
position: relative;
}
.login-modal-form__separator__text {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: inline-block;
padding-left: 32px;
padding-right: 32px;
font-family: "Open Sans";
font-size: 24px;
background-color: #fff;
}
.login-modal-form__request-access {
margin-top: calc(3 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
width: 200px;
display: block;
}
.login-modal-form__log-in {
padding: 0.5rem 1rem;
width: 200px;
margin-bottom: calc(2 * 0.75rem);
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
display: block;
}
.login-modal-form__form {
margin: 0 auto;
width: 520px;
}
.login-modal-form__error {
margin-bottom: 24px;
color: #434343;
text-align: center;
}
.maintree {
position: relative;
animation: 15ms fade-in;
......
src/Gargantext/Components/Forms.purs deleted 100644 → 0
View file @ c4060538
module Gargantext.Components.Forms where
import Record as Record
import Reactix as R
import Reactix.DOM.HTML as H
import Gargantext.Utils.Reactix as R2
clearfix :: R.Element
clearfix = H.div { className: "clearfix" } []
formGroup :: Array R.Element -> R.Element
formGroup = H.div { className: "form-group" }
center :: Array R.Element -> R.Element
center = H.div { className: "center" }
card :: Array R.Element -> R.Element
card = H.div { className: "card" }
cardBlock :: Array R.Element -> R.Element
cardBlock = H.div { className: "card-block" }
cardGroup :: Array R.Element -> R.Element
cardGroup = H.div { className: "card-group" }
src/Gargantext/Components/Login.purs
View file @ 313c616d
......@@ -17,7 +17,6 @@ module Gargantext.Components.Login
import Gargantext.Prelude
import DOM.Simple.Event as DE
import Data.Array (head)
import Data.Foldable (intercalate)
import Data.Maybe (Maybe(..), fromMaybe)
......@@ -27,9 +26,9 @@ import Effect (Effect)
import Effect.Aff (Milliseconds(..), delay, launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), Position(..), TooltipPosition(..))
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..), ModalSizing(..), Position(..), TooltipPosition(..), Variant(..))
import Gargantext.Components.Login.ForgotPassword (forgotPassword)
import Gargantext.Components.Login.Form (form)
import Gargantext.Components.Login.Form as Form
import Gargantext.Components.Login.Types (FormType(..))
import Gargantext.Components.NgramsTable.Loader as NTL
import Gargantext.Ends (Backend(..))
......@@ -40,7 +39,7 @@ import Gargantext.Utils (nbsp, (?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Reactix.SyntheticEvent as RE
import Record as Record
import Toestand as T
here :: R2.Here
......@@ -88,7 +87,7 @@ loginContainerCpt = here.component "container" cpt where
-- | States
-- |
mBackend <- R2.useLive' props.backend
formType <- T.useBox Login
formType <- T.useBox Manager
formType' <- T.useLive T.unequal formType
-- | Render
......@@ -99,10 +98,14 @@ loginContainerCpt = here.component "container" cpt where
[]
[
case mBackend of
Nothing -> chooser props
Nothing ->
chooser $
{ formType
} `Record.merge` props
Just backend -> case formType' of
Login ->
form
Form.component
{ backend
, formType
, sessions
......@@ -113,13 +116,27 @@ loginContainerCpt = here.component "container" cpt where
{ backend
, sessions
}
Manager ->
chooser $
{ formType
} `Record.merge` props
]
chooser :: R2.Leaf Props
type ChooserProps =
( formType :: T.Box FormType
| Props
)
chooser :: R2.Leaf ChooserProps
chooser = R2.leaf chooserCpt
chooserCpt :: R.Component Props
chooserCpt :: R.Component ChooserProps
chooserCpt = here.component "chooser" cpt where
cpt { backend, backends, sessions } _ = do
cpt { backend
, backends
, sessions
, formType
} _ = do
-- | States
-- |
sessions' <- T.useLive T.unequal sessions
......@@ -135,15 +152,22 @@ chooserCpt = here.component "chooser" cpt where
[
H.h6
{}
[
H.text "Existing places"
,
H.text $ nbsp 1
[ H.text "Existing places" ]
,
B.span'
{ className: "font-weight-normal" }
"(click to login)"
]
B.tooltipContainer
{ position: TooltipPosition Top
, variant: Info
, tooltipSlot:
B.span_ "Available soon"
, defaultSlot:
B.formInput
{ status: Idled
, placeholder: "Search for your institute"
, value: (mempty :: String)
, callback: const R.nothing
, className: "mb-1"
}
}
,
H.table
{ className : "table" }
......@@ -160,16 +184,16 @@ chooserCpt = here.component "chooser" cpt where
]
,
H.tbody
{}
(map (renderBackend backend) backends)
]
,
H.input
{ className: "form-control"
, type:"text"
, placeholder: "Search for your institute"
{} $
backends <#>
renderBackend <<<
{ backendBox: backend
, formTypeBox: formType
, backend: _
}
]
]
-- Shown in the chooser
activeConnections :: T.Box Sessions -> Sessions -> Array R.Element
......@@ -298,9 +322,32 @@ renderSessionCpt = here.component "renderSession" cpt where
]
]
type RenderBackendProps =
( backendBox :: T.Box (Maybe Backend)
, formTypeBox :: T.Box FormType
, backend :: Backend
)
renderBackend :: R2.Leaf RenderBackendProps
renderBackend = R2.leaf renderBackendCpt
renderBackendCpt :: R.Component RenderBackendProps
renderBackendCpt = here.component "renderBackend" cpt where
cpt { backendBox
, backend: backend@(Backend { name, baseUrl, backendType })
, formTypeBox
} _ = do
-- | Behaviors
-- |
let
click :: Unit -> Effect Unit
click _ = do
T.write_ (Just backend) backendBox
T.write_ (Login) formTypeBox
-- | Render
-- |
pure $
renderBackend :: forall b. T.Write b (Maybe Backend) => b -> Backend -> R.Element
renderBackend cursor backend@(Backend {name, baseUrl, backendType}) =
H.tr {}
[
H.td
......@@ -338,12 +385,8 @@ renderBackend cursor backend@(Backend {name, baseUrl, backendType}) =
]
]
]
where
click :: RE.SyntheticEvent DE.Event -> Effect Unit
click e = do
RE.preventDefault e
T.write_ (Just backend) cursor
backendLabel :: String -> String
backendLabel =
......
src/Gargantext/Components/Login/ForgotPassword.purs
View file @ 313c616d
......@@ -8,7 +8,6 @@ import Effect (Effect)
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Formula as F
import Gargantext.Components.Forms (formGroup)
import Gargantext.Ends (Backend)
import Gargantext.Sessions (Sessions, postForgotPasswordRequest)
import Gargantext.Utils.Reactix as R2
......@@ -39,7 +38,7 @@ forgotPasswordCpt = here.component "forgotPassword" cpt where
[ H.form { className: "text-center col-md-12" }
[ H.h4 {} [ H.text "Forgot password" ]
, messageDisplay { message }
, formGroup
, H.div { className: "form-group" }
[ emailInput { email, disabled} ]
, submitButton { backend, email, sessions, message, disabled }
]
......
src/Gargantext/Components/Login/Form.purs
View file @ 313c616d
This diff is collapsed.
src/Gargantext/Components/Login/Types.purs
View file @ 313c616d
......@@ -55,6 +55,6 @@ instance Eq AuthData where
_AuthData :: Iso' AuthData { token :: Token, tree_id :: TreeId, user_id :: UserId }
_AuthData = iso (\(AuthData v) -> v) AuthData
data FormType = Login | ForgotPassword
data FormType = Login | ForgotPassword | Manager
derive instance Generic FormType _
derive instance Eq FormType
src/Gargantext/Hooks/FormValidation/Boxed.purs
View file @ 313c616d
......@@ -61,6 +61,17 @@ instance maximumString :: Maximum String where
| (length input) > max -> pure $ invalid [ field /\ "maximum" ]
| otherwise -> pure $ pure unit
-- Regarding Boolean field value
instance equalsBoolean :: Equals Boolean where
equals field box box' = do
input <- T.read box
input' <- T.read box'
case unit of
_
| (not eq input input') -> pure $ invalid [ field /\ "equals" ]
| otherwise -> pure $ pure unit
uppercase :: Field -> T.Box String -> Effect VForm
uppercase field = T.read >=> case _ of
input
......
src/Gargantext/Hooks/FormValidation/Unboxed.purs
View file @ 313c616d
......@@ -52,6 +52,13 @@ instance maximumString :: Maximum String where
| (length input) > max = pure $ invalid [ field /\ "maximum" ]
| otherwise = pure $ pure unit
-- Regarding Boolean field value
instance equalsBoolean :: Equals Boolean where
equals field input input'
| (not eq input input') = pure $ invalid [ field /\ "equals" ]
| otherwise = pure $ pure unit
uppercase :: Field -> String -> Effect VForm
uppercase field input
| (toLower input) == input = pure $ invalid [ field /\ "uppercase" ]
......
src/sass/_legacy/_login.sass
View file @ 313c616d
......@@ -9,3 +9,71 @@
&__actions
display: flex
gap: space-x(3.5)
//////////////////////////////////:
.login-modal-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
&__separator
padding: $card-spacer-y calc(2* #{ $card-spacer-x })
position: relative
&__text
@include centered
position: absolute
display: inline-block
padding-left: space-x(4)
padding-right: space-x(4)
font-family: $headings-font-family
font-size: 24px
background-color: $modal-content-bg
&__request-access
margin-top: calc(3 * #{ $card-spacer-y})
margin-left: auto
margin-right: auto
margin-bottom: $card-spacer-y
padding: $btn-padding-y-lg $btn-padding-x-lg
width: $cta-width
display: block
&__log-in
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
&__form
margin: 0 auto
width: $form-width
&__error
margin-bottom: $form-group-margin-bottom
color: $danger
text-align: center
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