Why Ember Demo

components.ui-checkbox\.js

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';

export default class extends Component {
  elementId = null;

	constructor() {
    super(...arguments);
    
  	this.elementId = guidFor(this);
  }
}

components.ui-input\.js

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';

export default class extends Component {
  elementId = null;

	constructor() {
    super(...arguments);
    
  	this.elementId = guidFor(this);
  }
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('login-form-1');
  this.route('login-form-2', { path: '/' });
});

export default Router;

routes.login-form-1\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

routes.login-form-2\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

styles.app\.css

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

html, body, main {
  background: #f7fafc;
	font-family: 'Source Sans Pro', sans-serif;
}

.page-container {
	max-width: 448px;  
}

templates.application\.hbs

<div class="bg-white antialiased text-gray-900">
  <header class="border-b p-4">
    <h1 class="text-2xl font-semibold tracking-wide">Online Bookings</h1>
    <nav>
    	<LinkTo @route="login-form-1" class="text-indigo-700 mr-3">Example 1</LinkTo>
      <LinkTo @route="login-form-2" class="text-indigo-700 mr-3">Example 2</LinkTo>
    </nav>
  </header>
  <main class="py-4 flex flex-col justify-center">
    <div class="mt-6">
      {{outlet}}
    </div>
    <p class="mx-auto mt-8 text-sm">
    	Don't have an account? <a href="#" class="text-indigo-700">Sign up</a>
    </p>
  </main>
</div>

templates.components.ui-checkbox\.hbs

<div class="flex" ...attributes>
	<input type="checkbox" id={{this.elementId}} name={{this.elementId}} class="mr-2" checked={{@isChecked}} />
  <label for={{this.elementId}}>{{yield}}</label>
 </div>

templates.components.ui-input\.hbs

<div class="flex flex-col">
  <label for={{this.elementId}}>{{yield}}</label>
  <input
  	id={{this.elementId}}
    autocomplete={{@autocomplete}}
    name={{this.elementId}}
    required={{@isRequired}}
    class="border rounded px-4 py-2 mt-2"
 	/>
</div>

templates.login-form-1\.hbs

<section class="mx-auto shadow-lg rounded-sm w-full page-container p-10 bg-white">
	<h2 class="text-xl">Sign in to your account</h2>
  
  <form method="POST" class="mt-4">
  	<div class="flex flex-col">
    	<label for="email">Email</label>
      <input id="email" autocomplete="username email" name="email" required class="border rounded px-4 py-2 mt-2" />
    </div>
    
    <div class="flex flex-col mt-8">
    	<div class="flex justify-between">
      	<label for="password">Password</label>
      	<a href="" class="text-indigo-700">Forgot your password?</a>
      </div>
      <input id="password" autocomplete="current-password" name="password" type="password" class="border rounded px-4 py-2 mt-2" />
    </div>
    
    <div class="flex mt-8">
    	<input type="checkbox" id="remember_me" name="remember-me" class="mr-2" />
  		<label for="remember_me">Stay signed in for a week</label>
    </div>
    
    <div class="mt-8">
    	<button class="bg-indigo-700 text-white font-semibold w-full py-3 rounded">Continue</button>
    </div>
    
    <div class="mt-8">
    	<a class="text-indigo-700 text-center block" href="">Use single sign-on (SSO) instead</a>
    </div>
  </form>
</section>

templates.login-form-2\.hbs

<section class="mx-auto shadow-lg rounded-sm w-full page-container p-10 bg-white">
	<h2 class="text-xl">Sign in to your account</h2>
  
  <form method="POST" class="mt-4">
    <UiInput @autocomplete="username email" @isRequired={{true}} @type="text">
    	Email
    </UiInput>
    
    <div class="flex flex-col mt-8">
    	<div class="flex justify-between">
      	<label for="password">Password</label>
      	<a href="" class="text-indigo-700">Forgot your password?</a>
      </div>
      <input id="password" autocomplete="current-password" name="password" type="password" class="border rounded px-4 py-2 mt-2" />
    </div>
    
    <UiCheckbox @isChecked={{true}} class="mt-8">
    	Stay signed in for a week
    </UiCheckbox>
    
    <div class="mt-8">
    	<button class="bg-indigo-700 text-white font-semibold w-full py-3 rounded">Continue</button>
    </div>
    
    <div class="mt-8">
    	<a class="text-indigo-700 text-center block" href="">Use single sign-on (SSO) instead</a>
    </div>
  </form>
</section>

tests.integration.components.ui-input-test\.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Component: UI Input', function(hooks) {
  setupRenderingTest(hooks);

  test('Input can be set to input type password', async function(assert) {
    await render(hbs`<UiInput @type="password">Password</UiInput>`);

    assert.dom('input').exists();
  });
});

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1",
    "tailwindcss": "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}