Add core registration html/js

9 years ago · e6363857d0
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,4 @@ media_store/
 build/

 localhost-800*/
 static/client/register/register_config.js
--- a/static/client/register/index.html
+++ b/static/client/register/index.html
@@ -0,0 +1,35 @@
 <html>
 <head>
 <title> Registration </title>
 <link rel="stylesheet" href="style.css">
 <script src="js/recaptcha_ajax.js"></script>
 <script src="register_config.js"></script>
 <script src="js/register.js"></script>
 </head>
 <body onload="matrixRegistration.onLoad()">
 <form id="registrationForm">
 	<div>
        Create account:<br/>
        
        <div style="text-align: center">
        	<input id="desired_user_id" size="32" type="text" placeholder="Matrix ID (e.g. bob)"/>
        	<br/>
        	<input id="pwd1" size="32" type="password" placeholder="Type a password"/>
        	<br/>
        	<input id="pwd2" size="32" type="password" placeholder="Confirm your password"/>
        	<br/>

        	<div id="regcaptcha" />

        	<button style="margin: 10px">Sign up</button>
        </div>

        <div id="serverConfig" ng-show="!wait_3pid_code">
            <label for="homeserver">Home Server:</label> 
            <input id="homeserver" size="32" type="text" placeholder="URL (e.g. http://matrix.org:8080)"/>
            <div class="smallPrint">Your home server stores all your conversation and account data.</div>
        </div>
    </div>
 </form>
 </body>
 </html>
--- a/static/client/register/js/recaptcha_ajax.js
+++ b/static/client/register/js/recaptcha_ajax.js
--- a/static/client/register/js/register.js
+++ b/static/client/register/js/register.js
@@ -0,0 +1,23 @@
 window.matrixRegistration = {};

 var setupCaptcha = function() {
 	if (!window.matrixRegistrationConfig) {
 		return;
 	}
    console.log("Setting up ReCaptcha");
    var public_key = window.matrixRegistrationConfig.recaptcha_public_key;
    if (public_key === undefined) {
        console.error("No public key defined for captcha!");
        return;
    }
    Recaptcha.create(public_key,
    "regcaptcha",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    });
 };

 matrixRegistration.onLoad = function() {
 	setupCaptcha();
 };
--- a/static/client/register/register_config.sample.js
+++ b/static/client/register/register_config.sample.js
@@ -0,0 +1,3 @@
 window.matrixRegistrationConfig = {
  recaptcha_public_key: "YOUR_PUBLIC_KEY"
 };
--- a/static/client/register/style.css
+++ b/static/client/register/style.css
@@ -0,0 +1,52 @@
 html {
    height: 100%;
 }

 body {
    height: 100%;
    font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
    font-size: 12pt;
    margin: 0px;
 }

 h1 {
    font-size: 20pt;
 }

 a:link    { color: #666; }
 a:visited { color: #666; }
 a:hover   { color: #000; }
 a:active  { color: #000; }

 textarea, input {
   font-family: inherit;
   font-size: inherit;
 }

 .smallPrint {
    color: #888;
    font-size: 9pt ! important;
    font-style: italic ! important;
 }

 #recaptcha_area { 
    margin: auto
 }

 #registrationForm {
    text-align: left;
    padding: 1em;
    margin-bottom: 40px;
    display: inline-block;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    
    background-color: #f8f8f8;
    border: 1px #ccc solid;
 }