Designer Homework

components.ssl-config.js

import Ember from 'ember';

export default Ember.Component.extend({
  sslEnabled: false
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.error {
  background-color:red;
}

.pending {
  background-color:yellow;
}

templates.application.hbs

<!-- EXAMPLE OF HOW TO LOAD EXTERNAL CSS -->
<!-- Remove HTML comments -->
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-->

<h1>Cablecast Graphic Designer Homework</h1>
<p>Hi! Below you will find the same UI component in several different states. The component is used to configure SSL (Secure Socket Layer) for our Cablecast product. The user can configure their system's domain name and optionally enable SSL. Given the configuration and sucess of background tasks the form below could be in one of several different states</p>

<p>
Your job is to evaluate the design for booth astetic pleasntness as well as fuctionality. The goal is to make it look nice as well as easy to use. At a minimum critque the design and provide actionable direction to improve it. Feel free to include any mockups, wireframes, sketches etc.
</p>

<p>
Addititonally, as time allows modify the app.css file in the left to implement your design.
</p>

<hr/>

<h2>Empty State</h2>
{{ssl-config}}

<hr/>

<h2>Pending State</h2>
{{ssl-config
  domain="www.example.com"
  sslEnabled=true
  state='pending'
 }}
 
 <hr />
 
 <h2>Error State</h2>
{{ssl-config
  domain="www.example.com"
  sslEnabled=true
  state='error'
 }}

templates.components.ssl-config.hbs

{{#if (eq state 'pending')}}
<div class="pending">
  Verifying domain name.
</div>
{{/if}}

{{#if (eq state 'error')}}
<div class="error">
  Failed to verify domain name.
</div>
{{/if}}

<div class="ssl-config-form-group">
	<label>Domain Name</label>
	<input type=text value={{domain}}/>
</div>

<div class="ssl-config-form-group">
	<label>Enable SSL</label>
	<input type=checkbox checked={{sslEnabled}}/>
</div>

{{#if sslEnabled}}
  <div class="ssl-config-form-group">
    <label>Certificate Managment</label>
		<select>
    	<option>Let's Encrypt</option>
      <option>Manual</option>
    </select>
  </div>
{{/if}}

<div class="ssl-config-form-group">
  <button>Cancel</button>
  <button>Save</button>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-truth-helpers": "2.0.0"
  }
}