chat

1
import React, {useContext, useState} from 'react';
2
import {useHttp} from '../../hooks/http.hook';
3
import {AuthContext} from '../context/AuthContext';
4

5
import foto from './foto.jpg';
6

7
import './auth.css';
8
function Auth () {
9
    const auth = useContext(AuthContext);
10
    const {loading, request} = useHttp();
11
    const [form, setForm] = useState({
12
        num: 0, email: '', password: '', login: '', massage: '', cod: '', info: '', posit: '', tel: ''
13
    });
14
    const [img, setImg] = useState({img: foto});
15
    let ref = React.createRef();
16
    const previewFile = () => {
17
        var file = ref.current.files[0],
18
            reader = new FileReader();
19

20
        reader.onloadend = () => {
21
            setImg({img: reader.result})
22
        }
23

24
        if (file) {
25
            reader.readAsDataURL(file);
26
        } else {
27
            setImg({img: foto})
28
        }
29
    }
30

31
    const changeHandler = event => {
32
        setForm({ ...form, [event.target.name]: event.target.value })
33
    };
34

35
    const authDown = (press) => {
36
        setForm({  ...form, num: press })
37
    };
38

39
    const registerHandler = async () => {
40
        try {
41
            const data = await request('/api/signup', 'POST', {...form});
42
            setForm({ ...form, massage: data.message, num: 0})
43
        } catch (e) {
44
            setForm({ ...form, massage: e.message })
45
        }
46
    }
47

48
    const loginHandler = async () => {
49
        try {
50
          const data = await request('/api/login', 'POST', ({ email: form.email, password: form.password}));
51
          auth.login(data.token, data.id)
52
          setForm({ ...form, massage: data.message })
53
        } catch (e) {
54
            setForm({ ...form, massage: e.message })
55
        }
56
    }
57

58
    if (form.num === 0) {
59
        return (
60
            <div className="auth">
61
                <div className="authLogin">
62
                    <form>
63
                        <input  type="text"
64
                                className="inputLogin"
65
                                name="email"
66
                                placeholder="Email"
67
                                onChange={changeHandler}/>
68
                        <input  type="password"
69
                                className="inputPassword"
70
                                name="password"
71
                                placeholder="Password"
72
                                onChange={changeHandler}/>
73
                        <input  className="buttonLogin"
74
                                type="button"
75
                                value="Войти"
76
                                disabled={loading || form.email === '' || form.password === '' ? true : false}
77
                                onClick={loginHandler}/>
78
                    </form>
79
                    <h3 className="signup" onClick={() =>authDown(1)}> Зарегистрироваться. </h3>
80
                </div>
81
                <div className={form.massage === '' || form.massage === null || form.massage === undefined ? "hidden" : "massage"}>
82
                    <h2> {form.massage} </h2>
83
                </div>
84
            </div>
85
        )
86
    }else if(form.num === 1){
87
        return (
88
            <div className="auth">
89
                <div className="authSignup">
90
                    <form>
91
                        <div className="authPhoto">
92
                            <img src={img.img} alt="Image preview..."/>
93
                            <div className="file-upload">
94
                                <label>
95
                                    <input
96
                                        ref={ref}
97
                                        type="file"
98
                                        accept="image/*"
99
                                        onChange={previewFile}
100
                                        className="file"
101
                                    />
102
                                    <span>Загрузить</span>
103
                                </label>
104
                            </div>
105
                        </div>
106
                        <div>
107
                            <input  type="text"
108
                                    className="inputLogin"
109
                                    name="login"
110
                                    placeholder="Псевдоним"
111
                                    onChange={changeHandler}/>
112
                            <input  type="password"
113
                                    className="inputPassword"
114
                                    name="password"
115
                                    placeholder="Пароль"
116
                                    onChange={changeHandler}/>
117
                            <input  type="password"
118
                                    className="inputPassword"
119
                                    placeholder="Повторите пароль"/>
120
                            <input  type="text"
121
                                    className="inputPassword"
122
                                    name="cod"
123
                                    placeholder="Код регистрации"
124
                                    onChange={changeHandler}/>
125
                        </div>
126
                        <div>
127
                            <input  type="text"
128
                                    className="inputLogin"
129
                                    name="info"
130
                                    placeholder="Ф.И.О."
131
                                    onChange={changeHandler}/>
132
                            <input  type="text"
133
                                    className="inputPassword"
134
                                    name="email"
135
                                    placeholder="Почта"
136
                                    onChange={changeHandler}/>
137
                            <input  type="tel"
138
                                    className="inputPassword"
139
                                    name="tel"
140
                                    placeholder="Телефон"
141
                                    onChange={changeHandler}/>
142
                            <input  type="text"
143
                                    className="inputPassword"
144
                                    name="posit"
145
                                    placeholder="Должность"
146
                                    onChange={changeHandler}/>
147
                            <input  className="buttonLogin"
148
                                    type="button"
149
                                    value="Зарегистрироваться"
150
                                    disabled={loading || form.login === '' || form.password === '' || form.email === '' ? true : false}
151
                                    onClick={registerHandler}/>
152
                            <h3 className="signup" onClick={() =>authDown(0)}> Уже зарегистрированы? </h3>
153
                        </div>
154
                    </form>
155
                    <div className={form.massage === '' || form.massage === null || form.massage === undefined ? "hidden" : "massage"}>
156
                        <h2> {form.massage} </h2>
157
                    </div>
158
                </div>
159
            </div>
160
        )
161
    }
162

163
};
164

165
export default Auth;