New Twiddle

adapters.user\.js

import Adapter from "@ember-data/adapter";
import { run } from "@ember/runloop";
import RSVP from "rsvp";
import $ from "jquery";

export default class User extends Adapter {
  createRecord(store, type, snapshot) {
    let data = this.serialize(snapshot, { includeId: true });

    return new RSVP.Promise(function (resolve, reject) {
      $.ajax({
        type: "POST",
        url: "https://api.raisely.com/v3/signup",
        dataType: "json",
        data: data
      }).then(
        function (data) {
          run(null, resolve, data);
        },
        function (jqXHR) {
          jqXHR.then = null; // tame jQuery's ill mannered promises
          run(null, reject, jqXHR);
        }
      );
    });
  }
  // queryRecord(store, type, query) {
  //   // return fetch('/api/current_user');
  // }

  // validate:
  // https://api.raisely.com/v3/check-user

  // post:
  // https://api.raisely.com/v3/signup
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

controllers.signup\.js

import Controller from "@ember/controller";
// import store from '@ember-data/store';


export default Controller.extend({
  // store: service(),
  userFirstName: "TestingFirst",
  userLastName: "TestingLast",
  userEmail: "[email protected]",
  userPassword: "chicken",

  actions: {
    createUser: function () {
      const firstName = this.get("userFirstName");
      const lastName = this.get("userLastName");
      const email = this.get("userEmail");
      const password = this.get("userPassword");

      const user = this.store.createRecord("user", {
        firstName: firstName,
        lastName: lastName,
        email: email,
        // obviously in a real app we wouldn't be sending the password as plain text
        password: password
      });

      user.save();
    }
  }
});

models.user\.js

// import Model from 'ember-data/model';
// /*
// import attr from 'ember-data/attr';
// import { belongsTo, hasMany } from 'ember-data/relationships';
// */

// export default class extends Model {
// }


import Model, { attr } from "@ember-data/model";

export default class UserModel extends Model {
  @attr campaignUuid;
  @attr data;
  @attr firstName;
  @attr lastName;
  @attr email;
  @attr password;
}

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("index", { path: "/" });
  this.route("signup");
});

export default Router;

routes.signup\.js

import Route from "@ember/routing/route";
import { inject as service } from '@ember/service';

export default class SignupRoute extends Route {
  @service store;
  model() {
    // console.log(this.store);
    // return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}

serializers.user\.js

import Serializer from "@ember-data/serializer";

export default Serializer.extend({
  // normalizeResponse (store, ModelClass, payload, id, requestType) {
  //   const partiallyNormalised = normalizeSinglePayload(payload);
  //   return this._super(store, ModelClass, partiallyNormalised, id, requestType);
  // },

  normalizeResponse(store, schema, rawPayload) {
    console.log(rawPayload);
    return rawPayload;
  },

  serialize(snapshot, options) {
    const serializedResource = {
      id: snapshot.id,
      type: snapshot.modelName,
      attributes: snapshot.attributes()
    };

    return serializedResource;
  }
});

// import EmberObject from '@ember/object';

// export default class ApplicationSerializer extends EmberObject {
//   normalizeResponse(store, schema, rawPayload) {
//     return rawPayload;
//   }

//   serialize(snapshot, options) {
//     const serializedResource = {
//       id: snapshot.id,
//       type: snapshot.modelName,
//       attributes: snapshot.attributes()
//     };

//     return serializedResource;
//   }
// }

styles.app\.css

@import "routes/signup.css";

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

styles.routes.signup\.css

.signup-panel {
  width: 50vw;
  max-width: 400px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

templates.application\.hbs

{{!-- Todo: actual header component --}}
<div class="header">
  <img
    src="https://raisely-images.imgix.net/raisely-website-2019/uploads/logo-p-pdark-small-png-d4ab65.png?fit=max&w=1000&auto=format&q=62"
    alt="" width="200px">
  {{link-to 'Sign Up' 'signup'}}
</div>


{{outlet}}

templates.signup\.hbs

<h1>Sign up</h1>
<form {{action 'createUser' on="submit"}} class="signup-panel">
  <label for="userFirstName">First Name</label>
  {{input type="text" value=userFirstName id="userFirstName" placeholder="First Name"}}
  <label for="userLastName">Last Name</label>
  {{input type="text" value=userLastName id="userLastName" placeholder="Last Name"}}
  <label for="userEmail">Email</label>
  {{input type="text" value=userEmail id="userEmail" placeholder="Email"}}
  <label for="userPassword">Password</label>
  {{input type="password" value=userPassword id="userPassword" placeholder="Password"}}
  <button type="submit">Sign up</button>
  <div class="subtext">Already have an account? Take me to <a href="#">log in</a></div>

</form>

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": false
  },
  "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"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0"
  }
}