-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
65 lines (61 loc) · 2.32 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import nimbleLogoWhite from 'assets/images/icons/nimble-logo-white.svg';
import ElevatedButton from 'components/ElevatedButton';
import TextInput from 'components/TextInput';
export const signInScreenTestIds = {
nimbleLogo: 'sign-in__nimble-logo',
signInForm: 'sign-in-form',
emailLabel: 'sign-in-form__email',
emailField: 'sign-in-form__input-email',
passwordLabel: 'sign-in-form__password',
passwordField: 'sign-in-form__input-password',
forgotButton: 'sign-in-form__forgot-button',
signInButton: 'sign-in-form__button',
};
const SignInScreen = (): JSX.Element => {
return (
<div className="sign-in bg-cover min-h-screen flex flex-col justify-center items-center bg-sign-in">
<img className="mx-auto" src={nimbleLogoWhite} alt="nimble logo" data-test-id={signInScreenTestIds.nimbleLogo} />
<div className="mt-6 mb-8 text-white opacity-60 text-regular tracking-survey-tight">Sign in to Nimble</div>
<form className="w-80" data-test-id={signInScreenTestIds.signInForm}>
<div className="mb-6">
<TextInput
label="Email"
labelDataTestId={signInScreenTestIds.emailLabel}
inputAttributes={{
id: 'form-sign-in-email',
required: true,
type: 'email',
'data-test-id': signInScreenTestIds.emailField,
}}
/>
</div>
<div className="mb-6 relative">
<span className="block w-full">
<TextInput
label="Password"
labelDataTestId={signInScreenTestIds.passwordLabel}
inputAttributes={{
id: 'form-sign-in-password',
required: true,
type: 'password',
'data-test-id': signInScreenTestIds.passwordField,
}}
className="pr-16"
/>
</span>
<button
className="text-white text-opacity-50 text-small tracking-survey-normal absolute right-3 bottom-4"
data-test-id={signInScreenTestIds.forgotButton}
>
Forgot?
</button>
</div>
<ElevatedButton isFullWidth type="submit" data-test-id={signInScreenTestIds.signInButton}>
Sign in
</ElevatedButton>
</form>
</div>
);
};
export default SignInScreen;