EdgeAdmin/web/views/@default/servers/certs/acme/create.html

{$layout}
{$template "/left_menu_top"}

<div class="right-box without-tabbar">
	{$template "menu"}

	<div class="margin"></div>

	<form class="ui form">
		<div class="ui steps fluid small">
			<div class="ui step" :class="{active:step == 'prepare'}">
				选择申请方式
			</div>
			<div class="ui step" :class="{active:step == 'user'}">
				选择ACME用户
			</div>
			<div class="ui step" :class="{active:step == 'dns'}">
				填写域名信息
			</div>
			<div class="ui step" :class="{active:step == 'finish'}">
				完成
			</div>
		</div>

		<!-- 准备工作 -->
		<div v-show="step == 'prepare'">
            <table class="ui table definition selectable">
                <tr>
                    <td class="title">认证方式</td>
                    <td>
                        <div style="margin-bottom: 1em">
                            <radio name="authType" :v-value="'http'" v-model="authType">使用HTTP认证</radio> &nbsp;
                            <radio name="authType" :v-value="'dns'" v-model="authType">使用DNS认证</radio>
                        </div>
                        <div v-if="authType == 'http'">
                            <p class="comment">使用HTTP的方式请求网址<code-label>/.well-known/acme-challenge/令牌</code-label>校验，该方式要求需要实现将域名解析到集群上，之后系统会自动生成网址信息。</p>
                        </div>
                        <div v-if="authType == 'dns'">
                            <p class="comment">我们在申请免费证书的过程中需要自动增加或修改相关域名的TXT记录，请先确保你已经在"域名解析" -- <a href="/dns/providers" target="_blank">"DNS服务商"</a> 中已经添加了对应的DNS服务商账号。</p>
                        </div>
                    </td>
                </tr>
			    <tr>
                    <td colspan="2">
                        <a href="" @click.prevent="showPrepareMoreOptionsVisible">更多选项<i class="icon angle" :class="{up: prepareMoreOptionsVisible, down: !prepareMoreOptionsVisible}"></i></a>
                    </td>
                </tr>
                <tbody v-show="prepareMoreOptionsVisible">
                    <tr>
                        <td>回调URL</td>
                        <td>
                            <input type="text" name="authURL" v-model="authURL" maxlength="200"/>
                            <p class="comment">将认证数据以JSON的方式POST到此URL上，可以依此生成认证文件或者设置DNS域名解析。</p>
                        </td>
                    </tr>
                </tbody>
            </table>

			<div class="button-group">
				<button type="button" class="ui button primary"  @click.prevent="doPrepare">下一步</button>
			</div>
		</div>

		<!-- 选择用户 -->
		<div v-show="step == 'user'">
			<table class="ui table definition selectable">
                <tr>
                    <td class="title">选择服务商 *</td>
                    <td>
                        <select class="ui dropdown auto-width" v-model="providerCode" @change="changeProvider">
                            <option value="">[选择服务商]</option>
                            <option v-for="provider in providers" :value="provider.code">{{provider.name}}</option>
                        </select>
                    </td>
                </tr>
				<tr v-if="providerCode.length > 0">
					<td class="title">选择用户 *</td>
					<td>
						<div v-if="users.length > 0">
							<div class="ui fields inline">
								<div class="ui field">
									<select class="ui dropdown" v-model="userId">
										<option value="0">[请选择]</option>
										<option v-for="user in users" :value="user.id" v-if="user.providerCode == providerCode">{{user.email}}{{user.description}}</option>
									</select>
								</div>
								<div class="ui field">
									<a href="" @click.prevent="createUser">[新创建]</a>
								</div>
							</div>
						</div>
						<div v-else><a href="" @click.prevent="createUser">暂时还没有用户，点此创建</a></div>
						<p class="comment">选择一个作为申请证书的用户。</p>
					</td>
				</tr>
			</table>

			<div class="button-group">
				<button type="button" class="ui button" @click.prevent="goPrepare">上一步</button>
				<button type="button" class="ui button primary" @click.prevent="doUser">下一步</button>
			</div>
		</div>

		<!-- 设置域名解析 -->
		<div v-show="step == 'dns'">
			<table class="ui table definition selectable">
				<tr v-show="authType == 'dns'">
					<td class="title">选择DNS服务商 *</td>
					<td>
						<div v-if="dnsProviders.length > 0">
							<select class="ui dropdown auto-width" v-model="dnsProviderId">
								<option value="0">[请选择]</option>
								<option v-for="provider in dnsProviders" :value="provider.id">{{provider.name}}（{{provider.typeName}}）</option>
							</select>
						</div>
						<p class="comment">用于自动创建域名解析记录。</p>
					</td>
				</tr>
				<tr v-show="authType == 'dns'">
					<td>顶级域名 *</td>
					<td>
						<input type="text" maxlength="100" v-model="dnsDomain"/>
						<p class="comment">用于在DNS服务商账号中操作解析记录的域名，比如 example.com，不要输入二级或别的多级域名。</p>
					</td>
				</tr>
				<tr>
					<td class="title">证书域名列表 *</td>
					<td>
                        <domains-box :v-support-wildcard="authType == 'dns'" @change="changeDomains"></domains-box>
						<p class="comment">需要申请的证书中包含的域名列表<span v-if="authType == 'dns'">，所有域名必须是同一个顶级域名</span><span v-if="authType == 'http'">使用HTTP认证方式时，域名中不能含有通配符</span>。</p>
					</td>
				</tr>
				<tr>
					<td>自动续期</td>
					<td>
						<checkbox v-model="autoRenew"></checkbox>
						<p class="comment">选中后，表示在免费证书临近到期之前尝试自动续期。</p>
					</td>
				</tr>
			</table>

			<div class="button-group">
				<button type="button" class="ui button" @click.prevent="goUser">上一步</button>
				<button type="button" class="ui button primary" @click.prevent="doDNS" v-if="!isRequesting">下一步</button>
				<button type="button" class="ui button primary disabled" v-if="isRequesting">提交中，要花费的时间较长，请耐心等待...</button>
			</div>
		</div>

		<!-- 完成 -->
		<div v-show="step == 'finish'">
			<div class="success-box">
				<p><span class="green">恭喜，证书申请成功！</span>你可以在证书列表里看到刚申请的证书，也可以 <a href="" @click.prevent="viewCert">点击这里</a> 查看证书详情。</p>
			</div>

			<div class="button-group">
				<button type="button" class="ui button primary" @click.prevent="doFinish">返回</button>
			</div>
		</div>
	</form>
</div>