IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web.Client: Confirm: removed reactstrap styles

Browse Source
This commit is contained in:
Daniil Senkiv 2019-09-06 16:18:43 +03:00
parent d4dabb09f2
commit 04fa45d595
1 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
web/ASC.Web.Client/src/components/pages/Confirm/index.js
View File

@ -2,12 +2,15 @@ import React, { useState, useCallback, useEffect } from 'react';
import { withRouter } from "react-router"; import { withRouter } from "react-router";
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import i18n from './i18n'; import i18n from './i18n';
import { Button, TextInput, PageLayout, Text, PasswordInput } from 'asc-web-components'; import { Button, TextInput, PageLayout, Text, PasswordInput, FieldContainer } from 'asc-web-components';
import { Container, Row, Col } from 'reactstrap';
import styled from 'styled-components'; import styled from 'styled-components';
import { welcomePageTitle } from './../../../helpers/customNames'; import { welcomePageTitle } from './../../../helpers/customNames';
const ConfirmContainer = styled(Container)` const ConfirmContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
.confirm-block-title { .confirm-block-title {
margin: 20px 0px; margin: 20px 0px;
} }
@ -15,8 +18,30 @@ const ConfirmContainer = styled(Container)`
.login-row { .login-row {
margin: 23px 0 0; margin: 23px 0 0;
} }
.input-container {
margin-left: 13%;
@media (max-width: 1500px) {
margin-left: 22%;
}
@media (max-width: 768px) {
margin-left: 5%;
}
input {
width: 400px;
}
}
.join-button {
align-self: baseline;
}
`; `;
const mdOptions = { size: 6, offset: 3 };
const passwordSettings = { const passwordSettings = {
minLength: 6, minLength: 6,
@ -100,23 +125,18 @@ const Confirm = (props) => {
return ( return (
<ConfirmContainer> <ConfirmContainer>
<Row className='confirm-block-title'> <Text.Body className='confirm-block-title' as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
<Col sm="12" md={mdOptions}>
<Text.Body as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
</Col>
</Row>
<Row className='login-row'> <div className='login-row'>
<Col sm="12" md={mdOptions}> <a href='/login'>
<a href='/login'> <img src="images/dark_general.png" alt="Logo" />
<img className='login-row' src="images/dark_general.png" alt="Logo" /> </a>
</a> <Text.Body as='p' fontSize={24} color='#116d9d'>{t('CustomWelcomePageTitle', { welcomePageTitle })}</Text.Body>
<Text.Body as='p' fontSize={24} color='#116d9d'>{t('CustomWelcomePageTitle', { welcomePageTitle })}</Text.Body> </div>
</Col>
</Row>
<Row className='login-row'> <div className='input-container login-row'>
<Col sm="12" md={mdOptions}>
<FieldContainer isVertical={true} className=''>
<TextInput <TextInput
id='name' id='name'
name='name' name='name'
@ -136,11 +156,11 @@ const Confirm = (props) => {
}} }}
onKeyDown={event => onKeyPress(event.target)} onKeyDown={event => onKeyPress(event.target)}
/> />
</Col>
</Row>
<Row className='login-row'> </FieldContainer>
<Col sm="12" md={mdOptions}>
<FieldContainer isVertical={true} className=''>
<TextInput <TextInput
id='surname' id='surname'
name='surname' name='surname'
@ -159,11 +179,10 @@ const Confirm = (props) => {
}} }}
onKeyDown={event => onKeyPress(event.target)} onKeyDown={event => onKeyPress(event.target)}
/> />
</Col>
</Row>
<Row className='login-row'> </FieldContainer>
<Col sm="12" md={mdOptions}>
<FieldContainer isVertical={true} className=''>
<TextInput <TextInput
type="email" type="email"
id='email' id='email'
@ -183,11 +202,10 @@ const Confirm = (props) => {
}} }}
onKeyDown={event => onKeyPress(event.target)} onKeyDown={event => onKeyPress(event.target)}
/> />
</Col>
</Row>
<Row className='login-row'> </FieldContainer>
<Col sm="12" md={mdOptions}>
<FieldContainer isVertical={true} className=''>
<PasswordInput <PasswordInput
inputName="password" inputName="password"
emailInputName="email" emailInputName="email"
@ -197,6 +215,7 @@ const Confirm = (props) => {
scale={true} scale={true}
tabIndex={4} tabIndex={4}
maxLength={30} maxLength={30}
inputWidth='400px'
hasError={!passwordValid} hasError={!passwordValid}
onChange={event => { onChange={event => {
setPassword(event.target.value); setPassword(event.target.value);
@ -216,11 +235,9 @@ const Confirm = (props) => {
passwordSettings={passwordSettings} passwordSettings={passwordSettings}
isDisabled={isLoading} isDisabled={isLoading}
/> />
</Col> </FieldContainer>
</Row>
<Row className='login-row'> <div className='login-row join-button'>
<Col sm="12" md={mdOptions}>
<Button <Button
primary primary
size='big' size='big'
@ -230,13 +247,14 @@ const Confirm = (props) => {
isLoading={isLoading} isLoading={isLoading}
onClick={onSubmit} onClick={onSubmit}
/> />
</Col> </div>
</Row>
</div>
{/* <Row className='login-row'> {/* <Row className='login-row'>
<Col sm="12" md={mdOptions}>
<Text.Body as='p' fontSize={14}>{t('LoginWithAccount')}</Text.Body> <Text.Body as='p' fontSize={14}>{t('LoginWithAccount')}</Text.Body>
</Col>
</Row> </Row>
*/} */}
</ConfirmContainer> </ConfirmContainer>