Skip to content

Commit f22506c

Browse files
chipolarischipolaris
committed
Refactor anonymous pages to use layout_anonymous template
1 parent 0c562d0 commit f22506c

File tree

4 files changed

+252
-229
lines changed

4 files changed

+252
-229
lines changed

‎src/main/webapp/WEB-INF/template/layout_anonymous.xhtml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml"
3+
xmlns:h="http://java.sun.com/jsf/html"
4+
xmlns:f="http://java.sun.com/jsf/core"
5+
xmlns:ui="http://java.sun.com/jsf/facelets"
6+
xmlns:p="http://primefaces.org/ui"
7+
xmlns:c="http://java.sun.com/jsp/jstl/core"
8+
xmlns:jsf="http://xmlns.jcp.org/jsf"
9+
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
10+
xmlns:sec="http://www.springframework.org/security/tags">
11+
12+
<h:head>
13+
<f:facet name="first">
14+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
15+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
17+
<meta name="apple-mobile-web-app-capable" content="yes" />
18+
</f:facet>
19+
<title><ui:insert name="title">#{msg['application.title']}</ui:insert></title>
20+
21+
<!-- *Note: favicon generated and setup instruction taken from https://favicon.io/favicon-generator/ -->
22+
<link rel="apple-touch-icon" sizes="180x180" href="#{request.contextPath}/favicon_io/apple-touch-icon.png"/>
23+
<link rel="icon" type="image/png" sizes="32x32" href="#{request.contextPath}/favicon_io/favicon-32x32.png"/>
24+
<link rel="icon" type="image/png" sizes="16x16" href="#{request.contextPath}/favicon_io/favicon-16x16.png"/>
25+
<link rel="manifest" href="#{request.contextPath}/favicon_io/site.webmanifest"/>
26+
27+
<h:outputStylesheet library="css" name="primeflex.css"/>
28+
<h:outputStylesheet library="css" name="themes/saga-blue.css"/>
29+
30+
<style>
31+
html, body, h1, h2, h3, h4, h5 {
32+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
33+
}
34+
</style>
35+
36+
</h:head>
37+
38+
<h:body style="margin:0px; background-color:#e8e8e8">
39+
<!-- content -->
40+
<div class="h-screen flex align-items-center justify-content-center">
41+
<ui:insert name="content">
42+
Template
43+
</ui:insert>
44+
</div>
45+
</h:body>
46+
</html>

‎src/main/webapp/forgotPassword.xhtml‎

Lines changed: 52 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,64 @@
1-
21
<!DOCTYPE html>
3-
<html xmlns="http://www.w3.org/1999/xhtml"
2+
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
43
xmlns:h="http://java.sun.com/jsf/html"
54
xmlns:f="http://java.sun.com/jsf/core"
65
xmlns:ui="http://java.sun.com/jsf/facelets"
76
xmlns:p="http://primefaces.org/ui"
87
xmlns:c="http://java.sun.com/jsp/jstl/core"
98
xmlns:jsf="http://xmlns.jcp.org/jsf"
109
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
11-
xmlns:sec="http://www.springframework.org/security/tags">
12-
13-
14-
<h:head>
10+
xmlns:sec="http://www.springframework.org/security/tags"
11+
template="/WEB-INF/template/layout_anonymous.xhtml">
12+
13+
<ui:define name="title">
14+
#{msg['forgot.password']}
15+
</ui:define>
16+
17+
<ui:define name="content">
1518

16-
<h:outputStylesheet library="css" name="primeflex.css"/>
17-
<h:outputStylesheet library="css" name="themes/saga-blue.css"/>
18-
19-
</h:head>
19+
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6" style="max-width:45em;">
20+
<div class="text-center mb-5">
21+
<h:link outcome="index">
22+
<p:graphicImage name="logo.png" library="images" alt="Logo"
23+
height="50" styleClass="mb-3"/>
24+
</h:link>
25+
26+
<div class="text-900 text-3xl font-medium mb-3">#{msg['reset.your.password']}</div>
27+
28+
</div>
2029

