|
|
@@ -4,78 +4,185 @@
|
|
|
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
|
|
|
|
|
|
<body>
|
|
|
-<div class="layui-form timo-compile">
|
|
|
- <form th:action="@{/api/build/repoauth}">
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label required">仓库类型<i id="repo_type_tips" class="fa fa-question-circle"></i></label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <select name="type">
|
|
|
- <option th:each="item : ${repos}" th:value="${item.key}">[[${item.value}]]</option>
|
|
|
- </select>
|
|
|
+<div class="layui-fluid">
|
|
|
+ <div class="layui-card">
|
|
|
+ <div class="layui-card-body" style="padding-top: 40px;">
|
|
|
+ <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
|
|
|
+ <div carousel-item>
|
|
|
+ <div>
|
|
|
+ <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">仓库类型</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <select name="type" lay-verify="required">
|
|
|
+ <option th:each="item : ${repos}" th:value="${item.key}">[[${item.value}]]</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn" lay-submit lay-filter="formStep">
|
|
|
+  下一步 
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label required">认证类型</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <select name="authType" lay-verify="required">
|
|
|
+ <option th:each="item : ${auths}" th:value="${item.key}">[[${item.value}]]</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn" lay-submit lay-filter="formStep2">
|
|
|
+  下一步 
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label required">认证名字</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input class="layui-input" type="text" name="name" placeholder="请输入认证名字" lay-verify="required">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="username" class="layui-form-item">
|
|
|
+ <label class="layui-form-label required">用户名</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input class="layui-input" type="text" name="username" placeholder="请输入用户名" lay-verify="required">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="password" class="layui-form-item">
|
|
|
+ <label class="layui-form-label required">密码</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input class="layui-input" type="text" name="password" placeholder="请输入密码" lay-verify="required">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="rsaPrikey" class="layui-form-item">
|
|
|
+ <label class="layui-form-label required">RSA 私钥</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <textarea class="layui-textarea" name="rsaPrikey" placeholder="请输入 RSA 私钥" lay-verify="required"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn" lay-submit lay-filter="formStep3">
|
|
|
+  提交 
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="text-align: center;margin-top: 90px;">
|
|
|
+ <i class="layui-icon layui-circle"
|
|
|
+ style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i>
|
|
|
+ <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
|
|
|
+ 仓库认证已添加
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label required">认证名字</label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input class="layui-input" type="text" name="name" placeholder="请输入认证名字" required>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label required">认证类型<i id="repo_auth_type_tips" class="fa fa-question-circle"></i></label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <select name="authType">
|
|
|
- <option th:each="item : ${auths}" th:value="${item.key}">[[${item.value}]]</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label">用户名</label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input class="layui-input" type="text" name="username" placeholder="请输入用户名">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label">密码</label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <input class="layui-input" type="text" name="password" placeholder="请输入密码">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item">
|
|
|
- <label class="layui-form-label">RSA 私钥</label>
|
|
|
- <div class="layui-input-inline">
|
|
|
- <textarea class="layui-textarea" name="rsaPrikey" placeholder="请输入 RSA 私钥"></textarea>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="layui-form-item timo-finally">
|
|
|
- <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
|
|
|
- <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<script th:replace="/common/template :: script"></script>
|
|
|
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
|
|
|
-<script type="text/javascript" th:inline="javascript">
|
|
|
- $(function () {
|
|
|
- $("#repo_type_tips").hover(function () {
|
|
|
- var tips = layer.tips('目前仅支持 git 仓库<br />', '#repo_type_tips',{
|
|
|
- tips: [1, '#555555']
|
|
|
- });
|
|
|
- sleep(1000);
|
|
|
- layer.close(tips);
|
|
|
- })
|
|
|
+<script type="text/javascript" th:src="@{/lib/step-lay/step.js}"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ // 引入 step-lay 模块
|
|
|
+ layui.config({
|
|
|
+ base:'/lib/step-lay/'
|
|
|
+ }).use([ 'form', 'step'], function () {
|
|
|
+ var form = layui.form
|
|
|
+ var step = layui.step
|
|
|
+
|
|
|
+ step.render({
|
|
|
+ elem: '#stepForm',
|
|
|
+ filter: 'stepForm',
|
|
|
+ width: '100%', //设置容器宽度
|
|
|
+ stepWidth: '720px',
|
|
|
+ height: '480px',
|
|
|
+ stepItems: [{
|
|
|
+ title: '选择仓库类型'
|
|
|
+ }, {
|
|
|
+ title: '选择认证类型'
|
|
|
+ }, {
|
|
|
+ title: '填写认证配置'
|
|
|
+ }, {
|
|
|
+ title: '结果'
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ var repoType
|
|
|
+ var authType
|
|
|
+ form.on('submit(formStep)', function (data) {
|
|
|
+ repoType = data.field.type
|
|
|
+ step.next('#stepForm');
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ form.on('submit(formStep2)', function (data) {
|
|
|
+ authType = data.field.authType
|
|
|
+ if (authType === 'ssh') {
|
|
|
+ document.getElementById("username").remove()
|
|
|
+ document.getElementById("password").remove()
|
|
|
+ } else if (authType === 'http') {
|
|
|
+ document.getElementById("rsaPrikey").remove()
|
|
|
+ } else {
|
|
|
+ document.getElementById("username").remove()
|
|
|
+ document.getElementById("password").remove()
|
|
|
+ document.getElementById("rsaPrikey").remove()
|
|
|
+ }
|
|
|
|
|
|
- $("#repo_auth_type_tips").hover(function () {
|
|
|
- var tips = layer.tips(
|
|
|
- '仓库不需要认证则选择 none 类型<br/>' +
|
|
|
- 'http 认证类型必须填写用户名和密码<br/>' +
|
|
|
- 'ssh 认证必须填写 RSA 私钥<br/>',
|
|
|
- '#repo_auth_type_tips',{
|
|
|
- tips: [1, '#555555']
|
|
|
+ step.next('#stepForm');
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ form.on('submit(formStep3)', function (data) {
|
|
|
+ data.field.type = repoType
|
|
|
+ data.field.authType = authType
|
|
|
+ // 手动提交表单
|
|
|
+ $.ajax({
|
|
|
+ type: 'POST',
|
|
|
+ url: '/api/build/repoauth',
|
|
|
+ contentType: "application/x-www-form-urlencoded",
|
|
|
+ data: data.field,
|
|
|
+ success: function(jsonData) {
|
|
|
+ if (jsonData.code === 0) {
|
|
|
+ layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 1});
|
|
|
+ } else {
|
|
|
+ layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function(xhr, status, error) {
|
|
|
+ // 处理表单提交失败后的错误
|
|
|
+ layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
|
|
|
+ }
|
|
|
});
|
|
|
- sleep(1000);
|
|
|
- layer.close(tips);
|
|
|
- })
|
|
|
+
|
|
|
+ step.next('#stepForm');
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.pre').click(function () {
|
|
|
+ step.pre('#stepForm');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.next').click(function () {
|
|
|
+ step.next('#stepForm');
|
|
|
+ });
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
