Video series completed.

build.sbt

@@ -25,7 +25,9 @@ lazy val server = (project in file("server")).settings(commonSettings).settings(
   dependsOn(sharedJvm)
 
 lazy val client = (project in file("client")).settings(commonSettings).settings(
-	name := "Play-Videos-Client",
+  name := "Play-Videos-Client",
+  addCompilerPlugin("org.scalamacros" % "paradise" % "2.1.1" cross CrossVersion.full),
+  scalacOptions += "-P:scalajs:sjsDefinedByDefault",
   scalaJSUseMainModuleInitializer := true,
   libraryDependencies ++= Seq(
     "org.scala-js" %%% "scalajs-dom" % "0.9.5",

client/src/main/scala/playscala/LoginComponent.scala

@@ -0,0 +1,76 @@
+package playscala
+
+import slinky.core.annotations.react
+import slinky.core.Component
+import slinky.core.facade.ReactElement
+import slinky.web.html._
+import org.scalajs.dom.document
+import org.scalajs.dom.html
+import models.UserData
+import models.ReadsAndWrites._
+
+@react class LoginComponent extends Component {
+  case class Props(doLogin: () => Unit)
+  case class State(loginName: String, loginPass: String, 
+    createName: String, createPass: String,
+    loginMessage: String, createMessage:String)
+
+  def initialState: State = State("", "", "", "", "", "")
+
+  implicit val ec = scala.concurrent.ExecutionContext.global
+
+  val csrfToken = document.getElementById("csrfToken").asInstanceOf[html.Input].value
+  val validateRoute = document.getElementById("validateRoute").asInstanceOf[html.Input].value
+  val createRoute = document.getElementById("createRoute").asInstanceOf[html.Input].value
+
+  def render(): ReactElement = div (
+    h2 ("Login:"),
+    br (),
+    "Username:",
+    input (`type` := "text", value := state.loginName, 
+      onChange := (e => setState(state.copy(loginName = e.target.value)))),
+    br (),
+    "Password:",
+    input (`type` := "password", value := state.loginPass, 
+      onChange := (e => setState(state.copy(loginPass = e.target.value)))),
+    br (),
+    button ("Login", onClick := (e => login())),
+    state.loginMessage,
+    br (),
+    h2 ("Create User:"),
+    br (),
+    "Username:",
+    input (`type` := "text", value := state.createName, 
+      onChange := (e => setState(state.copy(createName = e.target.value)))),
+    br (),
+    "Password:",
+    input (`type` := "password", value := state.createPass, 
+      onChange := (e => setState(state.copy(createPass = e.target.value)))),
+    br (),
+    button ("Login", onClick := (e => createUser())),
+    state.loginMessage,
+  )
+
+  def login(): Unit = {
+    FetchJson.fetchPost(validateRoute, csrfToken, UserData(state.loginName, state.loginPass), (bool: Boolean) => {
+      if(bool) {
+        props.doLogin()
+      } else {
+        setState(state.copy(loginMessage = "Login Failed"))
+      }
+    }, e => {
+      println("Fetch error: " + e)
+    })
+  }
+
+  def createUser(): Unit = {
+    FetchJson.fetchPost(createRoute, csrfToken, UserData(state.createName, state.createPass), (bool: Boolean) => {
+      if(bool) {
+        props.doLogin()
+      } else {
+        setState(state.copy(createMessage = "User Creation Failed"))
+      }
+    }, e => {
+      println("Fetch error: " + e)
+    })  }
+}

client/src/main/scala/playscala/ScalaJSExample.scala

@@ -3,6 +3,8 @@ package playscala
 import shared.SharedMessages
 import org.scalajs.dom
 import org.scalajs.dom.html
+import slinky.web.ReactDOM
+import slinky.web.html.h1
 
 object ScalaJSExample {
 
@@ -15,5 +17,12 @@ object ScalaJSExample {
     if (dom.document.getElementById("version6") != null) {
       Version6.init()
     }
+
+    if (dom.document.getElementById("version7") != null) {
+      ReactDOM.render(
+        Version7MainComponent(),
+        dom.document.getElementById("react-root")
+      )
+    }
   }
 }

client/src/main/scala/playscala/TaskListComponent.scala

@@ -0,0 +1,85 @@
+package playscala
+
+import slinky.core.annotations.react
+import slinky.core.Component
+import models.TaskItem
+import models.ReadsAndWrites._
+import slinky.core.facade.ReactElement
+import slinky.web.html._
+import org.scalajs.dom.document
+import org.scalajs.dom.html
+
+@react class TaskListComponent extends Component {
+  case class Props(doLogout: () => Unit)
+  case class State(tasks: Seq[TaskItem], newTask: String, taskMessage: String)
+
+  val csrfToken = document.getElementById("csrfToken").asInstanceOf[html.Input].value
+  val tasksRoute = document.getElementById("tasksRoute").asInstanceOf[html.Input].value
+  val deleteRoute = document.getElementById("deleteRoute").asInstanceOf[html.Input].value
+  val addRoute = document.getElementById("addRoute").asInstanceOf[html.Input].value
+  val logoutRoute = document.getElementById("logoutRoute").asInstanceOf[html.Input].value
+  implicit val ec = scala.concurrent.ExecutionContext.global
+
+  def initialState: State = State(Nil, "", "")
+
+  override def componentDidMount(): Unit = {
+    loadTasks()
+  }
+
+  def render(): ReactElement = div (
+    ul (
+      state.tasks.zipWithIndex.map { case (taskItem, i) => 
+        li (key := i.toString, taskItem.text, onClick := (e => deleteTask(taskItem.id)))
+      }
+    ),
+    br (),
+    input (`type` := "text", value := state.newTask, 
+      onChange := (e => setState(state.copy(newTask = e.target.value)))),
+    button ("Add Task", onClick := (e => addTask())),
+    br(),
+    button ("Logout", onClick := (e => logout())),
+    state.taskMessage
+  )
+
+  def loadTasks(): Unit = {
+    FetchJson.fetchGet(tasksRoute, (tasks: Seq[TaskItem]) => {
+      setState(state.copy(tasks = tasks))
+    }, e => {
+      println("Fetch error: " + e)
+    })
+  }
+
+  def addTask(): Unit = {
+    FetchJson.fetchPost(addRoute, csrfToken, state.newTask, (bool: Boolean) => {
+      if(bool) {
+        setState(state.copy(newTask = "", taskMessage = ""))
+        loadTasks()
+      } else {
+        setState(state.copy(taskMessage = "Failed to add."))
+      }
+    }, e => {
+      println("Fetch error: " + e)
+    })
+  }
+
+  def deleteTask(id: Int): Unit = {
+    FetchJson.fetchPost(deleteRoute, csrfToken, id, (bool: Boolean) => {
+      if(bool) {
+        setState(state.copy(taskMessage = ""))
+        loadTasks()
+      } else {
+        setState(state.copy(taskMessage = "Failed to delete."))
+      }
+    }, e => {
+      println("Fetch error: " + e)
+    })  
+  }
+
+  def logout(): Unit = {
+    FetchJson.fetchGet(logoutRoute, (bool: Boolean) => {
+      props.doLogout()
+    }, e => {
+      println("Fetch error: " + e)
+    })
+  }
+}

client/src/main/scala/playscala/Version7MainComponent.scala

@@ -0,0 +1,21 @@
+package playscala
+
+import slinky.core.annotations.react
+import slinky.core.Component
+import slinky.core.facade.ReactElement
+import slinky.web.html.div
+
+@react class Version7MainComponent extends Component {
+  type Props = Unit
+  case class State(loggedIn: Boolean)
+
+  def initialState: State = State(false)
+
+  def render(): ReactElement = {
+    if (state.loggedIn) {
+      TaskListComponent(() => setState(state.copy(loggedIn = false)))
+    } else {
+      LoginComponent(() => setState(state.copy(loggedIn = true)))
+    }
+  }
+}

server/app/controllers/TaskList7.scala

@@ -0,0 +1,16 @@
+package controllers
+
+import javax.inject._
+
+import play.api.mvc._
+import play.api.i18n._
+import models.TaskListInMemoryModel
+import play.api.libs.json._
+import models._
+
+@Singleton
+class TaskList7 @Inject() (cc: ControllerComponents) extends AbstractController(cc) {
+  def load = Action { implicit request =>
+    Ok(views.html.version7Main())
+  }
+}

server/app/views/version7Main.scala.html

@@ -0,0 +1,13 @@
+@()(implicit request: RequestHeader, flash: Flash)
+
+@main("Task List 7"){
+  <div id="react-root"></div>
+  <input type="hidden" id="version7" value="">
+  <input type="hidden" id="csrfToken" value="@helper.CSRF.getToken.value">
+	<input type="hidden" id="validateRoute" value="@routes.TaskList5.validate()">
+	<input type="hidden" id="tasksRoute" value="@routes.TaskList5.taskList()">
+	<input type="hidden" id="createRoute" value="@routes.TaskList5.createUser()">
+	<input type="hidden" id="deleteRoute" value="@routes.TaskList5.delete()">
+	<input type="hidden" id="addRoute" value="@routes.TaskList5.addTask()">
+  <input type="hidden" id="logoutRoute" value="@routes.TaskList5.logout()">
+}

server/conf/routes

@@ -60,6 +60,9 @@ GET  /logout5						controllers.TaskList5.logout
 #Routes for version 6
 GET   /load6            controllers.TaskList6.load
 
+#Routes for version 7
+GET   /load7            controllers.TaskList7.load
+
 
 # Prefix must match `play.assets.urlPrefix`
 GET        /assets/*file                 controllers.Assets.at(file)