21-
<h:body>
22-
23-
<div class="h-screen flex align-items-center justify-content-center">
24-
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6 ui-widget">
25-
<div class="text-center mb-5">
26-
<h:link outcome="index">
27-
<p:graphicImage name="logo.png" library="images" alt="Logo"
28-
height="50" styleClass="mb-3"/>
29-
</h:link>
30-
31-
<div class="text-900 text-3xl font-medium mb-3">#{msg['reset.your.password']}</div>
32-
33-
</div>
34-
35-
<div>
36-
37-
<h:form id="passwordResetForm" prependId="false">
38-
39-
<p:messages id="messages" showDetail="true" closable="true" for="passwordResetForm">
40-
<p:autoUpdate/>
41-
</p:messages>
42-
43-
<div class="field">
44-
<p:outputLabel for="passwordResetEmail" styleClass="block text-900 font-medium mb-3">
45-
#{msg['enter.email.to.get.password.reset.link']}
46-
</p:outputLabel>
47-
<p:inputText id="passwordResetEmail" value="#{forgotPassword.passwordResetEmail}" placeholder="#{msg['enter.email']}"
48-
styleClass="w-full" title="#{msg['email']}" validatorMessage="#{msg['invalid.email.format']}">
49-
<!-- use OWASP email regex from https://www.baeldung.com/java-email-validation-regex
50-
"^[a-zA-Z0-9_+&*-]+(?:\\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,7}$"
51-
note: minor changes for use in JSF facelet
52-
escape '&' with '&amp;'
53-
change "\\." to "\." -->
54-
<f:validateRegex pattern="^[a-zA-Z0-9_+&amp;*-]+(?:\.[a-zA-Z0-9_+&amp;*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$"/>
55-
</p:inputText>
56-
<p:message for="passwordResetEmail" id="passwordResetEmailMessage" styleClass="mt-2"/>
57-
</div>
58-
<div class="field">
59-
<p:commandButton ajax="true" styleClass="w-full" value="#{msg['submit']}"
60-
id="resetPasswordSubmitButton" action="#{forgotPassword.resetPassword}" update=":passwordResetForm"/>
61-
</div>
62-
63-
</h:form>
30+
<div>
31+
32+
<h:form id="passwordResetForm" prependId="false">
33+
34+
<p:messages id="messages" showDetail="true" closable="true" for="passwordResetForm">
35+
<p:autoUpdate/>
36+
</p:messages>
37+
38+
<div class="field">
39+
<p:outputLabel for="passwordResetEmail" styleClass="block text-900 font-medium mb-3">
40+
#{msg['enter.email.to.get.password.reset.link']}
41+
</p:outputLabel>
42+
<p:inputText id="passwordResetEmail" value="#{forgotPassword.passwordResetEmail}" placeholder="#{msg['enter.email']}"
43+
styleClass="w-full" title="#{msg['email']}" validatorMessage="#{msg['invalid.email.format']}">
44+
<!-- use OWASP email regex from https://www.baeldung.com/java-email-validation-regex
45+
"^[a-zA-Z0-9_+&*-]+(?:\\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,7}$"
46+
note: minor changes for use in JSF facelet
47+
escape '&' with '&amp;'
48+
change "\\." to "\." -->
49+
<f:validateRegex pattern="^[a-zA-Z0-9_+&amp;*-]+(?:\.[a-zA-Z0-9_+&amp;*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$"/>
50+
</p:inputText>
51+
<p:message for="passwordResetEmail" id="passwordResetEmailMessage" styleClass="mt-2"/>
52+
</div>
53+
<div class="field">
54+
<p:commandButton ajax="true" styleClass="w-full" value="#{msg['submit']}"
55+
id="resetPasswordSubmitButton" action="#{forgotPassword.resetPassword}" update=":passwordResetForm"/>
56+
</div>
57+
58+
</h:form>
6459

65-
</div>
66-
</div>
67-
</div>
68-
69-
</h:body>
60+
</div>
61+
</div>
62+
</ui:define>
7063

71-
</html>
64+
</ui:composition>

‎src/main/webapp/login.xhtml‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,63 @@
11

22
<!DOCTYPE html>
3-
<html xmlns="http://www.w3.org/1999/xhtml"
3+
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
44
xmlns:h="http://java.sun.com/jsf/html"
55
xmlns:f="http://java.sun.com/jsf/core"
66
xmlns:ui="http://java.sun.com/jsf/facelets"
77
xmlns:p="http://primefaces.org/ui"
88
xmlns:c="http://java.sun.com/jsp/jstl/core"
99
xmlns:jsf="http://xmlns.jcp.org/jsf"
1010
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
11-
xmlns:sec="http://www.springframework.org/security/tags">
11+
xmlns:sec="http://www.springframework.org/security/tags"
12+
template="/WEB-INF/template/layout_anonymous.xhtml">
1213

