import InputLayout from '@common/components/input-layout';
import PageHeader from '@common/components/page-header';
import RemoteSelect from '@common/components/remote-select';
import navigationService from '@common/navigation/NavigationService';
import { NavigationOperationType } from '@common/navigation/NavigationTypes';
import toastManager from '@common/toast/ToastManager';
import { TextField, Form, Col, Container, Row, Button } from '@protolibrary/components';
import { email, required } from '@protoweb/utils';
import roleService from '@services/RoleService';
import userService, { User } from '@services/UserService';
import { useLocationParams } from '@utils/LocationUtils';
import React, { useEffect, useState } from 'react';
import PasswordInput from '@common/components/password-input';

const UserCreateUpdate = props => {
  const { operationType, id } = useLocationParams(props);
  const [data, setData] = useState<User>(null);
  const refForm = React.useRef(null);

  const handleOnSubmit = () => {
    const values = refForm.current.getValues();

    if (operationType === NavigationOperationType.CREATE) {
      const request: User = {
        userName: values.userName,
        firstName: values.firstName,
        lastName: values.lastName,
        roleIds: values.roleIds,
        email: values.email,
      };

      userService.post(request, { password: values.password }).then(res => {
        toastManager.show('success', 'Kullanıcı basariyla olusturuldu');
        navigationService.push('/system-management/user-management');
      });
    } else if (operationType === NavigationOperationType.UPDATE) {
      const request: User = {
        id: data?.id,
        userName: data?.userName,
        firstName: values.firstName,
        lastName: values.lastName,
        email: values.email,
        roleIds: values.roleIds,
      };
      userService.put(request).then(res => {
        toastManager.show('success', 'Kullanıcı başarıyla guncellendi');
        navigationService.push('/system-management/user-management');
      });
    }
  };

  useEffect(() => {
    operationType === NavigationOperationType.UPDATE &&
      userService.get(id).then(res => {
        setData(res);
        refForm.current.setValues(res);
      });
  }, []);

  return (
    <Container fluid>
      <Form ref={refForm} onSubmit={handleOnSubmit}>
        <PageHeader
          backButton
          title={
            operationType === NavigationOperationType.CREATE
              ? 'Kullanıcı Olustur'
              : 'Kullanıcı Güncelle'
          }
        >
          <Button type="submit" text="Kaydet" className="proto-button-secondary" />
        </PageHeader>
        {operationType === NavigationOperationType.CREATE ? (
          <Row>
            <Col xs={12} md={12} lg={4} xl={4}>
              <InputLayout label="Kullanıcı Adı">
                <TextField name="userName" validations={[required('')]} />
              </InputLayout>
            </Col>
            <Col xs={12} md={12} lg={4} xl={4}>
              <InputLayout label="Parola">
                <PasswordInput name="password" validations={[required('')]} />
              </InputLayout>
            </Col>
          </Row>
        ) : null}
        <Row>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Ad">
              <TextField name="firstName" validations={[required('')]} />
            </InputLayout>
          </Col>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Soyad">
              <TextField name="lastName" validations={[required('')]} />
            </InputLayout>
          </Col>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Email">
              <TextField name="email" validations={[required(''), email('')]} />
            </InputLayout>
          </Col>
        </Row>
        <Row>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Yetkili Roller">
              <RemoteSelect
                placeholder="Seciniz"
                name="roleIds"
                mode="multi"
                validations={[required('')]}
                service={roleService.getList}
              />
            </InputLayout>
          </Col>
        </Row>
      </Form>
    </Container>
  );
};

export default UserCreateUpdate;
import React from 'react';
import BasePropTypes from '@common/models/BasePropTypes';
import { Block, BackgroundImage, Label } from '@protolibrary/components';

import COLORS from '@resources/colors';
interface LoginPropTypes extends BasePropTypes {
  fromCaptcha: boolean;
}

