artin/OBP-API
1
0
Fork 0
mirror of https://github.com/OpenBankProject/OBP-API.git synced 2026-02-06 15:27:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made the webapp responsive

Browse Source
This commit is contained in:
Sebastian Henschel 2017-07-21 12:47:42 +02:00
parent 48c9910f3d
commit 20c5bff79d
18 changed files with 977 additions and 2000 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/main/scala/code/model/dataAccess/AuthUser.scala
View File

@ -366,22 +366,17 @@ import net.liftweb.util.Helpers._
}
override def lostPasswordXhtml = {
<div id="authorizeSection">
<div id="userAccess">
<div class="account account-in-content">
Enter your email address or username and we'll email you a link to reset your password
<form class="forgotPassword" action={S.uri} method="post">
<div class="field username">
<label>Username or email address</label> <user:email />
<div id="recover-password">
<h1>Recover Password</h1>
<div id="recover-password-explanation">Enter your email address or username and we'll email you a link to reset your password</div>
<form action={S.uri} method="post">
<div class="form-group">
<label>Username or email address</label> <span id="recover-password-email"><user:email /></span>
</div>
<div class="field buttons">
<div class="button button-field">
<div id="recover-password-submit">
<user:submit />
</div>
</div>
</form>
</div>
</div>
</div>
}
@ -423,32 +418,34 @@ import net.liftweb.util.Helpers._
if (url.isEmpty) {
s""
} else {
scala.xml.Unparsed(s"""<tr><td colspan="2"><input type="checkbox" id="agree-terms-input" /><span id="agree-terms-text">I hereby agree to the <a href="$url" title="T &amp; C">Terms and Conditions</a></span></td></tr>""")
scala.xml.Unparsed(s"""<div id="signup-agree-terms" class="checkbox"><label><input type="checkbox" />I hereby agree to the <a href="$url" title="T &amp; C">Terms and Conditions</a></label></div>""")
}
}
override def signupXhtml (user:AuthUser) = {
<div id="authorizeSection" class="signupSection">
<div class="signup-error"><span class="lift:Msg?id=signup"/></div>
<div>
<form id="signupForm" method="post" action={S.uri}>
<table>
<tr>
<td colspan="2">{ S.?("sign.up") }</td>
</tr>
{localForm(user, false, signupFields)}
{agreeTerms}
<tr>
<td>&nbsp;</td>
<td><user:submit/></td>
</tr>
</table>
</form>
</div>
<div id="signup">
<form method="post" action={S.uri}>
<h1>Sign Up</h1>
<div id="signup-error" class="alert alert-danger hide"><span data-lift="Msg?id=error"/></div>
{localForm(user, false, signupFields)}
{agreeTerms}
<div id="signup-submit">
<user:submit />
</div>
</form>
</div>
}
override def localForm(user: TheUserType, ignorePassword: Boolean, fields: List[FieldPointerType]): NodeSeq = {
for {
pointer <- fields
field <- computeFieldFromPointer(user, pointer).toList
if field.show_? && (!ignorePassword || !pointer.isPasswordField_?)
form <- field.toForm.toList
} yield <div class="form-group"><label>{field.displayName}</label> {form}</div>
}
def userLoginFailed = {
info("failed: " + failedLoginRedirect.get)
// variable redir is from failedLoginRedirect, it is set-up in OAuthAuthorisation.scala as following code:
@ -882,7 +879,7 @@ import net.liftweb.util.Helpers._
}
case xs =>
xs.foreach(e => S.error("signup", e.msg))
xs.foreach(e => S.error("error", e.msg))
signupFunc(Full(innerSignup _))
}
}

66
src/main/scala/code/snippet/ConsumerRegistration.scala
View File

