Update create organization page UI
This commit is contained in:
Joseph Schorr
parent
cff7f6178e
commit
2ece1170a1
6 changed files with 189 additions and 82 deletions
4
static/css/pages/new-organization.css
Normal file
4
static/css/pages/new-organization.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.new-organization .co-main-content-panel {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -24,3 +24,15 @@
|
|||
.repo-list .namespaces-list li .avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.repo-list .new-org {
|
||||
margin-top: 20px !important;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.repo-list .new-org i.fa {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -4,9 +4,15 @@
|
|||
*/
|
||||
angular.module('quayPages').config(['pages', function(pages) {
|
||||
pages.create('new-organization', 'new-organization.html', NewOrgCtrl, {
|
||||
'newLayout': true,
|
||||
'title': 'New Organization',
|
||||
'description': 'Create a new organization to manage teams and permissions'
|
||||
});
|
||||
}, ['layout']);
|
||||
|
||||
pages.create('new-organization', 'old-new-organization.html', NewOrgCtrl, {
|
||||
'title': 'New Organization',
|
||||
'description': 'Create a new organization to manage teams and permissions'
|
||||
}, ['old-layout']);
|
||||
}]);
|
||||
|
||||
function NewOrgCtrl($scope, $routeParams, $timeout, $location, UserService, PlanService, ApiService, CookieService, Features) {
|
||||
|
|
|
|||
|
|
@ -1,93 +1,80 @@
|
|||
<div class="loading" ng-show="creating">
|
||||
<div class="quay-spinner"></div>
|
||||
</div>
|
||||
|
||||
<div class="cor-container create-org" ng-show="!creating">
|
||||
|
||||
<div class="row header-row">
|
||||
<div class="col-md-12">
|
||||
<h2>Create Organization</h2>
|
||||
|
||||
<div class="steps-container" ng-show="false">
|
||||
<ul class="steps">
|
||||
<li class="step" ng-class="!user || user.anonymous ? 'active' : ''">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
<span class="title">Login with an account</span>
|
||||
</li>
|
||||
<li class="step" ng-class="!user.anonymous && !created ? 'active' : ''">
|
||||
<i class="fa fa-gear"></i>
|
||||
<span class="title">Setup your organization</span>
|
||||
</li>
|
||||
<li class="step" ng-class="!user.anonymous && created ? 'active' : ''">
|
||||
<i class="fa fa-group"></i>
|
||||
<span class="title">Create teams</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="new-organization">
|
||||
<div class="page-content">
|
||||
<div class="cor-title">
|
||||
<span class="cor-title-link">
|
||||
<a class="back-link" href="/repository">
|
||||
Repositories
|
||||
</a>
|
||||
</span>
|
||||
<span class="cor-title-content">
|
||||
Create New Organization
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="row" ng-show="!user || user.anonymous">
|
||||
<div class="col-md-10 col-md-offset-1 page-description">
|
||||
In order to create a new organization, <b>you must first be signed in</b> as the
|
||||
user that <b>will become an admin</b> for the organization.
|
||||
</div>
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
<div class="step-container" >
|
||||
<div class="user-setup" redirect-url="'/organizations/new'" sign-in-started="signinStarted()"
|
||||
signed-in="signedIn()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="co-main-content-panel">
|
||||
<div class="cor-loader" ng-show="creating"></div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="row" ng-show="user && !user.anonymous && !created">
|
||||
<div class="col-md-12">
|
||||
<div class="step-container">
|
||||
<h3>Setup the new organization</h3>
|
||||
|
||||
<form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Name</label>
|
||||
<input id="orgName" name="orgName" type="text" class="form-control" placeholder="Organization Name"
|
||||
ng-model="org.name" required autofocus data-trigger="manual" data-content="{{ createError }}"
|
||||
data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
|
||||
<span class="description">This will also be the namespace for your repositories. Must be alphanumeric and all lowercase.</span>
|
||||
<div class="create-org" ng-show="!creating">
|
||||
<!-- Step 1 -->
|
||||
<div ng-show="!user || user.anonymous">
|
||||
<div class="page-description">
|
||||
In order to create a new organization, <b>you must first be signed in</b> as the
|
||||
user that <b>will become an admin</b> for the organization.
|
||||
</div>
|
||||
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Email</label>
|
||||
<input id="orgEmail" name="orgEmail" type="email" class="form-control" placeholder="Organization Email"
|
||||
ng-model="org.email" required>
|
||||
<span class="description">This address must be different from your account's email.</span>
|
||||
<div class="step-container row">
|
||||
<div class="col-sm-offset-3 col-sm-6">
|
||||
<div class="user-setup" redirect-url="'/organizations/new'"
|
||||
sign-in-started="signinStarted()"
|
||||
signed-in="signedIn()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plans Table -->
|
||||
<div class="form-group nested plan-group" quay-require="['BILLING']">
|
||||
<strong>Choose your organization's plan</strong>
|
||||
<div class="plans-table" plans="plans" current-plan="holder.currentPlan"></div>
|
||||
<!-- Step 2 -->
|
||||
<div ng-show="user && !user.anonymous && !created">
|
||||
<div class="step-container">
|
||||
<form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Name</label>
|
||||
<input id="orgName" name="orgName" type="text" class="form-control"
|
||||
placeholder="Organization Name"
|
||||
ng-model="org.name" required autofocus data-trigger="manual"
|
||||
data-content="{{ createError }}"
|
||||
data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
|
||||
<span class="description">This will also be the namespace for your repositories. Must be alphanumeric and all lowercase.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Email</label>
|
||||
<input id="orgEmail" name="orgEmail" type="email" class="form-control" placeholder="Organization Email"
|
||||
ng-model="org.email" required>
|
||||
<span class="description">This address must be different from your account's email.</span>
|
||||
</div>
|
||||
|
||||
<!-- Plans Table -->
|
||||
<div class="form-group nested plan-group" quay-require="['BILLING']">
|
||||
<strong>Choose your organization's plan</strong>
|
||||
<div class="plans-table" plans="plans" current-plan="holder.currentPlan"></div>
|
||||
</div>
|
||||
|
||||
<div class="button-bar">
|
||||
<button class="btn btn-large btn-primary" type="submit"
|
||||
ng-disabled="newOrgForm.$invalid || (Features.BILLING && !holder.currentPlan)"
|
||||
analytics-on analytics-event="create_organization">
|
||||
Create Organization
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-bar">
|
||||
<button class="btn btn-large btn-success" type="submit"
|
||||
ng-disabled="newOrgForm.$invalid || (Features.BILLING && !holder.currentPlan)"
|
||||
analytics-on analytics-event="create_organization">
|
||||
Create Organization
|
||||
</button>
|
||||
<!-- Step 3 -->
|
||||
<div ng-show="user && !user.anonymous && created">
|
||||
<div class="step-container">
|
||||
<h3>Organization Created</h3>
|
||||
<h4><a href="/organization/{{ org.name }}">Manage Teams Now</a></h4>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="row" ng-show="user && !user.anonymous && created">
|
||||
<div class="col-md-12">
|
||||
<div class="step-container">
|
||||
<h3>Organization Created</h3>
|
||||
<h4><a href="/organization/{{ org.name }}">Manage Teams Now</a></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
94
static/partials/old-new-organization.html
Normal file
94
static/partials/old-new-organization.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<div class="loading" ng-show="creating">
|
||||
<div class="quay-spinner"></div>
|
||||
</div>
|
||||
|
||||
<div class="cor-container create-org" ng-show="!creating">
|
||||
|
||||
<div class="row header-row">
|
||||
<div class="col-md-12">
|
||||
<h2>Create Organization</h2>
|
||||
|
||||
<div class="steps-container" ng-show="false">
|
||||
<ul class="steps">
|
||||
<li class="step" ng-class="!user || user.anonymous ? 'active' : ''">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
<span class="title">Login with an account</span>
|
||||
</li>
|
||||
<li class="step" ng-class="!user.anonymous && !created ? 'active' : ''">
|
||||
<i class="fa fa-gear"></i>
|
||||
<span class="title">Setup your organization</span>
|
||||
</li>
|
||||
<li class="step" ng-class="!user.anonymous && created ? 'active' : ''">
|
||||
<i class="fa fa-group"></i>
|
||||
<span class="title">Create teams</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="row" ng-show="!user || user.anonymous">
|
||||
<div class="col-md-10 col-md-offset-1 page-description">
|
||||
In order to create a new organization, <b>you must first be signed in</b> as the
|
||||
user that <b>will become an admin</b> for the organization.
|
||||
</div>
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
<div class="step-container" >
|
||||
<div class="user-setup" redirect-url="'/organizations/new'" sign-in-started="signinStarted()"
|
||||
signed-in="signedIn()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="row" ng-show="user && !user.anonymous && !created">
|
||||
<div class="col-md-12">
|
||||
<div class="step-container">
|
||||
<h3>Setup the new organization</h3>
|
||||
|
||||
<form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Name</label>
|
||||
<input id="orgName" name="orgName" type="text" class="form-control" placeholder="Organization Name"
|
||||
ng-model="org.name" required autofocus data-trigger="manual" data-content="{{ createError }}"
|
||||
data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
|
||||
<span class="description">This will also be the namespace for your repositories. Must be alphanumeric and all lowercase.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group nested">
|
||||
<label for="orgName">Organization Email</label>
|
||||
<input id="orgEmail" name="orgEmail" type="email" class="form-control" placeholder="Organization Email"
|
||||
ng-model="org.email" required>
|
||||
<span class="description">This address must be different from your account's email.</span>
|
||||
</div>
|
||||
|
||||
<!-- Plans Table -->
|
||||
<div class="form-group nested plan-group" quay-require="['BILLING']">
|
||||
<strong>Choose your organization's plan</strong>
|
||||
<div class="plans-table" plans="plans" current-plan="holder.currentPlan"></div>
|
||||
</div>
|
||||
|
||||
<div class="button-bar">
|
||||
<button class="btn btn-large btn-success" type="submit"
|
||||
ng-disabled="newOrgForm.$invalid || (Features.BILLING && !holder.currentPlan)"
|
||||
analytics-on analytics-event="create_organization">
|
||||
Create Organization
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="row" ng-show="user && !user.anonymous && created">
|
||||
<div class="col-md-12">
|
||||
<div class="step-container">
|
||||
<h3>Organization Created</h3>
|
||||
<h4><a href="/organization/{{ org.name }}">Manage Teams Now</a></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,6 +42,10 @@
|
|||
{{ namespace.name }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="new-org" ng-if="!user.anonymous">
|
||||
<span class="avatar" size="30" data="{'color': '#ccc', name: '+new'}"></span>
|
||||
<a href="/organizations/new">Create New Organization</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue