123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- import qrCode from '../../../img/icons8-telegram-app.svg'
- import { makeStyles, Button, TextField, MenuItem } from '@material-ui/core'
- import Checkbox from '@mui/material/Checkbox';
- import FormControlLabel from '@mui/material/FormControlLabel';
- import React from 'react';
- import { countries } from './countries'
- const useStyles = makeStyles({
- container: {
- display: 'flex',
- alignItems: 'center',
- alignContent:'center',
- flexDirection: 'column',
- width: 350,
- margin: '0 auto',
- paddingTop: 64,
- paddingBottom: 24,
- },
- picture: {
- marginBottom: 16,
- paddingLeft: 45
- },
- title: {
- textAlign: 'center',
- marginBottom: 16,
- },
- titleConfirm: {
- color: '#b4b4b4',
- fontWeight:400
- },
- buttonQR: {
- marginTop: 20,
- height: 50,
- color: '#5497f0'
- },
- buttonNext: {
- marginTop: 20,
- height: 50,
- color: '#f8f8f8',
- backgroundColor:'#1d74c5',
- },
- textField: {
- marginBottom:20
- },
- })
- interface IAuthorizationForm {
- handleIsQR: () => void,
- handleIsCheck:(e:React.ChangeEvent<HTMLInputElement>) => void
- handleSendCode: () => Promise<void>,
- number:string,
- setNumber: React.Dispatch<React.SetStateAction<string>>,
- country: string,
- setCountry: React.Dispatch<React.SetStateAction<string>>,
- isChecked: boolean,
- }
- interface ICountry {
- name: string,
- code: string
- }
- const Authorization = ({
- handleIsQR,
- handleIsCheck,
- handleSendCode,
- number,
- setNumber,
- country,
- setCountry,
- isChecked,
- }: IAuthorizationForm) => {
- const classes = useStyles()
- const isValidCredentials = () => {
- const numberLength = number.split(' ').join('').trim().length
- if (numberLength < 13 || numberLength > 13) return false
- if (!country || country === 'Country') return false
- if(number.slice(0,1) === '+') return true
- return true
- }
- const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
- const value = e.target.value
- const name = e.target.name
- switch (name) {
- case 'country':
- setCountry(value)
- const code = countries.find(el => el.name === value)?.code
- code&&setNumber(code)
- break;
- case 'number':
- setNumber(value)
- break;
- default:
- break;
- }
- }
- return (
- <div className={classes.container} >
- <img className={classes.picture} alt="QRCode" src={qrCode} width='270' height='270' />
- <h2 className={classes.title}>Telegram</h2>
- <h4 className={classes.title + ' ' + classes.titleConfirm}>
- Please confirm your country code and enter your phone number.
- </h4>
- <TextField
- id="country"
- name='country'
- label="Country"
- fullWidth
- variant='outlined'
- defaultValue=''
- select
- className={classes.textField}
- onChange={handleTextField}
- >
- {countries.map(({name}: ICountry) => (
- <MenuItem value={name} key={name}>
- {name}
- </MenuItem>
- ))}
- </TextField>
- <TextField
- id="number"
- name='number'
- label="Your phone number"
- value={number}
- fullWidth
- variant='outlined'
- onChange={handleTextField}
- />
- <FormControlLabel
- label="Keep me signed in"
- control={<Checkbox
- checked={isChecked}
- onChange={handleIsCheck}
- inputProps={{ 'aria-label': 'controlled' }}
- />}
- />
- {isValidCredentials() &&
- <Button
- onClick={handleSendCode}
- className={classes.buttonNext}
- color='primary'
- variant="contained"
- fullWidth>
- NEXT
- </Button>}
- <Button
- onClick={handleIsQR}
- className={classes.buttonQR}
- variant="text"
- color="default"
- fullWidth>
- LOG IN BY QR CODE
- </Button>
- </div>
- );
- };
- export default Authorization;
|