Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SSHOC
sshoc-marketplace-frontend
Commits
9c8ffc1b
Commit
9c8ffc1b
authored
Mar 22, 2021
by
Stefan Probst
Browse files
fix: update sign in form
parent
3824d46f
Pipeline
#182796
passed with stage
in 5 minutes and 34 seconds
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/elements/TextArea/TextArea.tsx
View file @
9c8ffc1b
...
...
@@ -9,6 +9,8 @@ import { TextFieldBase } from '@/elements/TextFieldBase/TextFieldBase'
export
interface
TextAreaProps
extends
AriaTextFieldProps
{
/** @default "default" */
variant
?:
'
default
'
|
'
form
'
/** @default "md" */
size
?:
'
md
'
|
'
lg
'
necessityIndicator
?:
NecessityIndicator
validationMessage
?:
ReactNode
rows
?:
number
...
...
src/elements/TextField/TextField.tsx
View file @
9c8ffc1b
...
...
@@ -9,6 +9,8 @@ import { TextFieldBase } from '@/elements/TextFieldBase/TextFieldBase'
export
interface
TextFieldProps
extends
AriaTextFieldProps
{
/** @default "default" */
variant
?:
'
default
'
|
'
form
'
/** @default "md" */
size
?:
'
md
'
|
'
lg
'
necessityIndicator
?:
NecessityIndicator
validationMessage
?:
ReactNode
style
?:
CSSProperties
...
...
src/elements/TextFieldBase/TextFieldBase.tsx
View file @
9c8ffc1b
...
...
@@ -46,11 +46,15 @@ export function TextFieldBase(
const
validationState
=
props
.
validationState
const
isDisabled
=
props
.
isDisabled
===
true
const
size
=
props
.
size
??
'
md
'
const
variants
=
{
default
:
{
textField
:
{
default
:
'
text-base px-4 py-2 rounded placeholder-gray-350 border border-gray-300 focus:border-secondary-600 hover:bg-gray-75 hover:border-gray-350
'
,
default
:
cx
(
'
text-base rounded placeholder-gray-350 border border-gray-300 focus:border-secondary-600 hover:bg-gray-75 hover:border-gray-350
'
,
size
===
'
lg
'
?
'
px-4 py-4
'
:
'
px-4 py-2
'
,
),
states
:
{
enabled
:
'
text-gray-800
'
,
disabled
:
'
pointer-events-none bg-gray-100 text-gray-500
'
,
...
...
@@ -61,8 +65,10 @@ export function TextFieldBase(
},
form
:
{
textField
:
{
default
:
'
text-ui-base px-4 py-3 rounded bg-gray-75 border border-gray-300 placeholder-gray-350 focus:bg-highlight-75 focus:border-secondary-600 focus:placeholder-highlight-300 hover:border-secondary-600 hover:bg-white
'
,
default
:
cx
(
'
text-ui-base rounded bg-gray-75 border border-gray-300 placeholder-gray-350 focus:bg-highlight-75 focus:border-secondary-600 focus:placeholder-highlight-300 hover:border-secondary-600 hover:bg-white
'
,
size
===
'
lg
'
?
'
px-4 py-4
'
:
'
px-4 py-3
'
,
),
states
:
{
enabled
:
'
text-gray-800
'
,
disabled
:
'
pointer-events-none bg-gray-100 text-gray-500
'
,
...
...
src/screens/auth/SignInScreen.tsx
View file @
9c8ffc1b
...
...
@@ -13,10 +13,8 @@ import { FormTextField } from '@/modules/form/components/FormTextField/FormTextF
import
{
Form
}
from
'
@/modules/form/Form
'
import
ContentColumn
from
'
@/modules/layout/ContentColumn
'
import
GridLayout
from
'
@/modules/layout/GridLayout
'
import
HStack
from
'
@/modules/layout/HStack
'
import
VStack
from
'
@/modules/layout/VStack
'
import
Metadata
from
'
@/modules/metadata/Metadata
'
import
{
SubSectionTitle
}
from
'
@/modules/ui/typography/SubSectionTitle
'
import
{
Title
}
from
'
@/modules/ui/typography/Title
'
import
{
createUrlFromPath
}
from
'
@/utils/createUrlFromPath
'
import
{
getRedirectPath
}
from
'
@/utils/getRedirectPath
'
...
...
@@ -40,15 +38,23 @@ export default function SignInScreen(): JSX.Element {
quality
=
{
100
}
className
=
"object-contain object-right-bottom -z-10"
/>
<
div
className
=
"relative max-w-xl px-1
2
py-16 my-12 space-y-
6
bg-white rounded-md shadow-md"
>
<
Title
>
Sign in
</
Title
>
<
div
className
=
"relative max-w-
1.5
xl px-1
6
py-16 my-12 space-y-
8
bg-white rounded-md shadow-md"
>
<
Title
className
=
"font-bold"
>
Sign in
</
Title
>
<
hr
className
=
"border-gray-200"
/>
<
SignInForm
/>
<
HStack
className
=
"space-x-2"
>
<
SubSectionTitle
as
=
"h2"
>
Alternative sign in
</
SubSectionTitle
>
<
div
className
=
"flex-1 border-b border-gray-200"
/>
</
HStack
>
<
p
>
Sign in with EOSC using existing accounts such as
{
'
'
}
<
span
className
=
"font-bold"
>
Google
</
span
>
,
{
'
'
}
<
span
className
=
"font-bold"
>
Dariah
</
span
>
,
{
'
'
}
<
span
className
=
"font-bold"
>
eduTEAMS
</
span
>
and multiple academic
accounts.
</
p
>
<
EoscLoginLink
/>
<
div
className
=
"flex items-baseline space-x-4"
>
<
span
className
=
"text-xl font-bold"
>
or
</
span
>
<
span
className
=
"flex-1 border-b border-gray-200"
/>
</
div
>
<
p
>
Sign in with a local account.
</
p
>
<
SignInForm
/>
</
div
>
</
ContentColumn
>
</
GridLayout
>
...
...
@@ -124,13 +130,26 @@ function SignInForm() {
{
({
handleSubmit
,
pristine
,
submitting
,
invalid
})
=>
{
return
(
<
VStack
as
=
"form"
onSubmit
=
{
handleSubmit
}
className
=
"space-y-5"
>
<
FormTextField
name
=
"username"
label
=
"Username"
/>
<
FormTextField
name
=
"password"
label
=
"Password"
type
=
"password"
/>
<
div
className
=
"self-end py-2"
>
<
FormTextField
name
=
"username"
label
=
"Username"
isRequired
variant
=
"form"
size
=
"lg"
/>
<
FormTextField
name
=
"password"
label
=
"Password"
type
=
"password"
isRequired
variant
=
"form"
size
=
"lg"
/>
<
div
className
=
"self-end py-3"
>
<
Button
type
=
"submit"
isDisabled
=
{
pristine
||
invalid
||
submitting
}
className
=
"w-40 px-6 py-3 transition-colors duration-150 rounded
"
variant
=
"gradient
"
>
Sign in
</
Button
>
...
...
@@ -239,7 +258,7 @@ function EoscLoginLink() {
return
(
<
div
>
<
a
className
=
"flex items-center justify-between px-4 text-sm font-medium bg-gray-100 border border-gray-200 rounded text-primary-800 hover:bg-gray-200"
className
=
"flex items-center justify-between px-4 text-sm font-medium bg-gray-100 border border-gray-200 rounded
shadow
text-primary-800 hover:bg-gray-200"
href
=
{
url
}
>
<
span
className
=
"w-10"
>
...
...
tailwind.config.js
View file @
9c8ffc1b
...
...
@@ -81,6 +81,7 @@ module.exports = {
'
65ch
'
:
'
65ch
'
,
'
80ch
'
:
'
80ch
'
,
64
:
px
(
192
),
'
1.5xl
'
:
'
40rem
'
,
},
minWidth
:
{
64
:
px
(
192
),
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment