Restyle registration page
When first intalling, users will no longer be presented with the option to register as a standalone client. For developer convenience, the standalone form can still be found at chrome-extension://.../register.html Closes #159
This commit is contained in:
lilia
parent
a9cf4bd93e
commit
8ee282b1aa
|
|
@ -127,7 +127,8 @@ module.exports = function(grunt) {
|
|||
sass: {
|
||||
stylesheets: {
|
||||
files: {
|
||||
'stylesheets/manifest.css': 'stylesheets/manifest.scss'
|
||||
'stylesheets/manifest.css': 'stylesheets/manifest.scss',
|
||||
'stylesheets/options.css': 'stylesheets/options.scss'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
|
||||
C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
|
||||
<path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
|
||||
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
|
||||
c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
|
||||
c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036
|
||||
c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623
|
||||
C33.507,24.924,30.161,23.647,30.128,19.784z"/>
|
||||
<path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
|
||||
c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z
|
||||
M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475
|
||||
H49.755z"/>
|
||||
<path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264
|
||||
c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||
c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666
|
||||
c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523
|
||||
c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768
|
||||
s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>
|
||||
<path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264
|
||||
c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||
c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666
|
||||
c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523
|
||||
c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768
|
||||
c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
|
||||
<path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165
|
||||
c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544
|
||||
c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029
|
||||
c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048
|
||||
c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553
|
||||
c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027
|
||||
c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>
|
||||
<path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619
|
||||
c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4
|
||||
v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
|
||||
<path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461
|
||||
c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422
|
||||
c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696
|
||||
c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148
|
||||
c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148
|
||||
c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>
|
||||
<path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85
|
||||
c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059
|
||||
c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>
|
||||
<path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173
|
||||
c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593
|
||||
c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613
|
||||
c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z
|
||||
M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869
|
||||
c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824
|
||||
c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747
|
||||
C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611
|
||||
c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669
|
||||
S47.945,10.892,47.945,10.038z"/>
|
||||
<path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718
|
||||
c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698
|
||||
c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574
|
||||
C53.725,11.882,53.822,11.506,53.822,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019
|
||||
c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513
|
||||
h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029
|
||||
c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>
|
||||
<path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343
|
||||
c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029
|
||||
c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427
|
||||
c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718
|
||||
c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698
|
||||
c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574
|
||||
C76.074,11.882,76.17,11.506,76.17,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65
|
||||
c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319
|
||||
c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688
|
||||
c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z
|
||||
M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184
|
||||
c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>
|
||||
<path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864
|
||||
c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66
|
||||
c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786
|
||||
c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257
|
||||
c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135
|
||||
c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>
|
||||
<path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718
|
||||
c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698
|
||||
c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574
|
||||
C96.064,11.882,96.162,11.506,96.162,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343
|
||||
s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029
|
||||
c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427
|
||||
c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049
|
||||
l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504
|
||||
h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>
|
||||
<path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735
|
||||
c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775
|
||||
c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067
|
||||
c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291
|
||||
c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775
|
||||
c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z
|
||||
M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427
|
||||
c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
188
js/options.js
188
js/options.js
|
|
@ -13,176 +13,52 @@
|
|||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
;(function() {
|
||||
function validateCode() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
if (verificationCode.length == 6) {
|
||||
return verificationCode;
|
||||
}
|
||||
}
|
||||
|
||||
function displayError(error) {
|
||||
$('#error').hide().text(error).addClass('in').fadeIn();
|
||||
}
|
||||
|
||||
'use strict';
|
||||
$(function() {
|
||||
var phoneView = new Whisper.PhoneInputView({el: $('#phone-number-input')});
|
||||
phoneView.render();
|
||||
if (textsecure.registration.isDone()) {
|
||||
$('#complete-number').text(textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]);//TODO: no
|
||||
$('#complete-number').text(
|
||||
textsecure.utils.unencodeNumber(
|
||||
textsecure.storage.getUnencrypted("number_id")
|
||||
)[0]
|
||||
);//TODO: no
|
||||
$('#setup-complete').show().addClass('in');
|
||||
} else {
|
||||
$('#choose-setup').show().addClass('in');
|
||||
|
||||
$('input.number').on('validation', function() {
|
||||
if ($('#number-container').hasClass('valid')) {
|
||||
$('#request-sms, #request-voice').removeAttr('disabled');
|
||||
} else {
|
||||
$('#request-sms, #request-voice').prop('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
|
||||
$('#code').on('change', function() {
|
||||
if (!validateCode())
|
||||
$('#code').addClass('invalid');
|
||||
else
|
||||
$('#code').removeClass('invalid');
|
||||
});
|
||||
|
||||
$('#request-voice').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationVoice(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#request-sms').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationSMS(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#new-account').click(function(){
|
||||
$('#choose-setup').fadeOut(function() {
|
||||
$('#single-device').addClass('in').fadeIn();
|
||||
});
|
||||
|
||||
$('#single-device .back').click(function() {
|
||||
$('#single-device').fadeOut(function() {
|
||||
$('#choose-setup').addClass('in').fadeIn();
|
||||
$('input.number').removeClass('invalid');
|
||||
});
|
||||
});
|
||||
|
||||
$('#single-device form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
var verificationCode = validateCode();
|
||||
if (number && verificationCode) {
|
||||
$('#verifyCode').prop('disabled', 'disabled');
|
||||
$('#verify *').hide();
|
||||
$('#verify').show().addClass('in');
|
||||
$('#verify2').show();
|
||||
|
||||
textsecure.registerSingleDevice(number, verificationCode, function(step) {
|
||||
$('#init-setup').show().addClass('in');
|
||||
$('#status').text("Connecting...");
|
||||
axolotl.protocol.createIdentityKeyRecvSocket().then(function(cryptoInfo) {
|
||||
var qrCode = new QRCode(document.getElementById('qr'));
|
||||
var socket = textsecure.api.getTempWebsocket();
|
||||
new WebSocketResource(socket, function(request) {
|
||||
if (request.path == "/v1/address" && request.verb == "PUT") {
|
||||
var proto = textsecure.protobuf.ProvisioningUuid.decode(request.body);
|
||||
var url = [ 'tsdevice:/', '?uuid=', proto.uuid, '&pub_key=',
|
||||
encodeURIComponent(btoa(getString(cryptoInfo.pubKey))) ].join('');
|
||||
$('#status').text('');
|
||||
qrCode.makeCode(url);
|
||||
request.respond(200, 'OK');
|
||||
} else if (request.path == "/v1/message" && request.verb == "PUT") {
|
||||
$('#qr').hide();
|
||||
textsecure.registerSecondDevice(request.body, cryptoInfo, function(step) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
$('#verify3').show();
|
||||
$('#status').text('Registering new device...');
|
||||
break;
|
||||
case 2:
|
||||
$('#verify4').show();
|
||||
$('#status').text('Generating keys...');
|
||||
break;
|
||||
case 3:
|
||||
$('#complete-number').text(number);
|
||||
$('#verify').hide();
|
||||
$('#init-setup').hide().removeClass('in');
|
||||
$('#setup-complete').show().addClass('in');
|
||||
$('#status').text('Uploading keys...');
|
||||
break;
|
||||
case 4:
|
||||
$('#status').text('All done!');
|
||||
textsecure.registration.done();
|
||||
$('#init-setup').hide();
|
||||
$('#setup-complete').show().addClass('in');
|
||||
}
|
||||
}).catch(function(error) {
|
||||
$('#verify *').hide();
|
||||
$('#verifyCode').removeAttr('disabled');
|
||||
if (error.humanError)
|
||||
displayError(error.humanError);
|
||||
else
|
||||
displayError(error); //XXX
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#new-device').click(function(){
|
||||
$('#choose-setup').fadeOut(function() {
|
||||
$('#multi-device').addClass('in').fadeIn();
|
||||
});
|
||||
|
||||
$('#multi-device .back').click(function() {
|
||||
$('#multi-device').fadeOut(function() {
|
||||
$('#choose-setup').addClass('in').fadeIn();
|
||||
$('input.number').removeClass('invalid');
|
||||
});
|
||||
});
|
||||
|
||||
$('#multi-device .status').text("Connecting...");
|
||||
$('#setup-qr').html('');
|
||||
axolotl.protocol.createIdentityKeyRecvSocket().then(function(cryptoInfo) {
|
||||
var qrCode = new QRCode(document.getElementById('setup-qr'));
|
||||
|
||||
var socket = textsecure.api.getTempWebsocket();
|
||||
new WebSocketResource(socket, function(request) {
|
||||
if (request.path == "/v1/address" && request.verb == "PUT") {
|
||||
var proto = textsecure.protobuf.ProvisioningUuid.decode(request.body);
|
||||
qrCode.makeCode('tsdevice:/' +
|
||||
'?uuid=' + proto.uuid +
|
||||
'&pub_key=' + encodeURIComponent(btoa(getString(cryptoInfo.pubKey))));
|
||||
$('img').removeAttr('style');
|
||||
$('#multi-device .status').text("Use your phone to scan the QR code.");
|
||||
request.respond(200, 'OK');
|
||||
} else if (request.path == "/v1/message" && request.verb == "PUT") {
|
||||
$('#init-setup').hide();
|
||||
$('#verify1done').text('');
|
||||
$('#verify2done').text('');
|
||||
$('#verify3done').text('');
|
||||
$('#verify4done').text('');
|
||||
$('#verify5done').text('');
|
||||
$('#verify').show().addClass('in');
|
||||
|
||||
textsecure.registerSecondDevice(request.body, cryptoInfo, function(step) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
$('#verify1done').text('done');
|
||||
break;
|
||||
case 2:
|
||||
$('#verify2done').text('done');
|
||||
break;
|
||||
case 3:
|
||||
$('#verify3done').text('done');
|
||||
break;
|
||||
case 4:
|
||||
//XXX: User needs to verify number before we continue
|
||||
$('#verify4done').text('done');
|
||||
//$('#complete-number').text(parsedNumber);
|
||||
textsecure.registration.done();
|
||||
//case 5: //TODO: Do sync to get 5!
|
||||
$('#verify').hide();
|
||||
$('#setup-complete').show().addClass('in');
|
||||
textsecure.registration.done();
|
||||
}
|
||||
});
|
||||
} else
|
||||
console.log(request.path);
|
||||
});
|
||||
} else
|
||||
console.log(request.path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
/* vim: ts=4:sw=4
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
;(function() {
|
||||
'use strict';
|
||||
|
||||
function log(s) {
|
||||
console.log(s);
|
||||
$('#status').text(s);
|
||||
}
|
||||
|
||||
function validateCode() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
if (verificationCode.length == 6) {
|
||||
return verificationCode;
|
||||
}
|
||||
}
|
||||
|
||||
function displayError(error) {
|
||||
$('#error').hide().text(error).addClass('in').fadeIn();
|
||||
}
|
||||
|
||||
var phoneView = new Whisper.PhoneInputView({el: $('#phone-number-input')});
|
||||
phoneView.$el.find('input.number').intlTelInput();
|
||||
|
||||
var number = textsecure.storage.getUnencrypted('number_id');
|
||||
if (number) {
|
||||
$('input.number').val(number.split('.')[0]);
|
||||
}
|
||||
|
||||
$('input.number').on('validation', function() {
|
||||
if ($('#number-container').hasClass('valid')) {
|
||||
$('#request-sms, #request-voice').removeAttr('disabled');
|
||||
} else {
|
||||
$('#request-sms, #request-voice').prop('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
|
||||
$('#code').on('change', function() {
|
||||
if (!validateCode())
|
||||
$('#code').addClass('invalid');
|
||||
else
|
||||
$('#code').removeClass('invalid');
|
||||
});
|
||||
|
||||
$('#request-voice').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationVoice(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#request-sms').click(function() {
|
||||
$('#error').hide();
|
||||
var number = phoneView.validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationSMS(number).catch(displayError);
|
||||
$('#step2').addClass('in').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
log('registering');
|
||||
var number = $('input.number').val();
|
||||
var verificationCode = $('#code').val();
|
||||
var signalingKey = textsecure.crypto.getRandomBytes(32 + 20);
|
||||
|
||||
var password = btoa(getString(textsecure.crypto.getRandomBytes(16)));
|
||||
password = password.substring(0, password.length - 2);
|
||||
|
||||
var registrationId = new Uint16Array(textsecure.crypto.getRandomBytes(2))[0];
|
||||
registrationId = registrationId & 0x3fff;
|
||||
|
||||
log('clearing data');
|
||||
localStorage.clear();
|
||||
|
||||
localStorage.setItem('first_install_ran', 1);
|
||||
textsecure.storage.putUnencrypted('registrationId', registrationId);
|
||||
textsecure.storage.putEncrypted('signaling_key', signalingKey);
|
||||
textsecure.storage.putEncrypted('password', password);
|
||||
textsecure.storage.putUnencrypted('number_id', number + '.1');
|
||||
textsecure.storage.putUnencrypted('regionCode', libphonenumber.util.getRegionCodeForNumber(number));
|
||||
|
||||
log('verifying code');
|
||||
return textsecure.api.confirmCode(
|
||||
number, verificationCode, password, signalingKey, registrationId, true
|
||||
).then(function() {
|
||||
log('generating keys');
|
||||
return axolotl.protocol.generateKeys().then(function(keys) {
|
||||
log('uploading keys');
|
||||
return textsecure.api.registerKeys(keys).then(function() {
|
||||
textsecure.registration.done();
|
||||
log('done');
|
||||
chrome.runtime.reload();
|
||||
});
|
||||
});
|
||||
}).catch(function(e) {
|
||||
log(e);
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
127
options.html
127
options.html
|
|
@ -19,79 +19,82 @@
|
|||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="stylesheets/options.css">
|
||||
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="components/intl-tel-input/build/css/intlTelInput.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<h1><img id="textsecure-icon" src='icon.png'/> TextSecure</h1>
|
||||
<div id='choose-setup' class='collapse'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-5 col-xs-offset-1'>
|
||||
<p>I'm new to TextSecure</p>
|
||||
</div>
|
||||
<div class='col-xs-5'>
|
||||
<p>I have TextSecure installed on my phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-5 col-xs-offset-1'>
|
||||
<p><button type='button' id='new-account' class='btn btn-default'>Register</button></p>
|
||||
</div>
|
||||
<div class='col-xs-5'>
|
||||
<p><button type='button' id='new-device' class='btn btn-default'>Add a device</button></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="init-setup">
|
||||
<div id='multi-device' class='collapse'>
|
||||
<button class='back btn btn-link'>Back</button>
|
||||
<div class='narrow'>
|
||||
<div class='status'></div>
|
||||
<div id="setup-qr"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='single-device' class='row collapse'>
|
||||
<div class='col-xs-offset-1 col-md-6'>
|
||||
<div class='narrow'>
|
||||
<div id='step1'>
|
||||
<div id="phone-number-input"></div>
|
||||
<div class='clearfix'>
|
||||
<button id="request-sms" class="btn btn-info">Send SMS</button>
|
||||
<button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
|
||||
</div>
|
||||
</div>
|
||||
<form id="step2" class="collapse">
|
||||
<input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
|
||||
<button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
|
||||
<div id='error' class='collapse'></div>
|
||||
</form>
|
||||
<div id='init-setup' class='collapse'>
|
||||
<header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-2 col-md-1'>
|
||||
<img id='textsecure-icon' src='icon.png'/>
|
||||
</div>
|
||||
<div class='col-xs-10 col-md-11'>
|
||||
<h1>Welcome to Signal for Chrome</h1>
|
||||
<h4 class='tagline'>Private messaging from your web browser.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-6'>
|
||||
<h4 id='step1'>Step 1</h4>
|
||||
<h3 class='step'>Download the Mobile App</h3>
|
||||
</div>
|
||||
<div class='col-xs-6'>
|
||||
<h4 id='step2'>Step 2</h4>
|
||||
<h3 class='step'>Pair Your Device</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-6'>
|
||||
<p class='help'>
|
||||
To get started, download the TextSecure app for your Android phone.
|
||||
Once you've installed it, proceed to <a href='#step2'>Step 2</a>.
|
||||
<p>
|
||||
</div>
|
||||
<div class='col-xs-6'>
|
||||
<p class='help'>
|
||||
Using a QR code scanning app on your phone, scan the QR code below, then
|
||||
open the link to pair your device.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-6'>
|
||||
<div class='cta'>
|
||||
<a class='install' href='https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms' target='_blank'>
|
||||
<img src='/images/playstore.png' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-6'>
|
||||
<div class='cta'>
|
||||
<div id='status'></div>
|
||||
<div id="qr"></div>
|
||||
</div>
|
||||
<button class='back btn btn-link'>Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-offset-1 col-md-6'>
|
||||
<div id="verify" class="collapse narrow">
|
||||
<div id="verify1">Receiving identity key...<span class="verify1done"></span></div>
|
||||
<div id="verify2">Verifying number and setup code...<span class="done" id="verify2done"></span></div>
|
||||
<div id="verify3">Generating keys...<span class="done" id="verify3done"></span></div>
|
||||
<div id="verify4">Registering...<span class="done" id="verify4done"></span></div>
|
||||
<div id="verify5">Syncing with existing devices...<span class="done" id="verify5done"></span></div>
|
||||
</div>
|
||||
<div id="setup-complete" class="collapse">
|
||||
<header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-2 col-md-1'>
|
||||
<img id='textsecure-icon' src='icon.png'/>
|
||||
</div>
|
||||
<div class='col-xs-10 col-md-11'>
|
||||
<h1>Signal for Chrome</h1>
|
||||
<h4 class='tagline'>Private messaging from your web browser.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="setup-complete" class="collapse">
|
||||
</header>
|
||||
<div class='container'>
|
||||
<h3>You are registered on TextSecure with number <span id="complete-number"></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
<div class="phone-input-form">
|
||||
<div id="number-container" class="number-container">
|
||||
<input type="tel" class="number" placeholder="Phone Number" />
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/libtextsecure.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<!--This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Lesser General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Re-register TextSecure</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="stylesheets/options.css">
|
||||
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="components/intl-tel-input/build/css/intlTelInput.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class='container'>
|
||||
<div class='row'>
|
||||
<div class='col-xs-2 col-md-1'>
|
||||
<img id='textsecure-icon' src='icon.png'/>
|
||||
</div>
|
||||
<div class='col-xs-10 col-md-11'>
|
||||
<h1>Create your Signal Account</h1>
|
||||
<h4 class='tagline'>Private messaging from your web browser.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class='container'>
|
||||
<div class='col-xs-offset-1 col-md-6'>
|
||||
<div class='narrow'>
|
||||
<div id="phone-number-input">
|
||||
<div class="phone-input-form">
|
||||
<div id="number-container" class="number-container">
|
||||
<input type="tel" class="number" placeholder="Phone Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearfix'>
|
||||
<button id="request-sms" class="btn btn-info">Send SMS</button>
|
||||
<button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
|
||||
</div>
|
||||
<form id='form'>
|
||||
<h2></h2>
|
||||
<input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
|
||||
<button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
|
||||
<div id='error' class='collapse'></div>
|
||||
</form>
|
||||
<div id=status></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/x-tmpl-mustache" id="phone-number">
|
||||
</script>
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/libtextsecure.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/database.js"></script>
|
||||
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
|
||||
<script type="text/javascript" src="js/models/messages.js"></script>
|
||||
<script type="text/javascript" src="js/models/conversations.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/chromium.js"></script>
|
||||
<script type="text/javascript" src="js/views/whisper_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
|
||||
<script type="text/javascript" src="js/register.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,51 +13,74 @@
|
|||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Roboto-Light';
|
||||
src: url("/fonts/Roboto-Light.ttf") format("truetype"); }
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url("/fonts/Roboto-Italic.ttf") format("truetype");
|
||||
font-style: italic; }
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url("/fonts/Roboto-Bold.ttf") format("truetype");
|
||||
font-weight: bold; }
|
||||
body {
|
||||
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }
|
||||
|
||||
* {
|
||||
font-family: Ubuntu, Segoe, 'Lucidia Grande', sans-serif;
|
||||
}
|
||||
|
||||
.paper {
|
||||
background-color: #fafafa;
|
||||
@include box-shadow(5px 0 5px -2px #ddd, -5px 0 5px -2px #ddd);
|
||||
}
|
||||
header {
|
||||
background: #2a92e7;
|
||||
color: white;
|
||||
padding-bottom: 2em;
|
||||
margin-bottom: 2em; }
|
||||
|
||||
.container {
|
||||
min-width: 650px; }
|
||||
|
||||
h1 {
|
||||
font-size: 30pt;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
padding-bottom: 10px; }
|
||||
|
||||
h2 {
|
||||
font-size: 12pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
float: left;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.tagline {
|
||||
font-style: italic; }
|
||||
|
||||
#textsecure-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
max-width: 100%; }
|
||||
|
||||
#setup-qr {
|
||||
max-width: 256px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
#step1, #step2 {
|
||||
color: #2a92e7;
|
||||
font-weight: bold;
|
||||
font-size: small;
|
||||
text-transform: uppercase; }
|
||||
|
||||
h3.step {
|
||||
margin-top: 0;
|
||||
font-weight: bold; }
|
||||
|
||||
.cta {
|
||||
text-align: center;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-radius: 10px;
|
||||
padding: 1em 0;
|
||||
min-height: 293px; }
|
||||
|
||||
.help {
|
||||
border-top: 2px solid #f3f3f3;
|
||||
padding: 1.5em 0.1em; }
|
||||
|
||||
.install {
|
||||
display: inline-block;
|
||||
margin-top: 90px; }
|
||||
|
||||
#qr {
|
||||
display: inline-block; }
|
||||
#qr canvas {
|
||||
display: none; }
|
||||
|
||||
#verifyCode,
|
||||
#code,
|
||||
|
|
@ -65,35 +88,28 @@ h2 {
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
margin-bottom: 0.5em; }
|
||||
|
||||
#request-voice,
|
||||
#request-sms {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: border-box; }
|
||||
|
||||
#request-sms {
|
||||
width: 57%;
|
||||
float: right;
|
||||
}
|
||||
float: right; }
|
||||
|
||||
#request-voice {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.regionCode {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
float: left; }
|
||||
|
||||
.number-container {
|
||||
position: relative;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
margin-bottom: 0.5em; }
|
||||
|
||||
.number-container .intl-tel-input,
|
||||
.number-container .number {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%; }
|
||||
|
||||
.number-container::after {
|
||||
visibility: hidden;
|
||||
content: ' ';
|
||||
|
|
@ -107,47 +123,37 @@ h2 {
|
|||
top: 0;
|
||||
left: 100%;
|
||||
margin: 3px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
text-align: center; }
|
||||
|
||||
.number-container.valid::after {
|
||||
visibility: visible;
|
||||
content: '✓';
|
||||
background-color: #0f9d58;
|
||||
color: #ffffff;
|
||||
}
|
||||
color: #ffffff; }
|
||||
|
||||
.number-container.invalid::after {
|
||||
visibility: visible;
|
||||
content: '!';
|
||||
background-color: #f44336;
|
||||
color: #ffffff;
|
||||
}
|
||||
color: #ffffff; }
|
||||
|
||||
#error {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
#error { background-color: #f44336; }
|
||||
text-align: center; }
|
||||
|
||||
#error {
|
||||
background-color: #f44336; }
|
||||
|
||||
#error:before {
|
||||
content: '\26a0';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
padding-right: 0.5em; }
|
||||
|
||||
.narrow {
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto 5px;
|
||||
width: 275px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#single-device form {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
input.form-control, select.form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
max-width: 100%; }
|
||||
|
||||
ul.country-list {
|
||||
min-width: 197px !important;
|
||||
}
|
||||
min-width: 197px !important; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
/*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import 'variables';
|
||||
|
||||
body {
|
||||
font-family: $roboto;
|
||||
}
|
||||
|
||||
header {
|
||||
background: $blue;
|
||||
color: white;
|
||||
padding-bottom: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: 650px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30pt;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#textsecure-icon {
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#step1, #step2 {
|
||||
color: $blue;
|
||||
font-weight: bold;
|
||||
font-size: small;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3.step {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cta {
|
||||
text-align: center;
|
||||
border: 2px solid $grey_l;
|
||||
border-radius: 10px;
|
||||
padding: 1em 0;
|
||||
min-height: 293px;
|
||||
}
|
||||
|
||||
.help {
|
||||
border-top: 2px solid $grey_l;
|
||||
padding: 1.5em 0.1em;
|
||||
}
|
||||
|
||||
.install {
|
||||
display: inline-block;
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
#qr {
|
||||
display: inline-block;
|
||||
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#verifyCode,
|
||||
#code,
|
||||
#number {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#request-voice,
|
||||
#request-sms {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#request-sms {
|
||||
width: 57%;
|
||||
float: right;
|
||||
}
|
||||
#request-voice {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.number-container {
|
||||
position: relative;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.number-container .intl-tel-input,
|
||||
.number-container .number {
|
||||
width: 100%;
|
||||
}
|
||||
.number-container::after {
|
||||
visibility: hidden;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
border-radius: 1.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin: 3px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.number-container.valid::after {
|
||||
visibility: visible;
|
||||
content: '✓';
|
||||
background-color: #0f9d58;
|
||||
color: #ffffff;
|
||||
}
|
||||
.number-container.invalid::after {
|
||||
visibility: visible;
|
||||
content: '!';
|
||||
background-color: #f44336;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#error {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
#error { background-color: #f44336; }
|
||||
#error:before {
|
||||
content: '\26a0';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.narrow {
|
||||
box-sizing: border-box;
|
||||
width: 275px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul.country-list {
|
||||
min-width: 197px !important;
|
||||
}
|
||||
Loading…
Reference in New Issue