const WelcomePage: React.FC<LoginPropTypes> = () => {
  return (
    <BackgroundImage
      path="/public/images/login_background.jpg"
      className=""
      style={{
        backgroundSize: 'cover',
        justifyContent: 'space-between',
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
      }}
    >
      <Block style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Block style={{ padding: 75 }}>
          <Block style={{ flexDirection: 'row' }}>
            <Label
              style={{
                element: {
                  fontSize: 32,
                  fontWeight: 400,
                  color: COLORS.BLACK,
                  fontFamily: 'Poppins',
                },
              }}
              text="Proto"
            />
            <Label
              style={{
                container: {
                  paddingLeft: 10,
                },
                element: {
                  fontSize: 32,
                  fontWeight: 600,
                  color: COLORS.BLACK,
                  fontFamily: 'Poppins',
                },
              }}
              text="Yazilim"
            />
          </Block>
          <Label
            text="UYGULAMASINA HOŞGELDİNİZ"
            style={{
              container: {
                display: 'flex',
                justifyContent: 'center',
              },
              element: {
                fontSize: 30,
                fontWeight: 275,
                color: COLORS.BLACK,
                fontFamily: 'Poppins',
              },
            }}
          />
        </Block>
      </Block>
    </BackgroundImage>
  );
};

export default WelcomePage;
import React from 'react';
import { Button, Col, Container, Form, Row } from '@protolibrary/components';
import PageHeader from '@common/components/page-header';
import InputLayout from '@common/components/input-layout';
import PasswordInput from '@common/components/password-input';
import { required } from '@protoweb/utils';
import userService from '@services/UserService';
import toastManager from '@common/toast/ToastManager';
import { useLocationParams } from '@utils/LocationUtils';
import navigationService from '@common/navigation/NavigationService';

const ResetPassword = props => {
  const { id, userName, fullName } = useLocationParams(props);
  const refForm = React.useRef(null);

  const handleOnSubmit = () => {
    const values = refForm.current.getValues();
    userService.resetPassword(id, { newPassword: values.newPassword }).then(_ => {
      toastManager.show('success', 'Şifre başarıyla sıfırlandı.');
      navigationService.push('/system-management/user-management');
    });
  };

  return (
    <Container fluid>
      <Form ref={refForm} onSubmit={handleOnSubmit}>
        <PageHeader title={`${fullName} (${userName}) Kullanıcı Şifresi Sıfırla`}>
          <Button type="submit" text="Kaydet" className="proto-button-secondary" />
        </PageHeader>
        <Row>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Yeni Şifre">
              <PasswordInput
                name="newPassword"
                placeholder="Yeni Şifre"
                validations={[required('')]}
              />
            </InputLayout>
          </Col>
        </Row>
      </Form>
    </Container>
  );
};

export default ResetPassword;
import InputLayout from '@common/components/input-layout';
import PageHeader from '@common/components/page-header';
import toastManager from '@common/toast/ToastManager';
import { Form, Col, Container, Row, Button } from '@protolibrary/components';
import { required } from '@protoweb/utils';
import userService, { ChangePasswordData } from '@services/UserService';
import React from 'react';
import PasswordInput from '@common/components/password-input';

const ChangePassword = props => {
  const refForm = React.useRef(null);

  const handleOnSubmit = () => {
    const values = refForm.current.getValues();
    const request: ChangePasswordData = {
      oldPassword: values.oldPassword,
      newPassword: values.newPassword,
      newPasswordValidation: values.newPasswordValidation,
    };

    userService.changePassword(request).then(res => {
      toastManager.show('success', 'Şifre başarıyla değiştirildi.');
    });
  };

  return (
    <Container fluid>
      <Form ref={refForm} onSubmit={handleOnSubmit}>
        <PageHeader title="Şifre Değiştir">
          <Button type="submit" text="Kaydet" className="proto-button-secondary" />
        </PageHeader>
        <Row>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Eski Şifre">
              <PasswordInput
                name="oldPassword"
                placeholder="Eski Şifre"
                validations={[required('')]}
              />
            </InputLayout>
          </Col>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Yeni Şifre">
              <PasswordInput
                name="newPassword"
                placeholder="Yeni Şifre"
                validations={[required('')]}
              />
            </InputLayout>
          </Col>
          <Col xs={12} md={12} lg={4} xl={4}>
            <InputLayout label="Yeni Şifre Tekrar">
              <PasswordInput
                name="newPasswordValidation"
                placeholder="Yeni Şifre Tekrar"
                validations={[required('')]}
              />
            </InputLayout>
          </Col>
        </Row>
      </Form>
    </Container>
  );
};

export default ChangePassword;
import { Container } from '@protolibrary/components';
import React from 'react';
import Countdown from '../../components/countdown';

