[FOLLOWUP][TASK] New Login Screen
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / Templates / Login.html
1 <div class="typo3-login">
2 <div class="typo3-login-container">
3 <div class="typo3-login-wrap">
4 <div class="panel panel-lg panel-login">
5 <div class="panel-body">
6 <div class="typo3-login-logo">
7 <img src="{logo}" class="typo3-login-image" />
8 </div>
9 <f:render section="{formType}" arguments="{_all}" />
10 </div>
11 <f:render section="loginNews" arguments="{_all}" />
12 <div class="panel-footer">
13 <div class="login-copyright-wrap">
14 <a href="#loginCopyright" class="typo3-login-copyright-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="loginCopyright">
15 <span><f:translate key="{labelPrefixPath}copyright.link" /></span>
16 <img src="{images.typo3}" alt="{f:translate(key: '{labelPrefixPath}typo3.logo')}" width="70" height="20" />
17 </a>
18 <div id="loginCopyright" class="collapse">
19 <div class="typo3-login-copyright-text">
20 <p>
21 <f:format.raw>{copyright}</f:format.raw>
22 </p>
23 <ul class="list-unstyled">
24 <li><a href="http://typo3.org" target="_blank" class="t3-login-link-typo3"><i class="fa fa-external-link"></i> TYPO3.org</a></li>
25 <li><a href="http://typo3.org/donate/" target="_blank" class="t3-login-link-donate"><i class="fa fa-external-link"></i> <f:translate key="{labelPrefixPath}labels.donate" /></a></li>
26 </ul>
27 </div>
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34 </div>
35
36
37 <f:section name="loginForm">
38 <f:if condition="{hasLoginError}">
39 <div class="t3js-login-error" id="t3-login-error">
40 <div class="alert alert-danger">
41 <strong><f:translate key="{labelPrefixPath}error.login.title" /></strong>
42 <p><f:translate key="{labelPrefixPath}error.login.description" /></p>
43 </div>
44 </div>
45 </f:if>
46 <noscript>
47 <f:be.infobox message="{f:translate(key: '{labelPrefixPath}error.javascript')}" state="2" />
48 </noscript>
49 <div class="hidden t3js-login-error-nocookies">
50 <f:be.infobox message="{f:translate(key: '{labelPrefixPath}error.cookies')}" state="2" />
51 </div>
52 <div class="typo3-login-form t3js-login-formfields">
53 <f:format.raw>{formTag}</f:format.raw>
54 <f:if condition="{interfaceSelector}">
55 <div class="form-group t3js-login-interface-section" id="t3-login-interface-section">
56 <div class="form-control-wrap">
57 <f:format.raw>{interfaceSelector}</f:format.raw>
58 </div>
59 </div>
60 </f:if>
61 <div class="form-group t3js-login-username-section" id="t3-login-username-section">
62 <div class="form-control-wrap">
63 <div class="form-control-holder">
64 <input type="text" id="t3-username" name="username" value="{presetUsername}" placeholder="{f:translate(key: '{labelPrefixPath}labels.username')}" class="form-control input-login t3js-clearable t3js-login-username-field" autofocus="autofocus" required="required">
65 <div class="form-notice-capslock hidden t3js-login-alert-capslock">
66 <img src="{images.capslock}" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
67 </div>
68 </div>
69 </div>
70 </div>
71 <div class="form-group t3js-login-password-section" id="t3-login-password-section">
72 <div class="form-control-wrap">
73 <div class="form-control-holder">
74 <input type="password" id="t3-password" name="p_field" value="{presetPassword}" placeholder="{f:translate(key: '{labelPrefixPath}labels.password')}" class="form-control input-login t3js-clearable t3js-login-password-field" required="required">
75 <div class="form-notice-capslock hidden t3js-login-alert-capslock">
76 <img src="{images.capslock}" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
77 </div>
78 </div>
79 </div>
80 </div>
81 <f:if condition="{isOpenIdLoaded}">
82 <div class="form-group hidden t3js-login-openid-section" id="t3-login-openid_url-section">
83 <div class="input-group">
84 <input type="text" id="openid_url" name="openid_url" value="{presetOpenId}" placeholder="{f:translate(key: '{labelPrefixPath}labels.openId')}" class="form-control input-login t3js-clearable t3js-login-openid-field" />
85 <div class="input-group-addon">
86 <span class="fa fa-openid"></span>
87 </div>
88 </div>
89 </div>
90 </f:if>
91 <div class="form-group" id="t3-login-submit-section">
92 <button class="btn btn-block btn-login t3js-login-submit" id="t3-login-submit" type="submit" name="commandLI" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {f:translate(key: '{labelPrefixPath}login_process')}" autocomplete="off">
93 <f:translate key="{labelPrefixPath}labels.submitLogin" />
94 </button>
95 </div>
96 <f:if condition="{isOpenIdLoaded}">
97 <ul class="list-unstyled typo3-login-links">
98 <li>
99 <a class="t3js-login-switch-to-openid">
100 <i class="fa fa-fw fa-openid"></i> <span><f:translate key="{labelPrefixPath}labels.switchToOpenId" /></span>
101 </a>
102 <a class="t3js-login-switch-to-default hidden">
103 <i class="fa fa-fw fa-key"></i> <span><f:translate key="{labelPrefixPath}labels.switchToDefault" /></span>
104 </a>
105 </li>
106 </ul>
107 </f:if>
108 </form>
109 </div>
110 </f:section>
111
112
113 <f:section name="logoutForm">
114 <form action="index.php" method="post" name="loginform">
115 <input type="hidden" name="login_status" value="logout" />
116 <div class="t3-login-box-body">
117 <div class="t3-login-logout-form">
118 <div class="t3-login-username">
119 <div class="t3-login-label t3-username">
120 <f:translate key="{labelPrefixPath}labels.username" />
121 </div>
122 <div class="t3-username-current">
123 {backendUser.username}
124 </div>
125 </div>
126 <f:if condition="{showInterfaceSelector}">
127 <div class="t3-login-interface">
128 <div class="t3-login-label t3-interface-selector">
129 <f:translate key="{labelPrefixPath}labels.interface" />
130 </div>
131 <f:format.raw>{interfaceSelectorJump}</f:format.raw>
132 </div>
133 </f:if>
134 <input type="hidden" name="p_field" value="" />
135 <input class="btn btn-block btn-lg" type="submit" name="commandLO" value="{f:translate(key: '{labelPrefixPath}labels.submitLogin')}" id="t3-login-submit" />
136 </div>
137 </div>
138 </form>
139 </f:section>
140
141
142 <f:section name="loginNews">
143 <f:if condition="{loginNewsItems}">
144 <div class="panel-carousel carousel slide t3js-login-news-carousel" id="loginNews" data-interval="0" data-ride="carousel">
145 <div class="carousel-inner" role="listbox">
146 <f:for each="{loginNewsItems}" as="item" iteration="loginNewsIterator">
147 <div class="item{f:if(condition: loginNewsIterator.isFirst,then: ' active')}">
148 <h3 class="typo3-login-news-heading">{item.header}</h3>
149 <f:format.html>{item.content}</f:format.html>
150 <span class="text-muted">{item.date}</span>
151 </div>
152 </f:for>
153 </div>
154 <a class="left typo3-login-carousel-control" href="#loginNews" role="button" data-slide="prev">
155 <i class="fa fa-angle-left"></i>
156 <span class="sr-only"><f:translate key="{labelPrefixPath}labels.previous" /></span>
157 </a>
158 <a class="right typo3-login-carousel-control" href="#loginNews" role="button" data-slide="next">
159 <i class="fa fa-angle-right"></i>
160 <span class="sr-only"><f:translate key="{labelPrefixPath}labels.next" /></span>
161 </a>
162 </div>
163 </f:if>
164 </f:section>