synapse-product/synapse/res/username_picker/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Synapse Login</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="card">
      <form method="post" class="form__input" id="form" action="submit">
        <label for="field-username">Please pick your username:</label>
        <input type="text" name="username" id="field-username" autofocus="">
        <input type="submit" class="button button--full-width" id="button-submit" value="Submit">
      </form>
      <!-- this is used for feedback -->
      <div role=alert class="tooltip hidden" id="message"></div>
      <script src="script.js"></script>
    </div>
  </body>
</html>
Implement a username picker for synapse (#8942) The final part (for now) of my work to implement a username picker in synapse itself. The idea is that we allow `UsernameMappingProvider`s to return `localpart=None`, in which case, rather than redirecting the browser back to the client, we redirect to a username-picker resource, which allows the user to enter a username. We then complete the SSO flow (including doing the client permission checks). The static resources for the username picker itself (in https://github.com/matrix-org/synapse/tree/rav/username_picker/synapse/res/username_picker) are essentially lifted wholesale from https://github.com/matrix-org/matrix-synapse-saml-mozilla/tree/master/matrix_synapse_saml_mozilla/res. As the comment says, we might want to think about making them customisable, but that can be a follow-up. Fixes #8876. 2020-12-18 09:19:46 -05:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<title>Synapse Login</title>`
			`<link rel="stylesheet" href="style.css" type="text/css" />`
			`</head>`
			`<body>`
			`<div class="card">`
			`<form method="post" class="form__input" id="form" action="submit">`
			`<label for="field-username">Please pick your username:</label>`
			`<input type="text" name="username" id="field-username" autofocus="">`
			`<input type="submit" class="button button--full-width" id="button-submit" value="Submit">`
			`</form>`
			`<!-- this is used for feedback -->`
			`<div role=alert class="tooltip hidden" id="message"></div>`
			`<script src="script.js"></script>`
			`</div>`
			`</body>`
			`</html>`