ihk24/gfi-ihk-2024/stories/components/login/LoginComponent.js

import './login.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createInputText} from "../../atoms/input-text/InputTextComponent";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createFormElement} from "../form-element/FormElementComponent";

export const createLoginForm = ({

}) => {
  const form = createElement('form', ['login-form','variant-subtle-primary'])
  const fieldset = createElement('fieldset', [], null, form);
  const baseUrl = createElement('input', [], null, fieldset);
  const errorUrl = createElement('input', [], null, fieldset);
  const wrapper = createElement('div', ['login-wrapper'], null, fieldset);
  baseUrl.type = 'hidden';
  baseUrl.name = 'baseUrl';
  baseUrl.value = 'https://sqa-test.ihk24.ihk.de/login/';
  errorUrl.type = 'hidden';
  errorUrl.name = 'errorUrl';
  errorUrl.value = 'https://sqa-test.ihk24.ihk.de/login/';

  wrapper.appendChild(createFormElement({
    name: 'username',
    placeholder: 'Benutzername',
    label: 'Benutzername',
    wrapperClasses: 'login-name',
  }))

  wrapper.appendChild(createFormElement({
    name: 'passwort',
    placeholder: 'Passwort',
    label: 'Passwort',
    inputType: 'password',
    wrapperClasses: 'login-pwd',
  }))

  wrapper.appendChild(createFormElement({
    inputType: 'checkbox',
    name: 'login_agb',
    wrapperClasses: 'terms',
    label: 'Die <a href="#" title="Nutzungsbedingungen">Nutzungsbedingungen</a> erkenne ich an. Den <a href="#" title="Datenschutzhinweis">Datenschutzhinweis</a> habe ich zur Kenntnis genommen und akzeptiert.'
  }))
  /*

  const nameWrapper = createElement('div', ['login-name'], null, wrapper);
  const nameLabel = createElement('label', [], null, nameWrapper);
  nameWrapper.appendChild(createInputText({
    id: 'username',
    name: 'username',
    placeholder: 'Benutzername',
  }))

  const passwordWrapper = createElement('div', ['login-pwd'], null, wrapper);
  const passwordLabel = createElement('label', [], null, passwordWrapper);
  passwordLabel.for = 'passwort';
  passwordWrapper.appendChild(createInputText({
    type: 'password',
    id: 'passwort',
    name: 'passwort',
    placeholder: 'Passwort',
  }))

  */

  const buttonWrapper = createElement('div', ['btn-wrapper'], null, form);
  const submitBtn = createButton({
    elementType: 'button',
    iconPosition: 'icon-right',
    label: 'Einloggen',
    icon: 'login',
    color: 'secondary',
  });
  submitBtn.classList.add('submit');
  buttonWrapper.appendChild(submitBtn);

  return form;
}