Adding SignIn View

This commit is contained in:
Belén Curcio
2018-08-09 12:01:27 -03:00
parent 361aab7085
commit 52ab434740
9 changed files with 193 additions and 59 deletions
+54 -25
View File
@@ -16,37 +16,66 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
## Simple Form
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Flex>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth/>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField fullWidth/>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField/>
</FormField>
<FormField>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with error
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Flex>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth />
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField defaultValue="something.com" color="error" fullWidth/>
<ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField/>
</FormField>
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
</Flex>
</Playground>