Merge pull request #915 from mattermost/plt-300

PLT-300 Update allow/deny oauth page UI, and add ouath as reserved word.
2015-10-05 10:32:27 -04:00
--- a/model/utils.go
+++ b/model/utils.go
@@ -163,6 +163,7 @@ var reservedName = []string{
 	"post",
 	"cluster",
 	"api",
+	"oauth",
 }

 var wwwStart = regexp.MustCompile(`^www`)
--- a/web/react/pages/authorize.jsx
+++ b/web/react/pages/authorize.jsx
@@ -3,16 +3,16 @@

 var Authorize = require('../components/authorize.jsx');

-function setupAuthorizePage(teamName, appName, responseType, clientId, redirectUri, scope, state) {
+function setupAuthorizePage(props) {
    React.render(
        <Authorize
-            teamName={teamName}
-            appName={appName}
-            responseType={responseType}
-            clientId={clientId}
-            redirectUri={redirectUri}
-            scope={scope}
-            state={state}
+            teamName={props.TeamName}
+            appName={props.AppName}
+            responseType={props.ResponseType}
+            clientId={props.ClientId}
+            redirectUri={props.RedirectUri}
+            scope={props.Scope}
+            state={props.State}
        />,
        document.getElementById('authorize')
    );
--- a/web/sass-files/sass/partials/_oauth.scss
+++ b/web/sass-files/sass/partials/_oauth.scss
@@ -0,0 +1,31 @@
+.oauth-prompt {
+	background: #fff;
+	border: 1px solid #ddd;
+	padding: 1em 2em 0;
+	margin: 50px auto;
+	max-width: 90%;
+	width: 600px;
+	.prompt__heading {
+		font-size: em(20px);
+		line-height: normal;
+		margin: 1em 0;
+		display: table;
+		width: 100%;
+		> div {
+			display: table-cell;
+			vertical-align: top;
+		}
+		img {
+			margin-right: 15px;
+		}
+	}
+	.prompt__allow {
+		margin: 1em 0;
+		font-size: em(24px);
+	}
+	.prompt__buttons {
+		text-align: right;
+		border-top: 1px solid #ddd;
+		padding: 1.5em 0;
+	}
+}
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -41,3 +41,6 @@

 // Responsive Css
@import "partials/responsive";
+
+// Standalone Css
+@import "partials/oauth";
--- a/web/templates/authorize.html
+++ b/web/templates/authorize.html
@@ -1,26 +1,26 @@
 {{define "authorize"}}
 <html>
 {{template "head" . }}
-<body class="white">
-	<div class="container-fluid">
-		<div class="inner__wrap">
-			<div class="row content">
-				<div class="signup-header">
-					{{.Props.TeamName}}
-				</div>
-				<div class="col-sm-12">
-						<div id="authorize"></div>
-				</div>
-				<div class="footer-push"></div>
-			</div>
-			<div class="row footer">
-				{{template "footer" . }}
-			</div>
-		</div>
-	</div>
-	<script>
-		window.setup_authorize_page('{{ .Props.TeamName }}', '{{ .Props.AppName }}', '{{ .Props.ResponseType }}', '{{ .Props.ClientId }}', '{{ .Props.RedirectUri }}', '{{ .Props.Scope }}', '{{ .Props.State }}' );
-	</script>
+<body>
+    <div class="container-fluid">
+        <div class="oauth-prompt">
+            <div class="prompt__heading">
+                <div class="prompt__app-icon">
+                    <img src="/static/images/icon50x50.gif" width="50" height="50" alt="">
+                </div>
+                <div class="text">An application would like to connect to your {{.Props.TeamName}} account.</div>
+            </div>
+            <p>The app <strong>{{.Props.AppName}}</strong> would like the ability to access Mattermost on your behalf.</p>
+            <h2 class="prompt__allow">Allow <strong>{{.Props.AppName}}</strong> access?</h2>
+            <div class="prompt__buttons">
+                <input type="button" class="btn btn-link" value="Deny">
+                <input type="button" class="btn btn-primary" value="Allow">
+            </div>
+        </div>
+    </div>
+    <script>
+        window.setup_authorize_page('{{.Props}}');
+    </script>
 </body>
 </html>
 {{end}}