uim.bootstrap.bs5.demos.examples.signin source code

1 module uim.bootstrap.bs5.demos.examples.signin;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("examples/signin", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Starter Page - Bootstrap 5 Demo",
14           ])
15       .styles(`html,
16 body {
17   height: 100%;
18 }
19 
20 body {
21   display: flex;
22   align-items: center;
23   padding-top: 40px;
24   padding-bottom: 40px;
25   background-color: #f5f5f5;
26 }
27 
28 .form-signin {
29   width: 100%;
30   max-width: 330px;
31   padding: 15px;
32   margin: auto;
33 }
34 .form-signin .checkbox {
35   font-weight: 400;
36 }
37 .form-signin .form-control {
38   position: relative;
39   box-sizing: border-box;
40   height: auto;
41   padding: 10px;
42   font-size: 16px;
43 }
44 .form-signin .form-control:focus {
45   z-index: 2;
46 }
47 .form-signin input["type":"email"] {
48   margin-bottom: -1px;
49   border-bottom-right-radius: 0;
50   border-bottom-left-radius: 0;
51 }
52 .form-signin input["type":"password"] {
53   margin-bottom: 10px;
54   border-top-left-radius: 0;
55   border-top-right-radius: 0;
56 }
57 .bd-placeholder-img {
58         font-size: 1.125rem;
59         text-anchor: middle;
60         -webkit-user-select: none;
61         -moz-user-select: none;
62         user-select: none;
63       }
64 
65       @media (min-width: 768px) {
66         .bd-placeholder-img-lg {
67           font-size: 3.5rem;
68         }
69       }`);
70 		} 
71 			
72     override string content() { 
73 
74 //   <body class="text-center">
75       return 
76 H5Main(["form-signin"],
77   H5Form(
78     H5Img(["mb-4"], ["src":"../assets/brand/bootstrap-logo.svg", "alt":"", "width":"72", "height":"57"]),
79     H5H1(["h3 mb-3 fw-normal"], "Please sign in"),
80     H5Label(["visually-hidden"], ["for":"inputEmail"], "Email address"),
81     BS5InputEmail("inputEmail", ["placeholder":"Email address", "required":"required", "autofocus":"autofocus"]),
82     H5Label(["visually-hidden"], ["for":"inputPassword"], "Password"),
83     BS5InputPassword("inputPassword", ["placeholder":"Password", "required":"required"]),
84     H5Div(["checkbox mb-3"], 
85       H5Label(
86         H5Input(["type":"checkbox", "value":"remember-me"], "Remember me")
87       )
88     ),
89     BS5ButtonSubmit(["w-100", "btn-lg btn-primary"], "Sign in"),
90     H5P(["mt-5 mb-3 text-muted"], "&copy; 2017-2020")
91   )
92 ).toString;
93 
94     }
95   });
96 }
97