439 lines
20 KiB
JavaScript
Vendored
439 lines
20 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import moment from "moment"
|
|
import DatePicker from "../custom/mithril-datepicker"
|
|
import {} from "../../css/custom/mithril-datepicker.css"
|
|
import { Card, TextField, RadioButton, RadioGroup, RaisedButton, List, ListTile, Menu, Dialog } from "polythene-mithril"
|
|
// import { User } from "../models/User"
|
|
|
|
const head = {
|
|
view: function() {
|
|
return [
|
|
m(".header-nav", {
|
|
style: {
|
|
color: "#fff",
|
|
cursor: "pointer"
|
|
},
|
|
onclick: function() {
|
|
m.route.set("")
|
|
}
|
|
}, m("i.fa.fa-home.fa-lg")),
|
|
m(".header-img", {
|
|
style: {
|
|
backgroundImage: "url('img/head1.jpg')"
|
|
}
|
|
})
|
|
]
|
|
}
|
|
}
|
|
|
|
export const login = {
|
|
isValid: {},
|
|
view: function() {
|
|
return [
|
|
m(head),
|
|
m(".header-title", {
|
|
style: {
|
|
display: "table"
|
|
}
|
|
}, m("div", {
|
|
style: {
|
|
display: "table-cell",
|
|
verticalAlign: "middle"
|
|
}
|
|
}, m(".flex", [
|
|
m(".constant"),
|
|
m(Card, {
|
|
className: "front-card",
|
|
style: {
|
|
width: "initial"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: "Masuk",
|
|
subtitle: "Masuk dengan kode konfirmasi yang telah diterima"
|
|
}
|
|
},
|
|
{
|
|
text: {
|
|
content: [
|
|
m(TextField, {
|
|
label: "Kode",
|
|
required: true,
|
|
floatingLabel: true,
|
|
tight: true,
|
|
validate: function(value) {
|
|
if (/^[A-Z0-9]+$/.test(value) == false || value.length != 6) {
|
|
login.isValid.code = false
|
|
return {
|
|
valid: false,
|
|
error: "Kode tidak valid"
|
|
}
|
|
} else {
|
|
login.isValid.code = true
|
|
}
|
|
},
|
|
validateOnInput: true
|
|
})
|
|
]
|
|
}
|
|
},
|
|
{
|
|
actions: {
|
|
content: m(RaisedButton, {
|
|
label: "Masuk",
|
|
events: {
|
|
onclick: function() {
|
|
login.isValid.code == true ?
|
|
m.route.set("")
|
|
: null
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
]
|
|
}),
|
|
m(".constant")
|
|
])))
|
|
]
|
|
}
|
|
}
|
|
|
|
export const register = {
|
|
showMenu: false,
|
|
oninit: function() {
|
|
// if (_.isEmpty(User.current)) return m.route.set("/")
|
|
},
|
|
view: function() {
|
|
return [
|
|
m(head),
|
|
m(".header-title", {
|
|
style: {
|
|
display: "table"
|
|
}
|
|
}, m("form", {
|
|
onsubmit: function(e) {
|
|
e.preventDefault()
|
|
// console.log(User.current);
|
|
m.route.set("/questionnaires")
|
|
},
|
|
style: {
|
|
padding: "1em",
|
|
display: "table",
|
|
height: "100%",
|
|
width: "100%"
|
|
}
|
|
}, m("div", {
|
|
style: {
|
|
display: "table-cell",
|
|
verticalAlign: "middle",
|
|
}
|
|
}, m(".flex", {
|
|
style: {
|
|
width: "100%",
|
|
}
|
|
}, m(".constant"), m(Card, {
|
|
className: "front-card",
|
|
style: {
|
|
height: "100%",
|
|
margin: "0"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: "Daftar",
|
|
subtitle: "Silahkan isi data diri Anda terlebih dahulu"
|
|
}
|
|
},
|
|
{
|
|
text: {
|
|
className: "flex but",
|
|
content: [
|
|
m("div", {
|
|
style: {
|
|
flexBasis: "45%"
|
|
}
|
|
}, [
|
|
m(TextField, {
|
|
className: "firstInput",
|
|
label: "Nama Lengkap",
|
|
required: true,
|
|
floatingLabel: true,
|
|
tight: true,
|
|
autofocus: true,
|
|
value: User.current.name,
|
|
events: {
|
|
oninput: function() {
|
|
User.current.name = this.value
|
|
}
|
|
}
|
|
}),
|
|
m("span", {
|
|
style: {
|
|
color: "rgba(0, 0, 0, .4)",
|
|
fontSize: "16px",
|
|
fontWeight: "400",
|
|
lineHeight: "24px"
|
|
}
|
|
}, "Jenis Kelamin *"),
|
|
m(RadioGroup, {
|
|
id: "gender",
|
|
name: "gender",
|
|
style: {
|
|
margin: ".5rem 0"
|
|
},
|
|
buttons: [
|
|
{
|
|
id: "gender-m",
|
|
value: "m",
|
|
label: "Laki-laki",
|
|
events: {
|
|
oncreate: function() {
|
|
document.getElementById("gender-m")
|
|
.querySelector("input")
|
|
.required = "required"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: "gender-f",
|
|
value: "f",
|
|
label: "Perempuan",
|
|
events: {
|
|
oncreate: function() {
|
|
document.getElementById("gender-f")
|
|
.querySelector("input")
|
|
.required = "required"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
onChange: function(state) {
|
|
User.current.gender = state.value
|
|
}
|
|
}),
|
|
m("div", {
|
|
style: {
|
|
color: "rgba(0, 0, 0, .4)",
|
|
fontSize: "16px",
|
|
fontWeight: "400",
|
|
lineHeight: "24px",
|
|
marginBottom: ".5em"
|
|
}
|
|
}, "Tanggal Lahir *"),
|
|
m(DatePicker, {
|
|
date: User.current.birthDate,
|
|
locale: "id-id",
|
|
onchange: function(chosenDate) {
|
|
User.current.birthDate = moment(chosenDate).format("YYYY-MM-DD HH:mm:ss")
|
|
},
|
|
oncreate: function() {
|
|
var target = document.querySelector(".mithril-date-picker")
|
|
var click = target.childNodes[0].onclick
|
|
var className = target.childNodes[0].className
|
|
return m.mount(target, {
|
|
oncreate: function() {
|
|
User.current.birthDate = moment().format("YYYY-MM-DD HH:mm:ss")
|
|
},
|
|
view: function() {
|
|
return m("input", {
|
|
className: className,
|
|
value: moment(User.current.birthDate)
|
|
.format("ddd, DD MMM YYYY"),
|
|
onclick: click,
|
|
required: "required",
|
|
readonly: "readonly",
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
]),
|
|
m("div", {
|
|
style: {
|
|
flexGrow: "1"
|
|
}
|
|
}),
|
|
m("div", {
|
|
style: {
|
|
flexBasis: "45%"
|
|
}
|
|
}, [
|
|
m(TextField, {
|
|
label: "No. Handphone",
|
|
required: true,
|
|
floatingLabel: true,
|
|
tight: true,
|
|
pattern: "[0-9]+",
|
|
validateOnInput: true,
|
|
error: "Gunakan angka",
|
|
events: {
|
|
oninput: function() {
|
|
User.current.handphone = this.value
|
|
}
|
|
},
|
|
value: User.current.handphone
|
|
}),
|
|
m(TextField, {
|
|
className: "lastInput",
|
|
label: "Pekerjaan",
|
|
required: true,
|
|
floatingLabel: true,
|
|
tight: true,
|
|
events: {
|
|
oninput: function() {
|
|
User.current.occupation = this.value
|
|
}
|
|
},
|
|
value: User.current.occupation
|
|
}),
|
|
m(TextField, {
|
|
id: "category",
|
|
label: "Kategori",
|
|
required: true,
|
|
events: {
|
|
onfocus: function() {
|
|
var holder = document
|
|
.querySelector("span.pe-dialog__placeholder")
|
|
Dialog.show({
|
|
title: "Pilih kategori",
|
|
body: m(List, {
|
|
tiles: [
|
|
{
|
|
title: "Mahasiswa STIE BISMA LEPISI",
|
|
value: 43,
|
|
hoverable: true
|
|
},
|
|
{
|
|
title: "Mahasiswa AKSEMA LEPISI",
|
|
value: 44,
|
|
hoverable: true
|
|
},
|
|
{
|
|
title: "Dosen STIE BISMA LEPISI",
|
|
value: 45,
|
|
hoverable: true
|
|
},
|
|
{
|
|
title: "Dosen AKSEMA LEPISI",
|
|
value: 46,
|
|
hoverable: true
|
|
}
|
|
],
|
|
keyboardControl: true,
|
|
highlightIndex: 0,
|
|
onSelect: function({attrs}) {
|
|
Dialog.hide()
|
|
User.current.category = attrs.value
|
|
document.getElementById("category")
|
|
.querySelector("input")
|
|
.value = attrs.title
|
|
document.getElementById("category")
|
|
.className += "pe-textfield--dirty"
|
|
}
|
|
}),
|
|
backdrop: true
|
|
})
|
|
}
|
|
}
|
|
})
|
|
])
|
|
]
|
|
}
|
|
},
|
|
{
|
|
actions: {
|
|
content: m(RaisedButton, {
|
|
element: "button",
|
|
label: "Kirim",
|
|
type: "submit"
|
|
})
|
|
}
|
|
}
|
|
]
|
|
}), m(".constant"))))),
|
|
m(Dialog)
|
|
]
|
|
}
|
|
}
|
|
|
|
export const loginUser = {
|
|
view: function() {
|
|
return [
|
|
m(head),
|
|
m(".header-title", {
|
|
style: {
|
|
display: "table"
|
|
}
|
|
}, m("div", {
|
|
style: {
|
|
display: "table-cell",
|
|
verticalAlign: "middle"
|
|
}
|
|
}, m(".flex", [
|
|
m(".constant"),
|
|
m("form", {
|
|
onsubmit: function(e) {
|
|
e.preventDefault()
|
|
User.login()
|
|
}
|
|
}, m(Card, {
|
|
className: "front-card",
|
|
style: {
|
|
width: "initial"
|
|
},
|
|
content: [
|
|
{
|
|
primary: {
|
|
title: "Masuk"
|
|
}
|
|
},
|
|
{
|
|
text: {
|
|
className: "login-scroll",
|
|
content: [
|
|
m(TextField, {
|
|
label: "Username",
|
|
required: true,
|
|
pattern: "[a-zA-Z0-9]+",
|
|
floatingLabel: true,
|
|
tight: true,
|
|
autofocus: true,
|
|
validateOnInput: true,
|
|
value: User.current.username,
|
|
onChange: function(state) {
|
|
User.current.username = state.value
|
|
}
|
|
}),
|
|
m(TextField, {
|
|
label: "Password",
|
|
type: "password",
|
|
required: true,
|
|
floatingLabel: true,
|
|
tight: true,
|
|
value: User.current.password,
|
|
onChange: function(state) {
|
|
User.current.password = state.value
|
|
}
|
|
})
|
|
]
|
|
}
|
|
},
|
|
{
|
|
actions: {
|
|
content: m(RaisedButton, {
|
|
element: "button",
|
|
label: "Masuk",
|
|
type: "submit"
|
|
})
|
|
}
|
|
}
|
|
]
|
|
})),
|
|
m(".constant")
|
|
])))
|
|
]
|
|
}
|
|
}
|