SAPUI5 Login Popup

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <title>SAPUI5 demo</title>
    <script id="sap-ui-bootstrap" 
            src="https://sapui5.hana.ondemand.com/1.52.25/resources/sap-ui-core.js" 
            data-sap-ui-theme="sap_bluecrystal" 
            data-sap-ui-libs="sap.m, sap.ui.layout" 
            data-sap-ui-xx-bindingsyntax="complex" 
            data-sap-ui-language="de"
            data-sap-ui-resourceroots='{"de.tammenit.ui5.loginpopup": "./"}'></script>
    <script>
  			var app = new sap.m.App({initialPage:"main"});
  			var page = sap.ui.view({id:"main", viewName:"de.tammenit.ui5.loginpopup.view.main", type:sap.ui.core.mvc.ViewType.XML});
  			app.addPage(page);
  			app.placeAt("content");
		</script>
  </head>

  <body class="sapUiBody" id="content">
    <style>
      .myIcon::before {
        font-family: SAP-icons;
        content: '\e102';
        font-weight: normal
      }
    </style>
    <div style="" >
      <span class="myIcon">
        Usage of SAP-icons font in non UI5 tag
      </span>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"  
controllerName="de.tammenit.ui5.loginpopup.controller.main" >  
			<Toolbar>
				<Button type="Back" />
				<ToolbarSpacer/>
				<Title text="Service Portal Hessen" level="H3"/>
				<ToolbarSpacer/>
        <Button text="Gebärdensprache" type="Transparent"/>
        <Button text="Leichte Sprache" type="Transparent"/>
        <Button text="Anmelden" type="Transparent" press="showLogin"/>
			</Toolbar>
</core:View>

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:l="sap.ui.layout" 
  xmlns:core="sap.ui.core">
	<Popover
		title="Anmelden"
		class="sapUiContentPadding"
		placement="Bottom"
			initialFocus="email">
    <VBox>
      <Input placeholder="Benutzername"/>
      <Input placeholder="Kennwort"/>
      <Button text="Anmelden" width="100%"/>

      <HBox justifyContent="Center">
        <Text text="oder"/>
      </HBox>
      <Button text="Anmelden mit Servicekonto" tooltip="Es erfolgt eine Weiterleitung auf eine andere Anmeldeseite" type="Emphasized" width="100%"/>

      <Panel expandable="true" expanded="false" headerText="Hilfe zur Anmeldung" class="sapUiResponsiveMargin" content="{viewModel>/links}">
        <layoutData>
          <l:GridData span="L8 M12 S12" indent="L2 M0 S0" linebreak="true"/>
        </layoutData>
        <content>
          <HBox>
            <core:Icon src="sap-icon://chevron-phase-2" class="sapUiTinyMarginEnd"/>
            <Link text="{viewModel>text}" press="onPressLink" wrapping="true"/>
            <!-- <Button icon="sap-icon://chevron-phase-2" text="{configModel>text}" width="80%" press="onPressLink" type="Transparent"/> -->
          </HBox>
        </content>
      </Panel>
    </VBox>
	</Popover>
</core:FragmentDefinition>

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("de.tammenit.ui5.loginpopup.controller.main", {
      
      onInit:function(){ 
        sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);
        var model = new JSONModel({
          links: [
            {
              text: "Registrieren Sie sich hier, wenn Sie das NzüK-Portal nutzen wollen."
            },
            {
              text: "Sie können sich nicht mehr an Ihr Kennwort erinnern?"
            },
            {
              text: "Hier können Sie eine Übersicht der häufig gestellten Fragen und Antworten aufrufen"
            }
          ]
        });
        
        this.getView().setModel(model, "viewModel");
      },

      showLogin: function(oEvent) {
        console.log("hello");
        // create popover
        if (!this._oPopover) {
          this._oPopover = sap.ui.xmlfragment("de.tammenit.ui5.loginpopup.view.LoginPopover", this);
          this.getView().addDependent(this._oPopover);
        }

        this._oPopover.openBy(oEvent.getSource());

      }
    });
});