I have this f7.html
file and i need to convert this to route component
<div class="page" data-name="login">
<div class="page-content" style="width: 60%;margin-left : 20%">
<form class="list" id="form-login">
<div style="margin-left: 30%">
<img id="companyImg" src="{{ companyImage }}" alt="Company Image" style="width: 60%;height:auto;" />
</div>
<div class="list no-hairlines-md">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">
Usuario:
</div>
<div class="item-input-wrap">
<input type="text" name="userLogin" placeholder="Ingrese su usuario." required
validate />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input item-input-with-info">
<div class="item-inner">
<div class="item-title item-label">
Contraseña:
</div>
<div class="item-input-wrap">
<input type="password" @keyup="pressEnter($event)" name="password"
placeholder="Ingrese su contraseña." required validate />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
<div class="list inline-labels no-hairlines-md block">
<button class="col button button-fill color-blue" href="#" @click="userWantsToLogin">
Ingresar
</button>
<br />
<button class="col button button-fill color-red" href="#">
Olvide mi contraseña
</button>
<div class="item-input-outline">
<p class="item-input-wrap text-align-center">
{{ lastLogin }} / {{ lastLoginDate }}
</p>
</div>
<p class="text-align-center" style="font-weight: bold">
Retail for NAV
</p>
</div>
</div>
</div>
import {
Credential
} from "../ts/entities/credential";
import XConnectService from "../js/xconnect/Service/XConnectService";
import {
Source,
TypeConnection
} from "../js/xconnect/EnumAndType/XConnectType";
import {
UserInteractionService
} from "../ts/services/user-interaction";
import {
Utilities
} from "../ts/utils/utils.ts";
import {
AppService
} from "../ts/services/app.ts";
import {
TemplateLoaderService
} from "../ts/services/template-loader";
import {
enums
} from "../ts/enum/enum.ts";
var userInteraction = UserInteractionService.getInstance();
var xConnectServiceInstance = XConnectService.getInstance();
export default {
data: function () {
return {
title: "Configuración",
lastLogin: "",
lastLoginDate: null
};
},
methods: {
userWantsToLogin: async function () {
userInteraction.showPreloader();
var securityService = SecurityService.getInstance();
var appService = AppService.getInstance();
var appInstance = appService.appInstance;
try {
var formData = appInstance.form.convertToData(
"#form-login"
);
var credential = Credential.createCredentials(
formData.userLogin,
formData.password,
"RETAILFORNAV",
null
);
var result = await securityService.loginUser(credential);
credential.communicationAddress =
result.CommunicationAddress;
xConnectServiceInstance.setUrl(result.CommunicationAddress);
appService.setLocalValue(
"UserCredentials",
Utilities.serialize(credential)
);
try {
xConnectServiceInstance.getCollection(
enums.operationCodes.getUser, {
UserLogin: credential.loginId
},
Source.Server,
TypeConnection.Api,
data => {
let credentials = Utilities.deserialize(
appService.getLocalValue("UserCredentials")
);
let object =
data.collectionResult[0].collection[0];
appService.setLocalValue(
"LastLoginUser",
credential.loginId
);
var loggedDate = new Date();
var strLoggedDate =
loggedDate.getDate() +
"-" +
(loggedDate.getMonth() + 1) +
"-" +
loggedDate.getFullYear() +
" " +
loggedDate.getHours() +
":" +
loggedDate.getMinutes() +
":" +
loggedDate.getSeconds();
appService.setLocalValue(
"LastLoginDate",
strLoggedDate
);
appService.setLocalValue(
"CompanyImage",
object.Image
);
appService.setLocalValue("SalePointId", object.SalePoint);
credential.UserInfo = object;
this.loadTemplates(credential.loginId);
},
error => {
userInteraction.showError(error);
}
);
} catch (error) {
userInteraction.showError(error);
}
} catch (error) {
userInteraction.showError(error);
}
},
loadTemplates: function (userLogin) {
try {
var appService = AppService.getInstance();
var appInstance = appService.appInstance;
xConnectServiceInstance.getCollection(
enums.operationCodes.getNavigationObject, {
UserLogin: userLogin
},
Source.Server,
TypeConnection.Api,
data => {
if (
!data ||
!data.collectionResult ||
data.collectionResult.lenght <= 0
) {
throw new Error(
"Usuario sin opciones de navegación configuradas, por favor, comuníquese con su administrador."
);
}
this.loadParameters();
TemplateLoaderService.getInstance().prepareMenu.next(
data.collectionResult[0].collection
);
// TODO: Use it for switch to main view when all the templates are loaded
// appInstance.views.main.router.navigate("/form/", {
// reloadCurrent: true
// });
},
error => {
userInteraction.showError(error);
}
);
} catch (error) {
userInteraction.showError(error);
}
},
loadParameters: function () {
try {
var appService = AppService.getInstance();
xConnectServiceInstance.getCollection(
enums.operationCodes.getParameters, {},
Source.Server,
TypeConnection.Api,
data => {
if (
!data ||
!data.collectionResult ||
data.collectionResult.lenght <= 0 ||
data.collectionResult[0].collection.lenght <= 0
) {
throw new Error(
"Parametros de sistema no configurados, consulte a su administrador."
);
}
let parameters = data.collectionResult[0].collection;
let paramCurrency = parameters.find(param => {
return param.Name == enums.paramNames.currency;
});
let paramLocalString = parameters.find(param => {
return param.Name == enums.paramNames.regionalInfoCode;
});
let paramMinimumFractionDigits = parameters.find(param => {
return param.Name == enums.paramNames.minimumFractionDigits;
});
if (paramCurrency) {
appService.setCurrency(paramCurrency.Value);
} else {
throw new Error(
"El parámetro de moneda no ha sido configurado"
);
}
if (paramLocalString) {
appService.setRegionalInfoCode(paramLocalString.Value);
} else {
throw new Error(
"El parámetro del codigo de información regional no ha sido configurado"
);
}
if (paramMinimumFractionDigits) {
appService.setMinimumFractionDigits(paramMinimumFractionDigits.Value);
} else {
throw new Error(
"El parámetro de la cantidad mínima de decimales no ha sido configurado"
);
}
},
error => {
userInteraction.showError(error);
}
);
} catch (error) {
userInteraction.showError(error);
}
},
pressEnter: function ($event) {
var appService = AppService.getInstance();
var formLogin = appService.appInstance.form.convertToData(
"#form-login"
);
if (event.keyCode == 13) {
if (formLogin.userLogin == "") {
userInteraction.showError("Ingrese su usuario.");
} else {
if (formLogin.password == "") {
userInteraction.showError("Ingrese su contraseña.");
} else {
this.userWantsToLogin();
}
}
}
}
},
on: {
pageInit: function (e, page) {
// do something on page init
var appService = AppService.getInstance();
var lastLogin = appService.getLocalValue("LastLoginUser");
var lastLoginDate = appService.getLocalValue("LastLoginDate");
var companyImage = appService.getLocalValue("CompanyImage");
var formDataObject = null;
if (!lastLogin) {
lastLogin = "Último usuario";
} else {
formDataObject = {
userLogin: lastLogin
};
}
if (!lastLoginDate) {
lastLoginDate = "Último inicio de sesión";
}
this.$setState({
lastLogin: lastLogin,
lastLoginDate: lastLoginDate,
hasCompany: this.hasCompany
});
if (formDataObject) {
appService.appInstance.form.fillFromData(
"#form-login",
formDataObject
);
}
appService.appInstance
.$("#companyImg")
.attr("src", companyImage);
}
}
};