@ -77,41 +77,41 @@ class ConsumerRegistration extends MdcLoggable {
def registerWithoutWarnings =
register &
"#registration-errors" #> ""
"#register-consumer-errors" #> ""
def register = {
".register" #> {
".appTypeClass" #> SHtml.select(appTypes, Empty, appType(_)) &
".appNameClass" #> SHtml.text(nameVar.is, nameVar(_)) &
".appRedirectUrlClass" #> SHtml.text(redirectionURLVar, redirectionURLVar(_)) &
".appDevClass" #> SHtml.text(devEmailVar, devEmailVar(_)) &
".appDescClass" #> SHtml.textarea(descriptionVar, descriptionVar (_)) &
".appUserAuthenticationUrlClass" #> SHtml.text(authenticationURLVar.is, authenticationURLVar(_)) &
"type=submit" #> SHtml.submit("Send", () => submitButtonDefense)
"form" #> {
"#appType" #> SHtml.select(appTypes, Empty, appType(_)) &
"#appName" #> SHtml.text(nameVar.is, nameVar(_)) &
"#appRedirectUrl" #> SHtml.text(redirectionURLVar, redirectionURLVar(_)) &
"#appDev" #> SHtml.text(devEmailVar, devEmailVar(_)) &
"#appDesc" #> SHtml.textarea(descriptionVar, descriptionVar (_)) &
"#appUserAuthenticationUrl" #> SHtml.text(authenticationURLVar.is, authenticationURLVar(_)) &
"type=submit" #> SHtml.submit("Register consumer", () => submitButtonDefense)
} &
".success" #> ""
"#register-consumer-success" #> ""
}
def showResults(consumer : Consumer) = {
val urlOAuthEndpoint = Props.get("hostname", "") + "/oauth/initiate"
val urlDirectLoginEndpoint = Props.get("hostname", "") + "/my/logins/direct"
//thanks for registering, here's your key, etc.
".app-consumer_id *" #> consumer.id.get &
".app-name *" #> consumer.name.get &
".app-redirect-url *" #> consumer.redirectURL &
".app-user-authentication-url *" #> consumer.userAuthenticationURL &
".app-type *" #> consumer.appType.get.toString &
".app-description *" #> consumer.description.get &
".app-developer *" #> consumer.developerEmail.get &
".auth-key *" #> consumer.key.get &
".secret-key *" #> consumer.secret.get &
".registration" #> "" &
".oauth-endpoint a *" #> urlOAuthEndpoint &
".oauth-endpoint a [href]" #> urlOAuthEndpoint &
".directlogin-endpoint a *" #> urlDirectLoginEndpoint &
".directlogin-endpoint a [href]" #> urlDirectLoginEndpoint &
".post-consumer-registration-more-info-link a *" #> registrationMoreInfoText &
".post-consumer-registration-more-info-link a [href]" #> registrationMoreInfoUrl
"#app-consumer_id *" #> consumer.id.get &
"#app-name *" #> consumer.name.get &
"#app-redirect-url *" #> consumer.redirectURL &
"#app-user-authentication-url *" #> consumer.userAuthenticationURL &
"#app-type *" #> consumer.appType.get.toString &
"#app-description *" #> consumer.description.get &
"#app-developer *" #> consumer.developerEmail.get &
"#auth-key *" #> consumer.key.get &
"#secret-key *" #> consumer.secret.get &
"#oauth-endpoint a *" #> urlOAuthEndpoint &
"#oauth-endpoint a [href]" #> urlOAuthEndpoint &
"#directlogin-endpoint a *" #> urlDirectLoginEndpoint &
"#directlogin-endpoint a [href]" #> urlDirectLoginEndpoint &
"#post-consumer-registration-more-info-link a *" #> registrationMoreInfoText &
"#post-consumer-registration-more-info-link a [href]" #> registrationMoreInfoUrl &
"#register-consumer-input" #> ""
}
def showRegistrationResults(result : Consumer) = {
@ -125,7 +125,7 @@ class ConsumerRegistration extends MdcLoggable {
def showErrors(errors : List[FieldError]) = {
val errorsString = errors.map(_.msg.toString)
register &
"#registration-errors *" #> {
"#register-consumer-errors *" #> {
".error *" #>
errorsString.map({ e=>
".errorContent *" #> e
@ -135,7 +135,7 @@ class ConsumerRegistration extends MdcLoggable {
def showUnknownErrors(errors : List[String]) = {
register &
"#registration-errors *" #> {
"#register-consumer-errors *" #> {
".error *" #>
errors.map({ e=>
".errorContent *" #> e
@ -144,11 +144,11 @@ class ConsumerRegistration extends MdcLoggable {
}
//TODO this should be used somewhere else, it is check the empty of description for the hack attack from GUI.
def showErrorsForDescription (descriptioinError : String) = {
def showErrorsForDescription (descriptionError : String) = {
register &
"#registration-errors *" #> {
"#register-consumer-errors *" #> {
".error *" #>
List(descriptioinError).map({ e=>
List(descriptionError).map({ e=>
".errorContent *" #> e
})
}
@ -166,7 +166,7 @@ class ConsumerRegistration extends MdcLoggable {
redirectionURLVar.set(redirectionURLVar.is)
if(submitButtonDefenseFlag.isEmpty)
showErrorsForDescription("The 'Send' button random name has been modified !")
showErrorsForDescription("The 'Register' button random name has been modified !")
else if(descriptionVar.isEmpty)
showErrorsForDescription("Description of the application can not be empty !")
else{
@ -280,4 +280,4 @@ class ConsumerRegistration extends MdcLoggable {
}
}
}

19
src/main/scala/code/snippet/CreateTestAccountForm.scala
View File

@ -50,21 +50,22 @@ object CreateTestAccountForm{
def showSuccess(createdAccount : BankAccount) : JsCmd = {
hideErrorMessage &
showSuccessMessage &
SetHtml("created-account-id", <span>{createdAccount.accountId.value}</span>) &
SetHtml("created-account-bank-id", <span>{createdAccount.bankId.value}</span>) &
SetHtml("created-account-initial-balance", <span>{createdAccount.balance}</span>) &
SetHtml("created-account-currency", <span>{createdAccount.currency}</span>)
SetHtml("create-account-id", <span>{createdAccount.accountId.value}</span>) &
SetHtml("create-account-bank-id", <span>{createdAccount.bankId.value}</span>) &
SetHtml("create-account-initial-balance", <span>{createdAccount.balance}</span>) &
SetHtml("create-account-currency", <span>{createdAccount.currency}</span>)
}
def showError(msg : String) : JsCmd = {
hideSuccessMessage &
showErrorMessage(msg)
showErrorMessage &
SetHtml("create-account-error", <span>{msg}</span>)
}
private val hideErrorMessage = SetHtml("create-account-error-message", NodeSeq.Empty)
private val showSuccessMessage = Show("account-created-successfully")
private val hideSuccessMessage = Hide("account-created-successfully")
private def showErrorMessage(msg : String) = SetHtml("create-account-error-message", <span>{msg}</span>)
private val showSuccessMessage = Show("create-account-success")
private val hideSuccessMessage = Hide("create-account-success")
private def showErrorMessage = Show("create-account-error")
private val hideErrorMessage = Hide("create-account-error")
/**
* Attempts to create a new account, based on form params

4
src/main/scala/code/snippet/Login.scala
View File

@ -49,7 +49,7 @@ class Login {
".logout [href]" #> {
AuthUser.logoutPath.foldLeft("")(_ + "/" + _)
} &
".username *" #> AuthUser.getCurrentUserUsername
".logout #username *" #> AuthUser.getCurrentUserUsername
}
}
@ -91,7 +91,7 @@ class Login {
val specialLoginInstructions = scala.xml.Unparsed(Props.get("webui_login_page_special_instructions", ""))
// In case we use Extraction.decompose
implicit val formats = net.liftweb.json.DefaultFormats
"#login_special_instructions *" #> specialLoginInstructions
"#login-special-instructions *" #> specialLoginInstructions
}

4
src/main/scala/code/snippet/OAuthAuthorisation.scala
View File

@ -81,7 +81,7 @@ object OAuthAuthorisation {
def error(msg: String): CssSel = {
ErrorMessageSel #> S.?(msg) &
"#userAccess" #> NodeSeq.Empty &
"#authorise-token-success" #> NodeSeq.Empty &
VerifierBlocSel #> NodeSeq.Empty
}
@ -210,4 +210,4 @@ object OAuthAuthorisation {
Tokens.tokens.vend.deleteExpiredTokens(currentDate)
Nonces.nonces.vend.deleteExpiredNonces(currentDate)
}
}
}

4
src/main/scala/code/snippet/WebUI.scala
View File

@ -52,7 +52,7 @@ class WebUI extends MdcLoggable{
// http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm#section_2
def cookieConsent = {
var onclick = "removeByIdAndSaveIndicatorCookie('cookies-consent'); "
val buttonString = """<input id="clickMe" type="button" value="Accept and close" onclick="%s"/> <script>showIndicatorCookiePage('cookies-consent'); </script>""".format(onclick)
val buttonString = """<input id="clickMe" class="btn btn-default" type="button" value="Accept and close" onclick="%s"/> <script>showIndicatorCookiePage('cookies-consent'); </script>""".format(onclick)
val button = scala.xml.Unparsed(s"""$buttonString""")
"#clickMe" #> button
}
@ -82,7 +82,6 @@ class WebUI extends MdcLoggable{
"img [src]" #> Props.get("webui_header_logo_right_url", "")
}
def footer2LogoLeft = {
"img [src]" #> Props.get("webui_footer2_logo_left_url", "")
}
@ -91,7 +90,6 @@ class WebUI extends MdcLoggable{
"#footer2-middle-text *" #> scala.xml.Unparsed(Props.get("webui_footer2_middle_text", ""))
}
def aboutBackground: CssSel = {
"#main-about [style]" #> ("background-image: url(" + Props.get("webui_index_page_about_section_background_image_url", "") + ");")
}

288
src/main/webapp/consumer-registration.html
View File

@ -24,191 +24,121 @@ Berlin 13359, Germany
TESOBE (http://www.tesobe.com/)
by
Simon Redfern : simon AT tesobe DOT com
Stefan Bethge : stefan AT tesobe DOT com
Everett Sochowski : everett AT tesobe DOT com
Ayoub Benali: ayoub AT tesobe DOT com
Sebastian Henschel : sebastian AT tesobe DOT com
-->
<div id="register-consumer" data-lift="surround?with=default;at=content">
<div data-lift="ConsumerRegistration.registerForm">
<h1>Register your consumer</h1>
<div id="main" class="lift:surround?with=default;at=content">
<div id="registerAppSection" class="lift:ConsumerRegistration.registerForm">
<div class="registration account-in-content">
<h1 class="register-header">Register your application</h1>
<div id="registration-errors">
<div id="register-consumer-input">
<div id="register-consumer-explanation">Please complete the information about your application below, so we can create your OAuth consumer key and secret.</div>
<div id="register-consumer-errors" class="alert alert-danger">
<div class="error">
<span class="errorContent"></span>
</div>
</div>
<form class="register" method="post">
Please complete the information below so we can create your OAuth token and secret key.
<div class="form-column">
<div>
<label for="appType">Application Type</label>
<select name="app-type" id="appType" class="appTypeClass">
<option class="app-type-option"></option>
</select>
</div>
<div>
<label for="appName">Application Name</label>
<input type="text" name="app-name" id="appName" class="appNameClass">
</div>
<div>
<label for="appRedirectUrl">Redirect URL</label>
<input type="text" name="app-redirect-url" id="appRedirectUrl" class="appRedirectUrlClass">
</div>
<!--Note for the commented div : 719aa7fd 04/10/15 Stefan. Hongwei just reformatted the code -->
<!--<div>-->
<!--<label for="appUserAuthenticationUrl">Authentication URL</label>-->
<!--<input type="text" name="app-user-authentication-url" id="appUserAuthenticationUrl" class="appUserAuthenticationUrlClass" >-->
<!--<img src="/media/images/moreInfo.png" title="The user will redirected to that URL during the authentication phase to authenticate. Leave it blank so that the user will see the default login page."-->
<!--alt="more info" class="moreInfoIcon"/>-->
<!--</div>-->
<div>
<label for="appDev">Developer Email</label>
<input type="text" name="app-developer" id="appDev" class="appDevClass">
</div>
</div>
<div class="form-column">
<div>
<label for="appDesc">Description of the application</label>
<textarea rows="4" name="app-description" id="appDesc" class="appDescClass"></textarea>
</div>
<div class="submit">
<input type="submit" value="Send" />
</div>
</div>
<form method="post">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="appType">Application Type</label>
<select name="app-type" id="appType" class="form-control">
<option class="app-type-option"></option>
</select>
</div>
<div class="form-group">
<label for="appName">Application Name</label>
<input type="text" name="app-name" id="appName" class="form-control">
</div>
<div class="form-group">
<label for="appRedirectUrl">Redirect URL</label>
<input type="text" name="app-redirect-url" id="appRedirectUrl" class="form-control">
</div>
<!--Note for the commented div : 719aa7fd 04/10/15 Stefan. Hongwei just reformatted the code -->
<!--<div class="form-group">-->
<!--<label for="appUserAuthenticationUrl">Authentication URL</label>-->
<!--<input type="text" name="app-user-authentication-url" id="appUserAuthenticationUrl" class="form-control" >-->
<!--<img src="/media/images/moreInfo.png" title="The user will redirected to that URL during the authentication phase to authenticate. Leave it blank so that the user will see the default login page." alt="more info" class="more-info-icon"/>-->
<!--</div>-->
<div class="form-group">
<label for="appDev">Developer Email</label>
<input type="text" name="app-developer" id="appDev" class="form-control">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="appDesc">Description of the application</label>
<textarea rows="4" name="app-description" id="appDesc" class="form-control"></textarea>
</div>
</div>
</div>
<input type="submit" value="Register consumer" class="btn btn-default" />
</form>
</div>
<div class="success">
<h1 class="success-message"></h1>
<table>
<tbody>
<tr>
<td colspan="2" >
Thank you for registering to use the Open Bank API. Here is your developer information. Please save it in a secure location.
</td>
</tr>
<tr>
<td>
Consumer ID</label>
</td>
<td>
<span class="app-consumer_id">123</span>
</td>
</tr>
<tr>
<td>
Application Type</label>
</td>
<td>
<span class="app-type">web</span>
</td>
</tr>
<tr>
<td>
Application Name
</td>
<td>
<span class="app-name">ABC</span>
</td>
</tr>
<tr>
<td>
User redirect URL
</td>
<td>
<span class="app-redirect-url">ABC</span>
</td>
</tr>
<!-- <tr>
<td>
User authentication URL
</td>
<td>
<span class="app-user-authentication-url">ABC</span>
</td>
</tr>
-->
<tr>
<td>
Developer Email
</td>
<td>
<span class="app-developer">abc@example.com</span>
</td>
</tr>
<tr>
<td>
App Description
</td>
<td>
<span class="app-description">ABCDEF</span>
</td>
</tr>
<tr>
<td>
Consumer Key
</td>
<td>
<span class="auth-key">23432432432432</span>
</td>
</tr>
<tr>
<td>
Consumer Secret
</td>
<td>
<span class="secret-key">3334543543543</span>
</td>
</tr>
<tr>
<td>
OAuth Endpoint
</td>
<td>
<span class="oauth-endpoint"><a href="#">endpoint</a></span><br />
</td>
</tr>
</div>
<tr>
<td>
OAuth Documentation
</td>
<td>
<a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-1.0-Server">How to use OAuth for OpenBankProject</a>
</td>
</tr>
<tr>
<td>
Direct Login Endpoint
</td>
<td>
<span class="directlogin-endpoint"><a href="#">endpoint</a></span><br />
</td>
</tr>
<tr>
<td>
Direct Login Documentation
</td>
<td>
<a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">How to use Direct Login</a>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<span class="post-consumer-registration-more-info-link"><a href="#"></a></span><br />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="register-consumer-success">
<p>Thanks for registering your consumer with the Open Bank API! Here is your developer information. Please save it in a secure location.</p>
<div class="row">
<div class="col-xs-12 col-sm-4">Consumer ID</div>
<div class="col-xs-12 col-sm-8"><span id="app-consumer_id">123</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Application Type</div>
<div class="col-xs-12 col-sm-8"><span id="app-type">web</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Application Name</div>
<div class="col-xs-12 col-sm-8"><span id="app-name">ABC</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">User redirect URL</div>
<div class="col-xs-12 col-sm-8"><span id="app-redirect-url">ABC</span></div>
</div>
<!--
<div class="row">
<div class="col-xs-12 col-sm-4">User authentication URL</div>
<div class="col-xs-12 col-sm-8"><span id="app-user-authentication-url">ABC</span></div>
</div>
-->
<div class="row">
<div class="col-xs-12 col-sm-4">Developer Email</div>
<div class="col-xs-12 col-sm-8"><span id="app-developer">abc@example.com</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">App Description</div>
<div class="col-xs-12 col-sm-8"><span id="app-description">ABCDEF</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Consumer Key</div>
<div class="col-xs-12 col-sm-8"><span id="auth-key">23432432432432</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Consumer Secret</div>
<div class="col-xs-12 col-sm-8"><span id="secret-key">3334543543543</span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">OAuth Endpoint</div>
<div class="col-xs-12 col-sm-8"><span id="oauth-endpoint"><a href="#">endpoint</a></span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">OAuth Documentation</div>
<div class="col-xs-12 col-sm-8"><a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-1.0-Server">How to use OAuth for OpenBankProject</a></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Direct Login Endpoint</div>
<div class="col-xs-12 col-sm-8"><span id="directlogin-endpoint"><a href="#">endpoint</a></span></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">Direct Login Documentation</div>
<div class="col-xs-12 col-sm-8"><a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">How to use Direct Login</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-8"><span id="post-consumer-registration-more-info-link"><a href="#"></a></span></div>
</div>
</div><!-- success -->
</div>
</div>

95
src/main/webapp/create-sandbox-account.html
View File

@ -24,56 +24,53 @@ Berlin 13359, Germany
TESOBE (http://www.tesobe.com/)
by
Simon Redfern : simon AT tesobe DOT com
Stefan Bethge : stefan AT tesobe DOT com
Everett Sochowski : everett AT tesobe DOT com
Ayoub Benali: ayoub AT tesobe DOT com
Sebastian Henschel: sebastian AT tesobe DOT com
-->
<div id="main" class="lift:surround?with=default;at=content">
<div id="create-sandbox-account" class="">
<div id="create-account-explanation">
This form is designed to allow developers to create test accounts. When an account is created,
a view with VIEW_ID "owner" will be created, and access to this view will be granted to the user
(you) who created it. If you wish, you may then populate the account with transactions using the
<a href="https://github.com/OpenBankProject/OBP-API/wiki/REST-API-V1.2.1#payments">v1.2.1 payments API</a>.
If you wish to do this, you will probably want to create some other accounts to send payments to and receive
payments from.
</div>
<div id="create-account-instructions">
Create a new test bank account:
</div>
<div id="create-account-error-message"></div>
<div id="account-created-successfully" style="display:none">
Thank you, account <span id="created-account-id">ACCOUNT_ID</span> has
been created at bank <span id="created-account-bank-id">BANK_ID</span> with
an initial balance of <span id="created-account-initial-balance">INITIAL_BALANCE</span>
<span id="created-account-currency">CURRENCY</span>.
</div>
<div id="create-account" data-lift="surround?with=default;at=content">
<h1>Create new test bank account</h1>
<form data-lift="form.ajax">
<div data-lift="CreateTestAccountForm" class="form-column middle">
<div>
<label for="bank-id">Bank</label>
<select id="create-account-bank-selector" name="bank-id">
<option class="bank-option" value="bankid">Bank id</option>
</select>
</div>
<div>
<label for="account-id">Desired Account Id</label>
<input type="text" name="account-id" placeholder="Account Id">
</div>
<div>
<label for="currency">Desired Account Currency</label>
<input type="text" name="currency">
</div>
<div>
<label for="account-id">Desired Initial Balance</label>
<input type="text" name="initial-balance">
</div>
<div class="submit">
<input type="submit">
</div>
</div>
</form>
</div>
<div id="create-account-explanation">
This form is designed to allow developers to create test accounts. When an account is created,
a view with VIEW_ID "owner" will be created, and access to this view will be granted to the user
(you) who created it. If you wish, you may then populate the account with transactions using the
<a href="https://github.com/OpenBankProject/OBP-API/wiki/REST-API-V1.2.1#payments">v1.2.1 payments API</a>.
If you wish to do this, you will probably want to create some other accounts to send payments to and receive
payments from.
</div>
<form data-lift="form.ajax">
<div id="create-account-success" class="alert alert-success" style="display:none">
Thank you!<br />
Account <span id="create-account-id">ACCOUNT_ID</span> has
been created at bank <span id="create-account-bank-id">BANK_ID</span> with
an initial balance of <span id="create-account-initial-balance">INITIAL_BALANCE</span>
<span id="create-account-currency">CURRENCY</span>.
</div>
<div id="create-account-error" class="alert alert-danger" style="display: none"></div>
<div data-lift="CreateTestAccountForm">
<div class="form-group">
<label for="bank-id">Bank</label>
<select id="create-account-bank-selector" class="form-control" name="bank-id">
<option class="bank-option" value="bankid">Bank id</option>
</select>
</div>
<div class="form-group">
<label for="account-id">Desired Account Id</label>
<input type="text" class="form-control" name="account-id">
</div>
<div class="form-group">
<label for="currency">Desired Account Currency</label>
<input type="text" class="form-control" name="currency">
</div>
<div class="form-group">
<label for="account-id">Desired Initial Balance</label>
<input type="text" class="form-control" name="initial-balance">
</div>
<div class="submit">
<input type="submit" class="btn btn-default">
</div>
</div>
</form>
</div>

286
src/main/webapp/index.html
View File

@ -24,156 +24,157 @@ Berlin 13359, Germany
TESOBE (http://www.tesobe.com/)
by
Simon Redfern : simon AT tesobe DOT com
Stefan Bethge : stefan AT tesobe DOT com
Everett Sochowski : everett AT tesobe DOT com
Ayoub Benali: ayoub AT tesobe DOT com
Sebastian Henschel: sebastian AT tesobe DOT com
-->
<div id="main" data-lift="surround?with=default;at=content">
<div id="main" class="lift:surround?with=default;at=content">
<div id="main-about" class="lift:WebUI.aboutBackground">
<div id="main-about-box">
<div id="main-about-text" class="lift:WebUI.aboutText">
<h2>Welcome to the API Sandbox powered by the Open Bank Project!</h2>
<p>This sandbox, powered by the Open Bank Project, provides a standard RESTful interface for developers to create customer facing applications for account types. You can use it as a flexible toolbox of data and services to help bring your ideas to life! Use this sandbox to explore the API catalogue, test an example API-powered application, and register for a developer key so you can start building your own applications., test an example API-powered application, and register for a developer key so you can start building your own applications., test an example API-powered application, and register for a developer key so you can start building your own applications.<br> </p>
</div>
<div id="main-about-buttons">
<a href="/consumer-registration">GET API KEY</a>
<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">EXPLORE API</a>
<a class="api-manager-link" data-lift="WebUI.apiManagerLink" href="">MANAGE API</a>
<a class="sofi-link" data-lift="WebUI.sofiLink" href="">UTILITY APP</a>
<div id="main-about" data-lift="WebUI.aboutBackground">
<div class="row">
<div class="col-xs-12 col-md-5"></div>
<div class="col-xs-12 col-md-7">
<div id="main-about-box">
<div id="main-about-text" data-lift="WebUI.aboutText">
<h2>Welcome to the API Sandbox powered by the Open Bank Project!</h2>
<p>This sandbox, powered by the Open Bank Project, provides a standard RESTful interface for developers to create customer facing applications for account types. You can use it as a flexible toolbox of data and services to help bring your ideas to life! Use this sandbox to explore the API catalogue, test an example API-powered application, and register for a developer key so you can start building your own applications., test an example API-powered application, and register for a developer key so you can start building your own applications., test an example API-powered application, and register for a developer key so you can start building your own applications.<br> </p>
</div>
<div id="main-about-buttons">
<a href="/consumer-registration">GET API KEY</a>
<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">EXPLORE API</a>
<a class="api-manager-link" data-lift="WebUI.apiManagerLink" href="">MANAGE API</a>
<a class="sofi-link" data-lift="WebUI.sofiLink" href="">UTILITY APP</a>
</div>
</div>
</div>
</div>
</div>
<div id="main-get_started">
<div id="main-get-started">
<h1>Get Started</h1>
<div class="main-get_started-row">
<div class="main-get_started-cell main-get_started-icon">
<div class="row">
<div class="visible-md visible-lg col-md-5 main-get-started-icon">
<img src="https://static.openbankproject.com/images/sandbox/get-started/create_account.png" width="260" height="260" alt="create account" />
</div>
<div class="main-get_started-cell">
<div class="visible-md visible-lg col-md-2 main-get-started-item">
<img src="https://static.openbankproject.com/images/sandbox/get-started/item-1.png" width="75" height="300" alt="item-1" />
</div>
<div class="main-get_started-cell">
<div class="col-xs-12 col-md-5 main-get-started-text">
<h2>Create an account</h2>
<p>First, create a free developer account on this sandbox and request a developer key. You will be asked to submit basic information about your app at this stage. Register <a href="/user_mgt/sign_up">here</a>.</p>
</div>
</div>
<div class="main-get_started-row">
<div class="main-get_started-cell">
<div class="row">
<div class="col-xs-12 col-md-5 main-get-started-text">
<h2>Connect your app</h2>
<p>Use our SDKs to connect your app to the Open Bank Project APIs. You will need your developer key, which was provided to you when you created an account. See all available APIs on the API Explorer. Please make sure you are using the correct base URL.</p>
</div>
<div class="main-get_started-cell">
<div class="visible-md visible-lg col-md-2 main-get-started-item">
<img src="https://static.openbankproject.com/images/sandbox/get-started/item-2.png" width="75" height="300" alt="item-2" />
</div>
<div class="main-get_started-cell main-get_started-icon">
<div class="visible-md visible-lg col-md-5 main-get-started-icon">
<img src="https://static.openbankproject.com/images/sandbox/get-started/connect_app.png" width="370" height="260" alt="connect app" />
</div>
</div>
<div class="main-get_started-row">
<div class="main-get_started-cell main-get_started-icon">
<div class="row">
<div class="visible-md visible-lg col-md-5 main-get-started-icon">
<img src="https://static.openbankproject.com/images/sandbox/get-started/test_data.png" width="285" height="270" alt="test data" />
</div>
<div class="main-get_started-cell">
<div class="visible-md visible-lg col-md-2 main-get-started-item">
<img src="https://static.openbankproject.com/images/sandbox/get-started/item-3.png" width="75" height="300" alt="item-3" />
</div>
<div class="main-get_started-cell">
<div class="col-xs-12 col-md-5 main-get-started-text">
<h2>Test your app using customer data</h2>
<p>Once your app is connected, you can test it using test customer credentials. You can find a list of available customer logins for this sandbox <a class="example_sandbox_credentials_link" data-lift="WebUI.exampleSandboxCredentialsLink" href="https://github.com/OpenBankProject/OBP-API/wiki/">here</a>.</p>
</div>
</div>
<div class="green-button">
<div class="bigbutton">
<a href="/consumer-registration">Get your API key</a>
</div>
</div>
<div id="main-apis">
<h1>Your APIs</h1>
<div class="main-apis-row">
<div class="main-apis-cell">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-accounts.png" width="100" height="100" alt="accounts" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Accounts</h2>
<p>Access the user's list of accounts and account information such as the balance. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Account" href="">Explore...</a> </p>
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-branches.png" width="100" height="100" alt="branches" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Branches, ATMs</h2>
<p>Access the list of branches and ATMs for the specified bank including geolocation and opening hours. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Bank" href="">Explore...</a></p>
</div>
</div>
<div class="main-apis-row">
<div class="main-apis-cell">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-transactions.png" width="100" height="100" alt="transactions" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Transactions</h2>
<p>Access the transaction history and metadata of accounts. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Transaction,Metadata" href="">Explore...</a></p>
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-metadata.png" width="100" height="100" alt="metadata" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Metadata</h2>
<p>Enrich transactions and counterparties with metadata including geolocations, comments, pictures and tags (e.g. category of spending). <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Transaction,Counterparty,Metadata" href="">Explore...</a></p>
</div>
</div>
<div class="main-apis-row">
<div class="main-apis-cell">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-counterparties.png" width="100" height="100" alt="counterparties" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Counterparties</h2>
<p>Access the payers &amp; payees of an account including metadata such as their aliases, labels, logos and home pages. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Counterparty" href="">Explore...</a></p>
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-entitlements.png" width="100" height="100" alt="entitlements" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Entitlements</h2>
<p>Enable account holders to grant fine-grained access to third-party users and applications. For instance, a business account might provide auditors with full read-only access whilst coworkers might only see the account balance. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=View" href="">Explore...</a> </p>
</div>
</div>
<div class="main-apis-row">
<div class="main-apis-cell">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-messages.png" width="100" height="100" alt="messages" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Customer meetings, messages and video conferencing.</h2>
<p>Enable customer meetings, messages and video conferencing for KYC and CRM operations (uses third party video streaming). <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=KYC,Onboarding" href="">Explore...</a></p>
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-security.png" width="100" height="100" alt="security" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Security challenges</h2>
<p>Step up authentication using the generic challenge / response mechanism for sensitive operations e.g. to progress a transfer, the user must supply a mobile TAN <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=TransactionRequest" href="">Explore...</a></p>
</div>
</div>
<div class="main-apis-row">
<div class="main-apis-cell">
<div class="row">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-requests.png" width="100" height="100" alt="requests" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Payments & Transaction requests</h2>
<p>Initiate transfers. View and confirm charges (as per PSD2). <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=TransactionRequest" href="">Explore...</a></p>
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
<img src="https://static.openbankproject.com/images/sandbox/icons/icon-kyc.png" width="100" height="100" alt="kyc" />
</div>
<div class="main-apis-cell">
<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
<h2>Onboarding & KYC</h2>
<p>Perform user, customer and account creation. Access Know Your Customer (KYC) documents, media and KYC status. <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=KYC,Onboarding" href="">Explore...</a></p>
</div>
@ -181,8 +182,8 @@ Berlin 13359, Germany
</div>
<div id="main-apiexplorer" class="green-button">
<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">Go to API Explorer</a>
<div id="main-apiexplorer" class="bigbutton">
<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">Go to API Explorer</a>
</div>
@ -243,93 +244,114 @@ Berlin 13359, Germany
<div id="main-faq">
<h1>Technical FAQs</h1>
<div class="main-faq-row">
<div class="main-faq-cell">
<ul>
<li class="plus collapse">
<h2>What is the correct base URL for this sandbox?</h2>
<p>
The base URL is<br />
<a class="api-link" data-lift="WebUI.apiLink" href="">http://apisandbox.openbankproject.com</a><br />
Please make sure you are using this in all your API calls
</p>
</li>
<li class="plus collapse">
<h2>How should I login?</h2>
<p>There are two ways to authenticate a user: <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth</a> and <a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">Direct Login</a>. If you are using this sandbox for a hackathon, we recommend you use Direct Login to authenticate as it is easier than the OAuth workflow.
</p>
</li>
<li class="plus collapse">
<h2>Where can I read the API documentation?</h2>
<p>
Please use the <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">API Explorer</a>
</p>
</li>
<li class="plus collapse">
<h2>Where does the data come from?</h2>
<p class="faq-data-text" data-lift="WebUI.faqDataText">Text is replaced</p>
</li>
</ul>
<div class="row">
<div class="hidden-xs col-sm-1"></div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item0" class="collapsed main-faq-button">
<h2>What is the correct base URL for this sandbox?</h2>
<p id="main-faq-item0" class="collapse">
The base URL is<br />
<a class="api-link" data-lift="WebUI.apiLink" href="">http://apisandbox.openbankproject.com</a><br />
Please make sure you are using this in all your API calls
</p>
</div>
</div>
<div class="main-faq-cell">
<ul>
<li class="plus collapse">
<h2>I got a 404 error, what am I doing wrong</h2>
<ol>
<li>
Avoid using trailing slashes, else, you would get a 404 error. Example:<br />
.../obp/v1.4.0 200 OK<br />
.../obp/v1.4.0/ 404 Not Found<br />
</li>
<li>Double check parameters are spelt correctly (including http vs https etc.)</li>
<li>Check your encoding (use UTF8)</li>
</ol>
</li>
<li class="plus collapse">
<h2>How can I use OAuth or Direct Login?</h2>
<p>
If you want to use OBP with OAuth, we recommend you use (and fork) one of our <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth Starter SDKs</a>.
If you are using this sandbox for a hackathon, we recommend you use <a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">Direct Login</a>.
For an OAuth walkthrough example with sample code, please see <a href="http://obp.sckhoo.com/">here</a>. We use OAuth 1.0a. For deepish technical details of the flow <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-1.0-Server">see here</a><br />
</p>
</li>
<li class="plus collapse">
<h2>How can I use the example customer data?</h2>
<p>You will need to login to the API as a sandbox customer. You can do this using the API Explorer, or any REST client. You can find some example credentials <a class="example_sandbox_credentials_link" data-lift="WebUI.exampleSandboxCredentialsLink" href="https://github.com/OpenBankProject/OBP-API/wiki/">here</a>.</p>
</li>
<li class="plus collapse">
<h2>Where can i get more information and support?</h2>
<p>Please refer to our <a class="faq-link" data-lift="WebUI.faqLink" href="" target="_blank">FAQ</a>, <a class="faq-link" href="https://github.com/OpenBankProject/OBP-API/wiki/Glossary" target="_blank">Glossary</a>, join our <a class="faq-link" href="https://slack.openbankproject.com" target="_blank">Slack channels</a> or email us at <a class="faq-email" data-lift="WebUI.faqEmail" href="">contact@openbankproject.com</a></p>
</li>
</ul>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item1" class="collapsed main-faq-button">
<h2>I got a 404 error, what am I doing wrong</h2>
<ol id="main-faq-item1" class="collapse">
<li>
Avoid using trailing slashes, else, you would get a 404 error. Example:<br />
.../obp/v1.4.0 200 OK<br />
.../obp/v1.4.0/ 404 Not Found<br />
</li>
<li>Double check parameters are spelt correctly (including http vs https etc.)</li>
<li>Check your encoding (use UTF8)</li>
</ol>
</div>
</div>
<div class="hidden-xs col-sm-1"></div>
</div>
<div class="row">
<div class="hidden-xs col-sm-1"></div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item2" class="collapsed main-faq-button">
<h2>How should I login?</h2>
<p id="main-faq-item2" class="collapse">
There are two ways to authenticate a user: <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth</a> and <a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">Direct Login</a>. If you are using this sandbox for a hackathon, we recommend you use Direct Login to authenticate as it is easier than the OAuth workflow.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item3" class="collapsed main-faq-button">
<h2>How can I use OAuth or Direct Login?</h2>
<p id="main-faq-item3" class="collapse">
If you want to use OBP with OAuth, we recommend you use (and fork) one of our <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth Starter SDKs</a>.
If you are using this sandbox for a hackathon, we recommend you use <a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">Direct Login</a>.
For an OAuth walkthrough example with sample code, please see <a href="http://obp.sckhoo.com/">here</a>. We use OAuth 1.0a. For deepish technical details of the flow <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-1.0-Server">see here</a><br />
</p>
</div>
</div>
<div class="hidden-xs col-sm-1"></div>
</div>
<div class="row">
<div class="hidden-xs col-sm-1"></div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item4" class="collapsed main-faq-button">
<h2>Where can I read the API documentation?</h2>
<p id="main-faq-item4" class="collapse">
Please use the <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">API Explorer</a>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item5" class="collapsed main-faq-button">
<h2>How can I use the example customer data?</h2>
<p id="main-faq-item5" class="collapse">
You will need to login to the API as a sandbox customer. You can do this using the API Explorer, or any REST client. You can find some example credentials <a class="example_sandbox_credentials_link" data-lift="WebUI.exampleSandboxCredentialsLink" href="https://github.com/OpenBankProject/OBP-API/wiki/">here</a>.</p>
</div>
</div>
<div class="hidden-xs col-sm-1"></div>
</div>
<div class="row">
<div class="hidden-xs col-sm-1"></div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item6" class="collapsed main-faq-button">
<h2>Where does the data come from?</h2>
<p id="main-faq-item6" class="collapse faq-data-text" data-lift="WebUI.faqDataText">Text is replaced</p>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div data-toggle="collapse" data-target="#main-faq-item7" class="collapsed main-faq-button">
<h2>Where can i get more information and support?</h2>
<p id="main-faq-item7" class="collapse">
Please refer to our <a class="faq-link" data-lift="WebUI.faqLink" href="" target="_blank">FAQ</a>, <a class="faq-link" href="https://github.com/OpenBankProject/OBP-API/wiki/Glossary" target="_blank">Glossary</a>, join our <a class="faq-link" href="https://slack.openbankproject.com" target="_blank">Slack channels</a> or email us at <a class="faq-email" data-lift="WebUI.faqEmail" href="">contact@openbankproject.com</a></p>
</div>
</div>
<div class="hidden-xs col-sm-1"></div>
</div>
</div>
<div id="main-start_building">
<h1>Get started building your application using this sandbox now, register for a developer key</h1>
<div class="green-button">
<h1>Get started building your application using this sandbox now</h1>
<div class="bigbutton">
<a href="/consumer-registration">Get your API key</a>
</div>
</div>
<div id="main-partners" class="lift:WebUI.createMainPartners">
<a href="">
<img src="" alt="">
</a>
</div>
<div id="main-partners" class="lift:WebUI.createMainPartners">
<a href="">
<img src="" alt="">
</a>
</div>

6
src/main/webapp/media/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

201
src/main/webapp/media/css/responsive_login.css
View File

@ -1,201 +0,0 @@
body {
min-width: 320px;
}
.signup {
line-height: 26px;
}
input, input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.account-in-content form.login .button .submit, .account-in-content form.login .button .signup {
padding: 0 20px;
height: 34px;
line-height: 34px;
}
.account-in-content form.login .field.buttons {
float: left;
width: 100%;
height: auto;
min-height: 1px;
overflow: hidden;
margin: 10px 0 20px;
height: 36px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.account-in-content form.login .field.buttons .button-field:last-child {
margin: 0;
}
@media all and (max-width: 1070px) {
#logo-left, #logo-right {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
width: 611px;
}
#logo-right {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
width: 156px;
}
#wrapper {
padding: 0;
}
}
@media all and (max-width: 767px) {
#logo-left, #logo-right {
max-width: 500px;
}
#logo-left img, #logo-right img {
max-width: 500px;
height: auto;
}
#nav {
padding: 4px 15px 0;
float: left;
width: 100%;
height: auto;
min-height: 1px;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
height: 90%;
}
#nav ul a {
padding: 8px 18px 10px;
border-radius: 0 0 0 0;
font-size: 15px;
}
#nav .nav-login-state-item {
margin: 3px 0 0 0;
}
#nav .nav-login-state-item a {
padding-right: 0;
}
#userAccess {
padding: 0;
}
.account {
max-width: 70%;
min-width: 70%;
margin: 0 auto;
min-width: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 10px;
font-size: 22px;
}
#authorizeSection {
padding: 0;
max-width: 100%;
width: 100%;
margin-top: 0;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#authorizeSection form.login {
width: 100%;
}
.account-in-content form.login .field input {
height: 50px;
padding: 0 10px;
font-size: 20px;
margin-bottom: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.account-in-content form.login .field .forgot {
float: right;
margin: 1px 6px 20px 0;
padding: 2px 0 0;
font-size: 17px;
width: 100%;
color: white;
}
#footer {
display: block;
height: auto;
min-height: 1px;
overflow: hidden;
width: 100%;
font-size: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
margin: 30px 0 10px;
float: left;
}
#footer div:last-child {
margin: 10px 0;
position: relative;
}
#footer div:last-child:before {
display: block;
content: '';
width: 10%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
}
#footer div:last-child a {
display: block;
width: 100%;
text-align: center;
}
}
@media all and (max-width: 500px) {
#logo-left, #logo-right {
max-width: 320px;
}
#logo-left img, #logo-right img {
max-width: 320px;
height: auto;
}
.navitem {
display: none;
}
.navitem.navitem-home {
display: block;
}
.account {
max-width: 100%;
width: 100%;
}
}

1400
src/main/webapp/media/css/website.css
View File

File diff suppressed because it is too large Load Diff

7
src/main/webapp/media/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

80
src/main/webapp/media/js/website.js
View File

@ -1,57 +1,49 @@
$(document).ready(function() {
//fallback for html5 placeholder
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
//fallback for html5 placeholder
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
// FAQ shenanigans
$('#main-faq .collapse h2').click(function() {
var answer = $(this).next();
var listItem = $(this).parent();
if (listItem.attr("class").indexOf("minus") >= 0) {
answer.hide();
listItem.removeClass("minus").addClass("plus");
} else {
answer.show();
listItem.removeClass("plus").addClass("minus");
}
});
// Enforce check of Terms and Conditions (if existing) on register form
$('.signupSection #signupForm').submit(function() {
var agreeTerms = $('.signupSection #signupForm #agree-terms-input');
// Enforce check of Terms and Conditions (if existing) on signup form
$('#signup form').submit(function() {
var agreeTerms = $('#signup #signup-agree-terms input');
if (agreeTerms.length > 0) {
if (!agreeTerms.prop('checked')) {
var msg = 'Please agree to the Terms & Conditions';
$('.signupSection .signup-error #signup').html(msg);
$('#signup #signup-error #error').html(msg);
$('#signup #signup-error').removeClass('hide');
return false;
}
}
return true;
});
// Show sign up errors - FIXME: Change backend to (not) show errors
var signupError = $('#signup #signup-error #error');
if (signupError.length > 0 && signupError.html().length > 0) {
signupError.parent().removeClass('hide');
}
});

88
src/main/webapp/oauth/authorize.html
View File

@ -1,50 +1,40 @@
<div id="main" class="lift:surround?with=default;at=content">
<!-- Valid Token -->
<div class="lift:OAuthAuthorisation.tokenCheck" id="authorizeSection">
<div id="userAccess">
<div class="account account-in-content">
<div class="login-error">Incorrect username or password</div>
<div id="authorise" data-lift="surround?with=default;at=content">
<div data-lift="OAuthAuthorisation.tokenCheck">
<div class="authorise-token-success">
<div class="login-error">Incorrect username or password</div>
<div data-lift="Login.customiseLogin">
<div id="login-special-instructions">Special Instructions</div>
The application <span id="applicationName"> web app </span> is
asking for access to your account data.
<!-- LOGGED OUT -->
<div data-lift="Login.customiseLogin">
<link href="/media/css/responsive_login.css" rel="stylesheet" property="stylesheet" type="text/css" />
<form class="login" action="/user_mgt/login" method="post">
<div data-lift="Login.openIdConnectScripts" class="openid_scripts" id="openid_scripts"></div>
<div class="login_special_instructions" id="login_special_instructions">Special Instructions</div>
<div class="field username">
<input class="username" type="text" placeholder="Username" name="username" tabindex=1 autofocus autocomplete="off"/>
</div>
<div class="field password">
<input class="password" type="password" placeholder="Password" name="password" tabindex=2 autocomplete="off"/>
</div>
<div id="recoverPasswordLink" class="field password" style="height: 1em;">
<a href="/user_mgt/lost_password" class="forgot" tabindex=3>Forgot your password?</a>
</div>
<div class="field buttons">
<div class="button button-field">
<input class="submit" type="submit" value="Login" tabindex=4 name="submitButton"/>
</div>
<div id="SignUpLink" class="button button-field" style="margin-left: auto;">
<a href="/user_mgt/sign_up" class="signup" tabindex=6>Register</a>
</div>
</div>
</form>
<div data-lift="Login.openIdConnectButton">
<div class="field buttons">
<div class="button button-field">
<div class="openid_button" id="openid_button"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="verifierBloc">
<div>Please go back to the application where you come from and enter the following code: </div>
<div id="verifier">123123213</div>
</div>
<div id="errorMessage">Error message</div>
</div>
</div>
<h1>The application <span id="applicationName">app</span> is asking for access to your data.</h1>
<form class="login" action="/user_mgt/login" method="post">
<div data-lift="Login.openIdConnectScripts" id="openid_scripts"></div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Username" name="username" tabindex=1 autofocus autocomplete="off"/>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password" name="password" tabindex=2 autocomplete="off"/>
</div>
<div class="row">
<div class="col-xs-6">
<input class="btn btn-default" type="submit" value="Login" tabindex="3" />
</div>
<div class="col-xs-6">
<a href="/user_mgt/sign_up" id="authorise-signup" class="btn btn-default pull-right authorise-button" tabindex="4">Sign up</a>
</div>
</div>
<a href="/user_mgt/lost_password" id="authorise-recover-password" tabindex="5">Recover password</a>
</form>
<div data-lift="Login.openIdConnectButton">
<div id="openid_button"></div>
</div>
</div>
<div id="verifierBloc">
<div>Please go back to the application where you come from and enter the following code: </div>
<div id="verifier">123123213</div>
</div>
</div>
<div id="errorMessage">Error message</div>
</div>
</div>

52
src/main/webapp/oauth/thanks.html
View File

@ -1,53 +1,17 @@
<!--
Open Bank Project - API
Copyright (C) 2011-2017, TESOBE Ltd.
<div id="authorise" data-lift="surround?with=default;at=content">
<div data-lift="OAuthWorkedThanks.thanks" id="oauth-done-thanks">
<h1>You have been authenticated!</h1>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Email: contact@tesobe.com
TESOBE Ltd.
Osloer Strasse 16/17
Berlin 13359, Germany
This product includes software developed at
TESOBE (http://www.tesobe.com/)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title class="lift:Menu.title">Open Bank Project: %*%</title>
<link href="/media/css/website.css?20140404" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/media/js/website.js" type="text/javascript"></script>
</head>
<body class="lift:surround?with=default;at=content">
<div class="lift:OAuthWorkedThanks.thanks" id="oauth-done-thanks">
<div id="manualRedirect">
<div id="manual-redirect">
Please click <a id="redirect-link" href="">here</a> to be redirected.</noscript>
</div>
<p><br>Thank you, you have been authenticated.<br>
The requesting application should have received an ok and you may now close this window.</p>
<p>
The requesting application should have received an ok and you may now close this window.
</p>
<script class="redirect-script" type="text/javascript">
$('#manualRedirect').hide(); //don't need the manual link if js is enabled
window.location.assign($('#redirect-link').attr('href'));
</script>
</div>
</body>
</html>
</div>

60
src/main/webapp/templates-hidden/_login.html
View File

@ -1,40 +1,32 @@
<div id="authorizeSection" class="loginSection" xmlns:user="">
<div id="userAccess">
<div class="account account-in-content">
<div class="login-error"><span class="lift:Msg?id=login&errorClass=error"/></div>
<!-- LOGGED OUT -->
Please login with your username.
<div data-lift="Login.customiseLogin">
<link href="/media/css/responsive_login.css" rel="stylesheet" property="stylesheet" type="text/css" />
<form class="login" action="/user_mgt/login" method="post">
<div data-lift="Login.openIdConnectScripts" class="openid_scripts" id="openid_scripts"></div>
<div class="login_special_instructions" id="login_special_instructions">Special Instructions</div>
<div class="field username">
<input class="username" type="text" placeholder="Username" name="username" tabindex=1 autofocus autocomplete="off"/>
</div>
<div class="field password">
<input class="password" type="password" placeholder="Password" name="password" tabindex=2 autocomplete="off"/>
</div>
<div id="recoverPasswordLink" class="field password" style="height: 1em;">
<a href="/user_mgt/lost_password" class="forgot" tabindex=3>Forgot your password?</a>
</div>
<div class="field buttons">
<div class="button button-field">
<user:submit/>
</div>
<div id="SignUpLink" class="button button-field" style="margin-left: auto;">
<a href="/user_mgt/sign_up" class="signup" tabindex=6>Register</a>
</div>
</div>
</form>
<div data-lift="Login.openIdConnectButton">
<div class="field buttons">
<div class="button button-field">
<div class="openid_button" id="openid_button"></div>
</div>
<div id="authorise">
<div class="login-error"><span data-lift="Msg?id=login&errorClass=error"/></div>
<div data-lift="Login.customiseLogin">
<h1>Please login with your username</h1>
<div id="login-special-instructions">Special Instructions</div>
<form class="login" action="/user_mgt/login" method="post">
<div data-lift="Login.openIdConnectScripts" id="openid_scripts"></div>
<div class="form-group">
<input class="form-control" id="username" type="text" placeholder="Username" name="username" tabindex="1" autofocus autocomplete="off"/>
</div>
<div class="form-group">
<input class="form-control" id="password" type="password" placeholder="Password" name="password" tabindex="2" autocomplete="off"/>
</div>
<div class="row">
<div class="col-xs-6">
<div id="authorise-submit" class="authorise-button" tabindex="3">
<!-- Would be nice to have proper HTML here -->
<user:submit />
</div>
</div>
<div class="col-xs-6">
<a href="/user_mgt/sign_up" id="authorise-signup" class="btn btn-default pull-right authorise-button" tabindex="4">Sign up</a>
</div>
</div>
<a href="/user_mgt/lost_password" id="authorise-recover-password" tabindex="5">Recover password</a>
</form>
<div data-lift="Login.openIdConnectButton">
<div id="openid_button"></div>
</div>
</div>
</div>

258
src/main/webapp/templates-hidden/default.html
View File

@ -24,130 +24,158 @@ Berlin 13359, Germany
TESOBE (http://www.tesobe.com/)
by
Simon Redfern : simon AT tesobe DOT com
Stefan Bethge : stefan AT tesobe DOT com
Everett Sochowski : everett AT tesobe DOT com
Ayoub Benali: ayoub AT tesobe DOT com
Sebastian Henschel: sebastian AT tesobe DOT com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title data-lift="WebUI.pageTitle">Open Bank Project: </title>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Webapp of the Open Bank Project API">
<meta name="keywords" content="OBP, Open Bank Project, API, bank, fintech">
<meta name="author" content="TESOBE">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title data-lift="WebUI.pageTitle">Open Bank Project: </title>
<link href="/media/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/media/css/toastr.min.css" rel="stylesheet" type="text/css" />
<link href="/media/css/cookies-consent.css" rel="stylesheet">
<link id="main_style_sheet" data-lift="WebUI.mainStyleSheet" href="/media/css/website.css" rel="stylesheet" type="text/css" />
<link id="override_style_sheet" data-lift="WebUI.overrideStyleSheet" href="" rel="stylesheet" type="text/css" />
<link id="main_style_sheet" data-lift="WebUI.mainStyleSheet" href="/media/css/website.css" rel="stylesheet" type="text/css" />
<link id="override_style_sheet" data-lift="WebUI.overrideStyleSheet" href="" rel="stylesheet" type="text/css" />
<link href="/media/css/cookies-consent.css" rel="stylesheet">
<script src="/media/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/js/website.js" type="text/javascript"></script>
<script src="/media/js/toastr.min.js" type="text/javascript"></script>
<script src="/media/js/cookies-consent.js"></script>
</head>
<body id="page_init">
<div id="cookies-consent" data-lift="WebUI.cookieConsent">
We use cookies to support session management.
<input id="clickMe"/>
</div>
<script id="jquery" src="/media/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/js/website.js" type="text/javascript"></script>
<script src="/media/js/toastr.min.js" type="text/javascript"></script>
<script src="/media/js/cookies-consent.js"></script>
<link href="/media/css/toastr.min.css" rel="stylesheet"/>
</head>
<body id="page_init">
<div id="cookies-consent" class="lift:WebUI.cookieConsent">
We use cookies to support session management.
<input id="clickMe"/>
</div>
<div class="container">
<header>
<div id="header-decoration"></div>
<div id="background">
<div id="wrapper">
<header id="header">
<div id="header-decoration"></div>
<div id="cookie-ipaddress-concurrent-logins" data-lift="WebUI.concurrentLoginsCookiesCheck"></div>
<div id="cookie-ipaddress-concurrent-logins" class="lift:WebUI.concurrentLoginsCookiesCheck"></div>
<div id="logo-left" class="lift:WebUI.headerLogoLeft">
<a href="/"><img src="" alt=""></a>
</div>
<div id="top-text" class="lift:WebUI.topText">
This is the top text
</div>
<div id="top-text" data-lift="WebUI.topText"></div>
<div class="row">
<div class="col-xs-12 col-sm-1"></div>
<div class="col-xs-12 col-sm-5">
<div class="logo hidden-xs" id="logo-left" data-lift="WebUI.headerLogoLeft">
<a href="/"><img src="" alt="Logo left"></a>
</div>
<div class="visible-xs">
<div class="logo-xs" id="logo-left-xs" data-lift="WebUI.headerLogoLeft">
<a href="/"><img src="" alt="Logo left"></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div class="hidden-xs">
<div class="logo" id="logo-right" data-lift="WebUI.headerLogoRight">
<a href="/"><img src="" alt="Logo right"></a>
</div>
</div>
<div class="visible-xs">
<div class="logo-xs" id="logo-right-xs" data-lift="WebUI.headerLogoRight">
<a href="/"><img src="" alt="Logo right"></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-1"></div>
</div>
<div id="logo-right" class="lift:WebUI.headerLogoRight">
<a href="/"><img src="" alt=""></a>
</div>
<div id="messages-container" class="lift:Msgs"></div>
<script>
$(function() {
toastr.options.timeOut = 3000;
if(notice = $("#lift__noticesContainer___error").text()) {
toastr.error(notice)
}
else if(notice = $("#lift__noticesContainer__").text()) {
toastr.success(notice)
}
})
</script>
</lift:Msgs>
</header>
<nav id="nav">
<ul>
<li class="lift:Nav.item?name=Home navitem navitem-home">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li class="lift:Nav.item?name=Consumer%20Registration&showEvenIfRestricted=true navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li class="lift:Nav.item?name=Metrics navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li class="lift:Nav.item?name=Connect navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li class="lift:Nav.item?name=Sandbox%20Account%20Creation&showEvenIfRestricted=true navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<!-- login state -->
<li class="lift:Nav.item?name=Login navitem nav-login-state-item">
<!-- LOGGED OUT -->
<div class="lift:Login.loggedOut">
<a href="#" class="navlink login">Login</a>
</div>
</li>
<li class="navitem nav-login-state-item">
<!-- LOGGED IN -->
<div id="admin-logout" class="lift:Login.adminLogout">
admin <span id="admin-username">NAME</span>. <a id="admin-logout-clickme" href="#">Logout</a>
</div>
<div class="lift:Login.loggedIn">
<div class="profile-info">
<span class="username">username</span>&nbsp;<a href="" class="logout">Logout</a>
</div>
</div>
</li>
</ul>
</nav>
<section id="content">
<lift:bind name="content"/>
The main content gets bound here
</section>
<footer id="footer">
<div id="copyright">
<a href="http://openbankproject.com">Open Bank Project</a> is &copy;2011-2017 <a href="http://tesobe.com">TESOBE</a> and distributed under the AGPL and commercial licenses.
</div>
<div>
<a href="http://twitter.com/#!/OpenBankProject">Twitter</a> |
<a href="https://github.com/OpenBankProject/OBP-API/">Github</a> |
<a class="api-documentation-link lift:WebUI.apiDocumentationLink" href="">API Documentation</a> |
<a class="api-explorer-link lift:WebUI.apiExplorerLink" href="">API Explorer</a> |
<a class="sofi-link lift:WebUI.sofiLink" href="">Sofi</a>
</div>
</footer>
<div id="messages-container" data-lift="Msgs"></div>
<script>
$(function() {
toastr.options.timeOut = 3000;
if(notice = $("#lift__noticesContainer___error").text()) {
toastr.error(notice)
}
else if(notice = $("#lift__noticesContainer__").text()) {
toastr.success(notice)
}
})
</script>
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li data-lift="Nav.item?name=Home" class="navitem navitem-home">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li data-lift="Nav.item?name=Consumer%20Registration&showEvenIfRestricted=true" class="navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li data-lift="Nav.item?name=Metrics" class="navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li data-lift="Nav.item?name=Connect" class="navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
<li data-lift="Nav.item?name=Sandbox%20Account%20Creation&showEvenIfRestricted=true" class="navitem">
<a class="navlink" href="#">Link name. Has class "selected" if it's the current page.</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- login state -->
<li data-lift="Nav.item?name=Login" class="navitem">
<!-- LOGGED OUT -->
<p class="navbar-btn">
<a href="/user_mgt/sign_up" class="btn btn-default">Sign up</a>
<a data-lift="Login.loggedOut" href="#" class="btn btn-default login">Login</a>
</p>
</li>
<li class="navitem">
<!-- LOGGED IN -->
<p class="navbar-btn"><a data-lift="Login.loggedIn" href="#" class="btn btn-default logout">Logout <span id="username">username</span></a></p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<footer2 id="footer2">
<div id="footer2-logo-left" class="lift:WebUI.footer2LogoLeft">
<a href="/"><img src="" alt=""></a>
</div>
<section id="content">
<lift:bind name="content"/>
The main content gets bound here
</section>
<div id="footer2-middle-text" class="lift:WebUI.footer2MiddleText">
This is the footer2 middle text
</div>
</footer2>
</div>
</div>
</body>
</html>
<footer>
<div id="copyright">
<a href="http://openbankproject.com">Open Bank Project</a> is &copy;2011-2017 <a href="http://tesobe.com">TESOBE</a> and distributed under the AGPL and commercial licenses.
</div>
<div>
<a href="http://twitter.com/#!/OpenBankProject">Twitter</a> |
<a href="https://github.com/OpenBankProject/OBP-API/">Github</a> |
<a class="api-documentation-link" data-lift="WebUI.apiDocumentationLink" href="">API Documentation</a> |
<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">API Explorer</a> |
<a class="sofi-link" data-lift="WebUI.sofiLink" href="">Sofi</a>
</div>
</footer>
<div id="footer2">
<span id="footer2-logo-left" data-lift="WebUI.footer2LogoLeft">
<a href="/"><img src="" alt=""></a>
</span>
<span id="footer2-middle-text" data-lift="WebUI.footer2MiddleText">
This is the footer2 middle text
</span>
</div>
</div>
</body>
</html>