github.com/cozy/cozy-stack@v0.0.0-20240603063001-31110fa4cae1/assets/templates/login.html (about) 1 <!DOCTYPE html> 2 <html lang="{{.Locale}}"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="refresh" content="3600"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="theme-color" content="#fff"> 8 <title>{{.TemplateTitle}}</title> 9 <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css" .ContextName}}"> 10 <link rel="stylesheet" href="{{asset .Domain "/css/cozy-bs.min.css" .ContextName}}"> 11 <link rel="stylesheet" href="{{asset .Domain "/styles/theme.css" .ContextName}}"> 12 <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}"> 13 {{.Favicon}} 14 <link rel="preload" href="/assets/icons/check.svg" as="image"> 15 </head> 16 <body class="cirrus theme-inverted"> 17 {{if .MagicLink}} 18 <form id="magic-link-form" method="POST" action="/auth/magic_link" class="d-contents"> 19 {{else}} 20 <form id="login-form" method="POST" action="/auth/login" class="d-contents" data-iterations="{{.Iterations}}" data-salt="{{.Salt}}"> 21 {{end}} 22 <input id="redirect" type="hidden" name="redirect" value="{{.Redirect}}" /> 23 <input id="csrf_token" type="hidden" name="csrf_token" value="{{.CSRF}}" /> 24 <input id="trusted-device-token" type="hidden" name="trusted-device-token" value="" /> 25 <input id="email_verified_code" type="hidden" name="email_verified_code" value="{{.EmailVerifiedCode}}" /> 26 <main class="wrapper"> 27 28 <header class="wrapper-top"> 29 {{if not .MagicLink}} 30 {{if not .BottomNavBar}} 31 <p class="banner caption small-md fst-italic"> 32 <span class="icon icon-answer"></span> 33 <strong>{{t "Login Password best practice"}}</strong> 34 {{t "Login Password tip"}} 35 </p> 36 {{end}} 37 {{end}} 38 <a href="https://cozy.io/" class="btn p-2 d-sm-none"> 39 <img src="{{asset .Domain "/images/logo-dark.svg"}}" alt="Cozy Cloud" class="logo" /> 40 </a> 41 </header> 42 43 <div class="d-flex flex-column align-items-center"> 44 <img src="/public/avatar" alt="" class="avatar my-3 border border-primary border-2 rounded-circle" /> 45 <h1 class="h4 h2-md mb-0 text-center">{{.Title}}</h1> 46 <p class="mb-4 mb-md-5 text-muted">{{.Domain}}</p> 47 48 {{if .FranceConnect}} 49 <div class="alert alert-primary text-center mb-4 mb-md-5"> 50 <p class="small w-100"> 51 FranceConnect est la solution proposée par l’État pour sécuriser et 52 simplifier la connexion à vos services en ligne. 53 </p> 54 <a href="/oidc/franceconnect" class="d-inline-block mb-2"> 55 <img src="{{asset .Domain "/images/franceconnect.svg"}}" alt="S’identifier avec FranceConnect" /> 56 </a> 57 <p class="w-100 small mb-0"> 58 <a href="https://franceconnect.gouv.fr/">Qu’est-ce que FranceConnect ?</a> 59 </p> 60 </div> 61 <div class="horizontal-separator mb-4 mb-md-5">ou</div> 62 {{end}} 63 64 {{if .MagicLink}} 65 <button id="magic-link-submit" class="btn btn-outline-info btn-md-lg w-100" type="submit"> 66 <img src="{{asset .Domain "/icons/email.svg"}}" alt="" /> 67 <span>{{t "Magic Link Submit"}}</span> 68 </button> 69 {{else}} 70 <div id="login-field" class="input-group form-floating has-validation w-100"> 71 <input type="password" class="form-control form-control-md-lg" id="password" name="passphrase" autofocus autocomplete="current-password" spellcheck="false" /> 72 <label for="password">{{t "Login Password field"}}</label> 73 <button id="password-visibility-button" class="btn btn-outline-info" 74 type="button" 75 name="password-visibility" 76 data-show="{{t "Login Password show"}}" 77 data-hide="{{t "Login Password hide"}}" 78 title="{{t "Login Password show"}}"> 79 <span id="password-visibility-icon" class="icon icon-eye-closed"></span> 80 </button> 81 {{if .CredentialsError}} 82 <div class="invalid-tooltip mb-1"> 83 <div class="tooltip-arrow"></div> 84 <span class="icon icon-alert bg-danger"></span> 85 {{.CredentialsError}} 86 </div> 87 {{end}} 88 </div> 89 <a href="/auth/passphrase_reset{{if .Redirect}}?redirect={{.Redirect}}{{end}}" class="align-self-start my-3"> 90 {{t "Login Forgot password"}} 91 </a> 92 {{if not .OAuth}} 93 <div class="form-check align-self-start"> 94 <input class="form-check-input" type="checkbox" id="long-run-session" name="long-run-session" checked /> 95 <label class="form-check-label" for="long-run-session"> 96 {{t "Login Long Session"}} 97 </label> 98 </div> 99 {{end}} 100 {{end}} 101 </div> 102 103 <footer class="w-100"> 104 {{if .MagicLink}} 105 106 {{else}} 107 <button id="login-submit" class="btn btn-primary btn-md-lg w-100 my-3 mt-md-5" type="submit"> 108 {{t "Login Submit"}} 109 </button> 110 {{if .BottomNavBar}} 111 <p class="banner caption mt-n1 mb-0 small-md fst-italic fullbleed"> 112 <span class="icon icon-answer reverse-y align-bottom"></span> 113 <strong>{{t "Login Password best practice"}}</strong> 114 {{t "Login Password tip"}} 115 </p> 116 {{end}} 117 {{end}} 118 </footer> 119 120 </main> 121 </form> 122 <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script> 123 {{if .CryptoPolyfill}}<script src="{{asset .Domain "/js/asmcrypto.js"}}"></script>{{end}} 124 <script src="{{asset .Domain "/scripts/password-helpers.js"}}"></script> 125 <script src="{{asset .Domain "/scripts/password-visibility.js"}}"></script> 126 <script src="{{asset .Domain "/scripts/login.js"}}"></script> 127 </body> 128 </html>