Commit 9c8ffc1b authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: update sign in form

parent 3824d46f
Pipeline #182796 passed with stage
in 5 minutes and 34 seconds
......@@ -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
......
......@@ -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
......
......@@ -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',
......
......@@ -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-12 py-16 my-12 space-y-6 bg-white rounded-md shadow-md">
<Title>Sign in</Title>
<div className="relative max-w-1.5xl px-16 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">
......
......@@ -81,6 +81,7 @@ module.exports = {
'65ch': '65ch',
'80ch': '80ch',
64: px(192),
'1.5xl': '40rem',
},
minWidth: {
64: px(192),
......
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