Immanuel
/
trendplays
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 1 Wiki Activity
瀏覽代碼

Handle registration success and errors

tags/v0.1.0
Immanuel Onyeka 4 年之前
父節點
3cf673dbb2
當前提交
987c826878
共有 6 個文件被更改，包括 185 次插入 和 5 次删除
分割檢視
  1. +51
    -0
      resources/images/checked.svg
  2. +43
    -0
      resources/images/checked2.svg
  3. +49
    -0
      resources/images/warning.svg
  4. +27
    -4
      resources/js/register-area/register-area.vue
  5. +2
    -1
      resources/scss/_vars.scss
  6. +13
    -0
      resources/scss/main.scss

+ 51
- 0
resources/images/checked.svg 查看文件

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="#63b521" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M497.36,69.995c-7.532-7.545-19.753-7.558-27.285-0.032L238.582,300.845l-83.522-90.713
c-7.217-7.834-19.419-8.342-27.266-1.126c-7.841,7.217-8.343,19.425-1.126,27.266l97.126,105.481
c3.557,3.866,8.535,6.111,13.784,6.22c0.141,0.006,0.277,0.006,0.412,0.006c5.101,0,10.008-2.026,13.623-5.628L497.322,97.286
C504.873,89.761,504.886,77.54,497.36,69.995z"/>
</g>
</g>
<g>
<g>
<path d="M492.703,236.703c-10.658,0-19.296,8.638-19.296,19.297c0,119.883-97.524,217.407-217.407,217.407
c-119.876,0-217.407-97.524-217.407-217.407c0-119.876,97.531-217.407,217.407-217.407c10.658,0,19.297-8.638,19.297-19.296
C275.297,8.638,266.658,0,256,0C114.84,0,0,114.84,0,256c0,141.154,114.84,256,256,256c141.154,0,256-114.846,256-256
C512,245.342,503.362,236.703,492.703,236.703z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 43
- 0
resources/images/checked2.svg 查看文件

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="#63b521" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 408.576 408.576" style="enable-background:new 0 0 408.576 408.576;" xml:space="preserve">
<g>
<g>
<path d="M204.288,0C91.648,0,0,91.648,0,204.288s91.648,204.288,204.288,204.288s204.288-91.648,204.288-204.288
S316.928,0,204.288,0z M318.464,150.528l-130.56,129.536c-7.68,7.68-19.968,8.192-28.16,0.512L90.624,217.6
c-8.192-7.68-8.704-20.48-1.536-28.672c7.68-8.192,20.48-8.704,28.672-1.024l54.784,50.176L289.28,121.344
c8.192-8.192,20.992-8.192,29.184,0C326.656,129.536,326.656,142.336,318.464,150.528z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 49
- 0
resources/images/warning.svg 查看文件

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<g>
<path d="M507.113,428.415L287.215,47.541c-6.515-11.285-18.184-18.022-31.215-18.022c-13.031,0-24.7,6.737-31.215,18.022
L4.887,428.415c-6.516,11.285-6.516,24.76,0,36.044c6.515,11.285,18.184,18.022,31.215,18.022h439.796
c13.031,0,24.7-6.737,31.215-18.022C513.629,453.175,513.629,439.7,507.113,428.415z M481.101,449.441
c-0.647,1.122-2.186,3.004-5.202,3.004H36.102c-3.018,0-4.556-1.881-5.202-3.004c-0.647-1.121-1.509-3.394,0-6.007
L250.797,62.559c1.509-2.613,3.907-3.004,5.202-3.004c1.296,0,3.694,0.39,5.202,3.004L481.1,443.434
C482.61,446.047,481.748,448.32,481.101,449.441z"/>
<rect x="240.987" y="166.095" width="30.037" height="160.197"/>
<circle cx="256.005" cy="376.354" r="20.025"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 27
- 4
resources/js/register-area/register-area.vue 查看文件

@@ -33,11 +33,27 @@
<button class="submit-btn" type="submit">Submit</button>
</form>
<img v-if="active === 'loading'" type="image/svg+xml" class="loading-icon" src="../../images/loading.svg" alt=""/>
<div v-if="active === 'register-completed'">
<img class="medium-icon" src="../../images/checked2.svg" alt="">
<h3>Success!</h3>
<p>A verification link has been sent to your inbox.</p>
</div>
<div v-if="active === 'forgot-completed'">
<img class="medium-icon" src="../../images/checked2.svg" alt="">
<h3>Success!</h3>
<p>A password reset link has been sent.</p>
</div>
<div v-if="active === 'error'">
<img class="medium-icon" src="../../images/warning.svg" alt="">
<h3>An Error Occured.</h3>
<p>{{`${error}: ${errorMessage}`}}</p>
</div>
<div v-on:click="closeArea" class="cancel-button"></div>
</template>

<script>
function register(event) {
this.active = 'loading'
fetch("/register", {
method: 'POST',
headers: {'Content-Type': 'application/json',
@@ -47,9 +63,15 @@
"password": document.getElementById("register-password").value}),
"password_confirmation": document.getElementById("confirm-password").value})
.then(response => {
//Give completed or error
if (response.ok) {
this.active = 'completed'
} else {
this.error = response.status
this.errorMessage = response.statusText
this.active = 'error'
}
console.log(response.json())
console.log(response.ok)
console.log(response.message)
});
event.preventDefault();
}
@@ -64,16 +86,17 @@
}
}


module.exports = {
data() {
return {active: 'loading'}
return {active: 'register'}
},
methods: {
register,
checkPasswords,
closeArea() {
document.querySelector(".register-area").classList.remove("active")
}
},
}
}
</script>

+ 2
- 1
resources/scss/_vars.scss 查看文件

@@ -17,7 +17,8 @@ $theme-colors: (
"faded-text": #425466,
"faded-text2": #6c757d,
"dark-green": #3bb78f,
"light-green": #0bab64
"light-green": #0bab64,
"green": #63b521
);

@function getColor($col) {


+ 13
- 0
resources/scss/main.scss 查看文件

@@ -468,6 +468,10 @@ footer a {
margin: auto;
}

.register-area p {
text-align: center;
}

.register-area .loading-icon {
margin-top: 100px;
}
@@ -531,6 +535,15 @@ div.register-area.active {
opacity: 1;
}

.medium-icon {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
display: block;
top: 50px;
}

// Make small screens more usable
@media (max-width: 720px) {
nav { display: block; }


Write Preview
||||||
​x
 
​
000:0
Loading…
取消
儲存