13-
14-
<h:head>
14+
<ui:define name="title">
15+
#{msg['login']}
16+
</ui:define>
1517

16-
<h:outputStylesheet library="css" name="primeflex.css"/>
17-
<h:outputStylesheet library="css" name="themes/saga-blue.css"/>
18+
<ui:define name="content">
1819

19-
</h:head>
20+
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6" style="max-width:45em;">
21+
<div class="text-center mb-5">
22+
<h:link outcome="index">
23+
<p:graphicImage name="logo.png" library="images" alt="Logo"
24+
height="50" styleClass="mb-3"/>
25+
</h:link>
26+
<div class="text-900 text-3xl font-medium mb-3">#{msg['login']}</div>
27+
<span class="text-600 font-medium line-height-3">#{msg['no.account']}?</span>
28+
<h:link outcome="register" styleClass="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
29+
#{msg['register.account']}
30+
</h:link>
31+
</div>
2032

21-
<h:body>
33+
<div>
34+
35+
<h:form prependId="false">
36+
37+
<p:outputLabel for="username" styleClass="block text-900 font-medium mb-2"><i class="pi pi-user"/> #{msg['username']}</p:outputLabel>
38+
<p:inputText id="username" styleClass="w-full mb-3" placeholder="#{msg['enter.username']}"/>
39+
40+
<p:outputLabel for="password" styleClass="block text-900 font-medium mb-2"><i class="pi pi-key"/> #{msg['password']}</p:outputLabel>
41+
<p:inputText id="password" type="password" styleClass="w-full mb-3" placeholder="#{msg['enter.password']}"/>
2242

23-
<div class="h-screen flex align-items-center justify-content-center">
24-
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6 ui-widget">
25-
<div class="text-center mb-5">
26-
<h:link outcome="index">
27-
<p:graphicImage name="logo.png" library="images" alt="Logo"
28-
height="50" styleClass="mb-3"/>
29-
</h:link>
30-
<div class="text-900 text-3xl font-medium mb-3">#{msg['login']}</div>
31-
<span class="text-600 font-medium line-height-3">#{msg['no.account']}?</span>
32-
<h:link outcome="register" styleClass="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
33-
#{msg['register.account']}
34-
</h:link>
35-
</div>
43+
<div class="flex align-items-center justify-content-between mb-6">
44+
<div class="flex align-items-center">
45+
<p:selectBooleanCheckbox id="rememberMe" styleClass="mr-2"/>
46+
<label for="rememberMe">#{msg['remember.me']}</label>
47+
</div>
48+
<h:link outcome="forgotPassword" styleClass="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
49+
#{msg['forgot.password']}
50+
</h:link>
51+
</div>
3652

37-
<div>
38-
39-
<h:form prependId="false">
53+
<p:commandButton ajax="false" value="#{msg['login']}" icon="pi pi-sign-in" styleClass="w-full"/>
54+
55+
</h:form>
4056

41-
<p:outputLabel for="username" styleClass="block text-900 font-medium mb-2"><i class="pi pi-user"/> #{msg['username']}</p:outputLabel>
42-
<p:inputText id="username" styleClass="w-full mb-3" placeholder="#{msg['enter.username']}"/>
43-
44-
<p:outputLabel for="password" styleClass="block text-900 font-medium mb-2"><i class="pi pi-key"/> #{msg['password']}</p:outputLabel>
45-
<p:inputText id="password" type="password" styleClass="w-full mb-3" placeholder="#{msg['enter.password']}"/>
46-
47-
<div class="flex align-items-center justify-content-between mb-6">
48-
<div class="flex align-items-center">
49-
<p:selectBooleanCheckbox id="rememberMe" styleClass="mr-2"/>
50-
<label for="rememberMe">#{msg['remember.me']}</label>
51-
</div>
52-
<h:link outcome="forgotPassword" styleClass="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
53-
#{msg['forgot.password']}
54-
</h:link>
55-
</div>
56-
57-
<p:commandButton ajax="false" value="#{msg['login']}" icon="pi pi-sign-in" styleClass="w-full"/>
58-
59-
</h:form>
57+
</div>
58+
</div>
6059

61-
</div>
62-
</div>
63-
</div>
6460

65-
</h:body>
61+
</ui:define>
6662

67-
</html>
63+
</ui:composition>

0 commit comments

Comments
 (0)