wp-stateless / static / views / setup_wizard_interface.php

setup_wizard_interface.php in WP-Stateless – Google Cloud Storage 2.2.3, at static/views/setup_wizard_interface.php

206 lines 18.3 KB

Raw Download Zip

1	<?php
2	$server_name = $_SERVER['HTTP_HOST']?$_SERVER['HTTP_HOST']: $_SERVER["SERVER_NAME"];
3	$id = str_replace('.', '-', $server_name);
4	$project_name = trim(substr($id, 0, 30), '-');
5	$project_id = trim(substr($id, 0, 23), '-') . "-" . rand(100000, 999999);
6
7	$bucket_id = trim("stateless-" . substr($id, 0, 20), '-');
8	if(is_network_admin()){
9	$nonce = wp_create_nonce( 'network_update_json' );
10	}
11	else{
12	$nonce = wp_create_nonce( 'update_json' );
13	}
14
15	?>
16	<div id="wp-stateless-wrapper" data-nonce="<?php echo $nonce;?>">
17	<div id="wpStatelessInner">
18
19	<div class="wpStateLess-header">
20	<div class="container">
21	<div class="row">
22	<div class="col-xs-12 text-center">
23	<div class="wpStateLess-welcome-text">
24	<h1><?php _e( 'WP-Stateless Setup', ud_get_stateless_media()->domain ); ?></h1>
25	<p><?php _e( 'Get up and running in less than 90 seconds! Just follow these three steps.', ud_get_stateless_media()->domain ); ?></p>
26	</div>
27	</div>
28	</div>
29	</div>
30	</div>
31
32	<div class="wpStateLess-setup-step-area">
33	<div class="container">
34	<div class="row">
35	<div class="col-xs-12">
36	<div class="wpStateLess-setup-step">
37	<div class="wpStateLess-setup-step-bars">
38	<ul>
39	<li class="step-google-login"> <span>1</span> <?php _e( 'Google Login', ud_get_stateless_media()->domain ); ?></li>
40	<li class="step-setup-project"> <span>2</span> <?php _e( 'Project & Bucket', ud_get_stateless_media()->domain ); ?></li>
41	<li class="step-final"> <span><?php echo number_format_i18n(3);?></span> <?php _e( 'Complete', ud_get_stateless_media()->domain ); ?></li>
42	</ul>
43	</div>
44	<div class="wpStateLess-setup-steps">
45	<div class="wpStateLess-s-step active step-google-login">
46	<img src="<?php echo ud_get_stateless_media()->path( 'static/images/authenticate-login.png'); ?>" alt=""/>
47	<div class="wpStateLess-step-title">
48	<h3><?php _e( 'Google Login', ud_get_stateless_media()->domain ); ?></h3>
49	<p class="description"><?php _e( sprintf('Login with the Google Account you want to be associated with this website and consent to the permissions request. If you\'re unsure about granting access to your Google account, check over our documentation on the <a target="_blank" href="%1$s">permissions request</a> and <a target="_blank" href="%2$s">manual setup alternative.</a>', "https://github.com/wpCloud/wp-stateless/wiki/Google-Permission-Request", "https://github.com/wpCloud/wp-stateless/wiki/Manual-Setup"), ud_get_stateless_media()->domain ); ?></p>
50	</div>
51	<p>
52	<input id="allow-notifications" type="checkbox" checked="checked" />
53	<label class="cursor-normal" for="allow-notifications"><?php _e( sprintf('Receive email updates from plugin author (<a target="_blank" href="%s">Usability Dynamics</a>)?', 'https://www.usabilitydynamics.com/'));?></label>
54	</p>
55	<a id="google-login" href="https://api.usabilitydynamics.com/product/stateless/v1/auth/google?state=<?php echo urlencode(ud_get_stateless_media()->get_settings_page_url('?page=stateless-setup&step=google-login') ); ?>" class="btn btn-googly-red"><?php _e( 'Google Login', ud_get_stateless_media()->domain ); ?></a>
56	</div>
57	<div class="wpStateLess-s-step step-setup-project">
58	<div class="wpStateLess-step-title">
59	<h3><?php _e( 'Set Project & Bucket', ud_get_stateless_media()->domain ); ?></h3>
60	<p><?php _e( 'Create a Google Cloud project and bucket that will store your WordPress media files.', ud_get_stateless_media()->domain ); ?></p>
61	</div>
62	<div class="wpStateLess-userinfo">
63	<div class="photo-wrapper">
64	<img class="user-photo img-circle" src="<?php echo ud_get_stateless_media()->path( 'static/images/author-image.png'); ?>" alt="">
65	</div>
66	<div class="wpStateLess-user-details">
67	<h4><span class="user-name"></span> <a class="logout" href="#google-logout"><?php _e( 'Logout', ud_get_stateless_media()->domain ); ?></a></h4>
68	<p class="user-email"></p>
69	</div>
70	</div>
71	<div class="wpStateLess-step-setup-form">
72	<form action="#" method="POST">
73	<div id="stateless-notification" class="error">
74
75	</div>
76	<div class="wpStateLess-single-step-input">
77	<label for="">
78	<h4><?php _e( 'Google Cloud Project', ud_get_stateless_media()->domain ); ?></h4>
79	<p><?php _e( 'By default we create a new project for you, or if you prefer, select an existing project.', ud_get_stateless_media()->domain ); ?></p>
80	</label>
81	<div class="wpStateLess-combo-box project">
82	<input type="hidden" class="id" value="<?php echo $project_id;?>">
83	<input type="text" class="name" value="<?php echo $project_name;?>" placeholder="Select or Create New Project">
84	<div class="circle-loader">
85	<div class="checkmark draw"></div>
86	</div>
87	<div class="wpStateLess-input-dropdown">
88	<div class="wpStateLess-create-new">
89	<h5><?php _e( 'Create New Project', ud_get_stateless_media()->domain ); ?></h5>
90	<ul>
91	<li class="custom-name"></li>
92	<li class="predefined-name active" data-id="<?php echo $project_id?>" data-name="<?php echo $project_name?>">
93	<?php echo "$project_name ($project_id)";?>
94	</li>
95	</ul>
96	</div>
97	<div class="wpStateLess-existing">
98	<h5><?php _e( 'Existing Projects', ud_get_stateless_media()->domain ); ?></h5>
99	<ul></ul>
100	</div>
101	</div>
102	<div class="error"></div>
103	</div>
104	</div>
105	<div class="wpStateLess-single-step-input">
106	<label for="">
107	<h4><?php _e( 'Google Cloud Bucket', ud_get_stateless_media()->domain ); ?></h4>
108	<p><?php _e( 'By default we create a new bucket for you, or if you prefer, select an existing bucket.', ud_get_stateless_media()->domain ); ?></p>
109	</label>
110	<div class="wpStateLess-combo-box bucket">
111	<input type="text" class="name" value="<?php echo $bucket_id;?>" placeholder="Select or Create New Bucket">
112	<div class="circle-loader">
113	<div class="checkmark draw"></div>
114	</div>
115	<div class="wpStateLess-input-dropdown">
116	<div class="wpStateLess-create-new">
117	<h5><?php _e( 'Create New Bucket', ud_get_stateless_media()->domain ); ?></h5>
118	<ul>
119	<li class="custom-name"></li>
120	<li class="project-derived-name"></li>
121	<li class="predefined-name active" data-id="<?php echo $bucket_id?>" data-name="<?php echo $bucket_id?>">
122	<?php echo $bucket_id;?>
123	</li>
124	</ul>
125	</div>
126	<div class="wpStateLess-existing">
127	<h5><?php _e( 'Existing Projects', ud_get_stateless_media()->domain ); ?></h5>
128	<ul></ul>
129	</div>
130	</div>
131	<div class="error"></div>
132	</div>
133	</div>
134	<div class="wpStateLess-single-step-input">
135	<label for="">
136	<h4><?php _e( 'Google Cloud Bucket Multi-Regional Location', ud_get_stateless_media()->domain ); ?></h4>
137	<p><?php _e( 'Your newly created bucket will be provisioned with a multi-regional storage class. Select the region that is closest to the majority of your website\'s visitors.', ud_get_stateless_media()->domain ); ?></p>
138	</label>
139	<div class="wpStateLess-combo-box region">
140	<input type="hidden" class="id" value="us">
141	<input type="text" class="name" readonly="readonly" value="United States" placeholder="Select Location">
142	<div class="circle-loader">
143	<div class="checkmark draw"></div>
144	</div>
145	<div class="wpStateLess-input-dropdown">
146	<div class="wpStateLess-static">
147	<ul>
148	<li data-id="asia" data-name="Asia Pacific">Asia Pacific</li>
149	<li data-id="eu" data-name="European Union">European Union</li>
150	<li data-id="us" data-name="United States">United States</li>
151	</ul>
152	</div>
153	</div>
154	<div class="error"></div>
155	</div>
156	</div>
157	<div class="wpStateLess-single-step-input">
158	<label for="">
159	<h4><?php _e( 'Google Cloud Billing', ud_get_stateless_media()->domain ); ?></h4>
160	<p><?php _e( 'You will need to set a billing account in order to activate your Google Cloud Storage.', ud_get_stateless_media()->domain ); ?></p>
161	</label>
162	<a href="https://console.cloud.google.com/billing" class="btn btn-green create-billing-account no-billing-account"><?php _e( 'Create New Billing Account', ud_get_stateless_media()->domain ); ?> <span class="wpStateLess-loading">(<?php _e( 'Checking', ud_get_stateless_media()->domain ); ?> <span>.</span><span>.</span><span>.</span>)</span></a>
163	<div class="wpStateLess-combo-box billing-account" style="display: none;">
164	<input type="hidden" class="id" value="">
165	<input type="text" class="name" value="" readonly="readonly" placeholder="Select Billing Account">
166	<div class="circle-loader">
167	<div class="checkmark draw"></div>
168	</div>
169	<div class="wpStateLess-input-dropdown">
170	<div class="wpStateLess-existing">
171	<h5><?php _e( 'Existing Billing Accounts', ud_get_stateless_media()->domain ); ?></h5>
172	<ul></ul>
173	<a href="https://console.cloud.google.com/billing" class="btn btn-green create-billing-account"><?php _e( 'Create New Billing Account', ud_get_stateless_media()->domain ); ?> <span class="wpStateLess-loading">(<?php _e( 'Checking', ud_get_stateless_media()->domain ); ?> <span>.</span><span>.</span><span>.</span>)</span></a>
174	</div>
175	</div>
176	</div>
177	</div>
178	<div class="wpStateLess-single-step-input text-center input-submit">
179	<a class="btn btn-green get-json-key" type="submit"><span class="submit-button-text"><?php _e( 'Continue', ud_get_stateless_media()->domain ); ?> </span><span class="wpStateLess-loading"><?php _e( 'Building', ud_get_stateless_media()->domain ); ?> <span>.</span><span>.</span><span>.</span></span></a>
180	</div>
181	</form>
182	</div>
183	<div class="wpStateLess-user-has-no-project-billing">
184	<h4><?php _e( 'Set Google Cloud Billing Account', ud_get_stateless_media()->domain ); ?></h4>
185	<p><?php _e( 'Click the button below to setup a billing account with Google Cloud. Once configured, return here and click continue.', ud_get_stateless_media()->domain ); ?></p>
186	<a href="https://console.cloud.google.com/billing" class="btn btn-green create-billing-account" target="_blank"><span class=""><?php _e( 'Set Google Billing', ud_get_stateless_media()->domain ); ?></span> <p class="wpStateLess-loading">(<?php _e( 'Checking', ud_get_stateless_media()->domain ); ?> <span>.</span><span>.</span><span>.</span>)</p></a>
187
188	</div>
189	</div>
190	<div class="wpStateLess-s-step step-final">
191	<img src="<?php echo ud_get_stateless_media()->path( 'static/images/setup-complete.png'); ?>" alt="">
192	<div class="wpStateLess-step-title">
193	<h3><?php _e( 'Setup is Complete!', ud_get_stateless_media()->domain ); ?></h3>
194	<p><?php _e( 'Any media file you upload to WordPress will now be uploaded to Google Cloud Storage and served to your users from Google servers!', ud_get_stateless_media()->domain ); ?></p>
195	</div>
196	<p><?php printf(__( 'To further customize your WP-Stateless setup, visit the <a class="btn-link" href="%s"> WP-Stateless settings panel!</a>', ud_get_stateless_media()->domain ), ud_get_stateless_media()->get('page_url.stateless_settings')); ?></p>
197	<a href="<?php echo admin_url('media-new.php');?>" class="btn btn-green"><?php _e( 'Upload Something!', ud_get_stateless_media()->domain ); ?></a>
198	</div>
199	</div>
200	</div>
201	</div>
202	</div>
203	</div>
204	</div>
205	</div>
206	</div>