nfreear/my-indieauth-login.js.html

## my-indieauth-login.js.html
<!doctype html> <title> My-login test </title>

<style>
  body { font: 1.1rem/1.6 sans-serif; margin: auto; max-width: 32rem; }
  button, input { font: inherit; padding: .3rem; }
  button { display: block; X-padding: .3rem 1rem; width: 7rem; margin: 0 auto; }
  input { min-width: 14rem; }
  hr { border-top: 3px blue solid; margin: 1rem; }

  my-login { border: 1px solid #bbb; display: block; padding: 1rem; }
</style>


<h1> My-login test </h1>


<my-login>
  <form action="https://indielogin.com/auth" method="get">
    <label for="url">Web Address:</label>
    <input id="url" type="url" name="me" placeholder="yourdomain.com" data-X-pattern="https?://.+\..+" required />
    <p><button type="submit">Sign In</button></p>
    <input type="hidden" name="client_id" value="https://example.com/" />
    <input type="hidden" name="redirect_uri" value="https://example.com/redirect" />
    <input type="hidden" name="state" value="jwiusuerujs" />
  </form>
</my-login>


<script type="module">
  const { fetch, location, sessionStorage } = window;

  const KEY_STATE = 'my-login.state';
  const KEY_SUBMIT = 'my-login.submit';
  // const KEY_AUTH = 'my-login.auth';
  // const KEY_LOGOUT = 'my-login.logout';

  initializeLoginForm();
  // initializeLogoutForm();
  // processAuthRedirect();

  function initializeLoginForm () {
    const MY_LOGIN = document.querySelector('my-login');
    const FORM = MY_LOGIN.querySelector('form');
    const ELEMS = FORM.elements;

    const client_id = location.origin + '/';
    const redirect_uri = location.origin + location.pathname;

    const DATA = {
      time: new Date().toISOString(),
      client_id,
      redirect_uri,
      action: FORM.action,
      state: crypto.randomUUID(), // += parseInt(Math.random() * 1000000);
    }

    ELEMS.client_id.value = DATA.client_id;
    ELEMS.redirect_uri.value = DATA.redirect_uri;
    ELEMS.state.value = DATA.state;

    ELEMS.me.addEventListener('blur', ev => {
      const ELEM = ev.target;
      const VALUE = ev.target.value;

      if (VALUE && !VALUE.match(/^https?:/) && VALUE.match(/.+\..+/)) {
        ELEM.value = `https://${VALUE}`;
      }
      console.debug('my-login - Blur:', ELEM.value, ev);
    });

    FORM.addEventListener('submit', ev => {
      sessionStorage.setItem(KEY_STATE, DATA.state);
      sessionStorage.setItem(KEY_SUBMIT, JSON.stringify(DATA));

      console.debug('my-login - Submit:', DATA, ev, ev.target, ELEMS);
    });
  }
</script>


<pre>


NDF, 03-Oct-2022.

* https://indielogin.com/api

</pre>
	<!doctype html> <title> My-login test </title>

	<style>
	body { font: 1.1rem/1.6 sans-serif; margin: auto; max-width: 32rem; }
	button, input { font: inherit; padding: .3rem; }
	button { display: block; X-padding: .3rem 1rem; width: 7rem; margin: 0 auto; }
	input { min-width: 14rem; }
	hr { border-top: 3px blue solid; margin: 1rem; }

	my-login { border: 1px solid #bbb; display: block; padding: 1rem; }
	</style>


	<h1> My-login test </h1>


	<my-login>
	<form action="https://indielogin.com/auth" method="get">
	<label for="url">Web Address:</label>
	<input id="url" type="url" name="me" placeholder="yourdomain.com" data-X-pattern="https?://.+\..+" required />
	<p><button type="submit">Sign In</button></p>
	<input type="hidden" name="client_id" value="https://example.com/" />
	<input type="hidden" name="redirect_uri" value="https://example.com/redirect" />
	<input type="hidden" name="state" value="jwiusuerujs" />
	</form>
	</my-login>


	<script type="module">
	const { fetch, location, sessionStorage } = window;

	const KEY_STATE = 'my-login.state';
	const KEY_SUBMIT = 'my-login.submit';
	// const KEY_AUTH = 'my-login.auth';
	// const KEY_LOGOUT = 'my-login.logout';

	initializeLoginForm();
	// initializeLogoutForm();
	// processAuthRedirect();

	function initializeLoginForm () {
	const MY_LOGIN = document.querySelector('my-login');
	const FORM = MY_LOGIN.querySelector('form');
	const ELEMS = FORM.elements;

	const client_id = location.origin + '/';
	const redirect_uri = location.origin + location.pathname;

	const DATA = {
	time: new Date().toISOString(),
	client_id,
	redirect_uri,
	action: FORM.action,
	state: crypto.randomUUID(), // += parseInt(Math.random() * 1000000);
	}

	ELEMS.client_id.value = DATA.client_id;
	ELEMS.redirect_uri.value = DATA.redirect_uri;
	ELEMS.state.value = DATA.state;

	ELEMS.me.addEventListener('blur', ev => {
	const ELEM = ev.target;
	const VALUE = ev.target.value;

	if (VALUE && !VALUE.match(/^https?:/) && VALUE.match(/.+\..+/)) {
	ELEM.value = `https://${VALUE}`;
	}
	console.debug('my-login - Blur:', ELEM.value, ev);
	});

	FORM.addEventListener('submit', ev => {
	sessionStorage.setItem(KEY_STATE, DATA.state);
	sessionStorage.setItem(KEY_SUBMIT, JSON.stringify(DATA));

	console.debug('my-login - Submit:', DATA, ev, ev.target, ELEMS);
	});
	}
	</script>


	<pre>


	NDF, 03-Oct-2022.

	* https://indielogin.com/api

	</pre>