const DashBoard = () => {
  return (
    <Container style={{ backgroundColor: 'transparent' }}>
      <Container>
        <Countdown
          title="Under Construction"
          footerText="We will let you know when it is ready!"
          timeTillDate="2024-02-15 00:00:00"
        />
      </Container>
    </Container>
  );
};

export default DashBoard;
import React from 'react';
import BasePropTypes from '@common/models/BasePropTypes';
import {
  Block,
  Form,
  Icon,
  TextField,
  BackgroundImage,
  Label,
  Checkbox,
} from '@protolibrary/components';
import Button from '@protoweb/button';
import authService from '@services/AuthService';
import PasswordInput from '@common/components/password-input';
import COLORS from '@resources/colors';
import { LOGO } from '../../layout/assets/icons';
import useLocalization from '@hooks/useLocalization';

interface LoginPropTypes extends BasePropTypes {
  fromCaptcha: boolean;
}

const Login: React.FC<LoginPropTypes> = () => {
  const formRef = React.useRef<any>();
  const { t } = useLocalization();

  const handleOnSubmit = (_, formValues): void => {
    let values = { userName: formValues?.userName, password: formValues?.password };
    authService.login(values, formValues?.rememberMe);
  };

  const textfieldStyle = () => {
    return {
      container: {
        height: 60,
        position: 'relative',
        cursor: 'pointer',
      },
      element: {
        paddingLeft: 20,
        height: 60,
        cursor: 'pointer',
        borderRadius: 8,
        background: 'white',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: COLORS.GRAY,
        fontSize: 16,
      },
    };
  };

  return (
    <Block className="flex-row">
      <BackgroundImage
        path="/public/images/loginx1.jpg"
        className=""
        style={{
          backgroundSize: 'cover',
          justifyContent: 'space-between',
          display: 'flex',
          flex: 1,
          flexDirection: 'row',
        }}
      >
        <Block style={{ flex: 1, justifyContent: 'flex-end' }}></Block>
      </BackgroundImage>

      <Block className="login__container">
        <Block
          style={{
            justifyContent: 'space-between',
            padding: 30,
            paddingLeft: 66,
            paddingRight: 66,
            paddingTop: 200,
            display: 'flex',
            flex: 1,
            width: 500,
            margin: 'auto',
          }}
        >
          <Block>
            <Form onSubmit={handleOnSubmit} ref={formRef}>
              <Block
                className="flex flex-1 justify-content-center"
                style={{ width: 259, height: 89, marginBottom: 100, fontSize: 48, margin: 'auto' }}
              >
                <Icon
                  className="flex justify-content-center"
                  style={{
                    container: {
                      marginBottom: 39,
                      marginLeft: -30,
                      cursor: 'pointer',
                      width: 280,
                      height: 80,
                    },
                    element: { width: 150, height: 50, cursor: 'pointer' },
                  }}
                  icon={LOGO}
                />
              </Block>
              <Block style={{ marginBottom: 10 }}>
                <TextField
                  name="userName"
                  placeholder={t('login_form_username_placeholder')}
                  style={textfieldStyle()}
                />
              </Block>
              <Block style={{ marginBottom: 25 }}>
                <PasswordInput
                  className="login-password"
                  name="password"
                  placeholder={t('login_form_password_placeholder')}
                  style={textfieldStyle()}
                />
              </Block>
              <Block
                style={{
                  flexDirection: 'row',
                  display: 'flex',
                  alignItems: 'center',
                  marginBottom: 70,
                }}
              >
                <Checkbox name={'rememberMe'} />
                <Label
                  text={t('login_form_remember_me')}
                  style={{
                    element: {
                      lineHeight: '21px',
                      fontWeight: '400',
                      fontSize: 14,
                      color: '#444444',
                    },
                  }}
                />
              </Block>
              <Button
                text={t('login_form_submit')}
                type="submit"
                fullWidth
                style={{
                  element: {
                    background: COLORS.PRIMARY,
                    minHeight: 60,
                  },
                  container: {
                    border: '1px solid',
                    borderColor: COLORS.WHITE,
                  },
                  text: {
                    color: COLORS.WHITE,
                    fontSize: 20,
                    fontWeight: 600,
                    lineHeight: '28px',
                  },
                }}
              />
            </Form>
          </Block>
        </Block>
      </Block>
    </Block>
  );
};

export default Login;

